Search the Community
Showing results for tags 'scrolling'.
-
Found a solution to my question
-
Site URL: http://www.studiofurks.com I want to make the "Case Studies" link in the navigation bar an anchor link so it auto-scrolls the user to the white section when clicked on (portfolio grid items).
-
Site URL: https://www.offpaper.design/portfolio Hello! I'm looking for a way to make the text on the left-side of the portfolios to become 'fixed' when scrolling. There are several images and I'd like for the the text to follow alongside - there are 6 portfolio pages in total. I've seen a couple of people have success with it on here, however I can't figure out how to direct it to that certain text block! (understand I still have a lot to learn coding-wise!) If anyone is able to help at all, I'd be so grateful 😄
-
Site URL: https://www.grantekilgard.com/ Hello! I used this media query in order to make the desktop version of certain pages disable scrolling, while allowing scrolling on mobile versions: <style> @media screen and (min-width:992px) { html, body { overflow: hidden; </style> This worked great, except my mobile pages scroll way too far for my taste. Is there a way to make this excess page space smaller? I've attached a video of what I am talking about Thanks in advance! gek site issue.mov
-
Site URL: https://crow-sawfish-gcl2.squarespace.com/ I am trying to get my images to autoplay in the "Slideshow:Reel" setting for gallery. It is only autoplaying when the images are full. Is there a way to get these to autoplay with the images being smaller?
-
Does Squarespace support Luxy Java Script?
KevinWalton posted a question in Coding and Customization
Site URL: https://www.kevinwalton.ca Hi, I was wondering if someone can help me with slowing down scrolling like they use on Webflow. I want my site to scroll like this: https://ceremonycoffee.com/ Researching what kind of scroll technique is used, I found that it is called "Luxy" javascript. I can't seem to figure out why it is not working on my site. <!-- before <body/> tag --> <!-- Smooth scrolling --> <script src="https://min30327.github.io/luxy.js/dist/js/luxy.js"></script> <script charset="utf-8"> var isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent); if (!isMobile) { luxy.init({ wrapper: '#luxy', wrapperSpeed: 0.065, }); } </script> Can someone help? Thanks, Kevin -
Slideshow - Swipe or flick through/Horizontal scrolling
VLabrie posted a question in Coding and Customization
Hi there, I'm working on a photographer's website, and on her slideshow galleries, she wants to be able to do a horizontal scroll with touchpad or on a mobile device. Basically, like flipping through the gallery from right to left, instead of clicking on the gallery or on arrows. I'm pulling my hair over this. I've come across Flickity but have no idea how to make it work with Squarespace. Any insight would be so appreciated! Thank you so much! -
Is there any way to make the overflow-x and overflow-y functions scroll in the same direction?
-
Site URL: https://www.arnaldoabba.com/ How does one go about making a page scroll horizontally instead of vertically - like this page: https://www.arnaldoabba.com/ I have tried modifying the ishimoto template myself, but just cant seem to get it to work. Are there and CSS gurus out there that can help me with an explanation? Any help is much appreciated. - Jakob
-
Site URL: https://www.jonyguedj.com I would like the first gallery image to be center, and upon scroll have it slide -
Site URL: https://studiojunk.squarespace.com/ Hi, I wanted to add a Star Wars scrolling text to the 3rd section of my homepage. I tried implementing from other tutorials but I can't seem to turn it around right. I attached a picture of the section I need help with. Here are my references: https://css-tricks.com/snippets/css/star-wars-crawl-text/ https://codepen.io/scottbram/pen/KuHsl Site: https://studiojunk.squarespace.com/ Password:brineintopedro
-
Site URL: https://corn-apricot-zn88.squarespace.com/bassettiportfolio I have made my universal filter stick, but it shifts up slightly when you scroll down. Thoughts? I used this code. I had issues initially because the gallery wanted to scroll under the filter so you could see a sliver above it, so I played with the "top" position. Is there a way to make it not shift when it scrolls? I tried removing padding on the summery block and filter container. ALSO - I cannot seem to get rid of the small grey line above the text. I have all borders set to 0. Code I used is: /*universal filter*/ /*position sticky*/ body .custom-filter-container, .custom-filter-parent-node { overflow: visible; position: absolute; } .customFiltersWrapper { position: sticky!important; top: 170px; margin-bottom: 0vh; } #yui_3_17_2_1_1630531262614_676, #yui_3_17_2_1_1630530276084_720, #yui_3_17_2_1_1630531152613_1010 { margin-top: 0vh; padding: 0!important;} #block-6708d6bafe3faea67f02, #block-yui_3_17_2_1_1590076520498_4551, #block-206175b0d9ba3902e4c7 {padding-top: 0!important;} Thanks!
-
Hi guys! I've seen a few websites with parallax scrolling on one of their pages and then the next page below is enabled. I think that's such a cool feature that I would love to implement. I searched the web for a long time to try to find the code for this but I just got this link https://blog.alexgittings.com/disable-parallax-on-one-squarespace-page/ with a code, but I have no idea where to put the code as it's poorly described. THIS IS WHAT THE ARTICLE SAID: To do this you will need to inject a script into the page. Navigate to the page cog and select advanced and enter the following: <script> Static.SQUARESPACE_CONTEXT.tweakJSON["tweak-overlay-parallax-enabled"] = false; </script> Once saved the parallax feature for that page should be disabled. But I have no idea where to put this code. Do any of you have any suggestions or know of another way? Thank you! Eager to hear back 🙂
-
Font / pictures change size when scrolling down on mobile
kyleb123 posted a question in Coding and Customization
Site URL: http://chessbuds.com When I access my site on a mobile device using a link from another website (Instagram, LinkedIn, etc.) and scroll down, the font and images change size. I'd like them to stay the same size when scrolling and not change around. I entered this custom CSS and it seems to work when I access the mobile website via an internet browser, but not when I access it through a link. Any help fixing my site would be greatly appreciated- thank you! /* header fixed padding */ @media screen and (max-width:767px) { .header-announcement-bar-wrapper { padding: 6vw !important; } } -
Site URL: https://dogpatchpaddle.com/home-1 I am working on a new landing page for my site and have implemented the new "Auto Layouts" in the "Headlines" section to create a gallery with buttons, headers, and scroll arrows. I wanted to make the header transparent, which I was able to do with the help of a script from here. Where I'm struggling now is trying to advance the slides automatically. Not sure why Squarespace doesn't have an option to auto advance by seconds. Anyway, I tried this script I found but it didn't work: Any other thoughts on how to do this? Much appreciated.
-
Site URL: https://swan-arugula-5f75.squarespace.com/ Website pswrd: 12345678 When I scroll down my page, the top menu bar disappears which is perfect. However, when I scroll up and stop in the middle of the page, the top menu bar appears which overlays on top of my content. I want to see my logo and menu bar only when I reach the top of the page. Any idea how to solve this issue in Carson template? Thanks! -
Header Issue on Landing Page with Zion Template
ablitz posted a question in Coding and Customization
Site URL: https://alpaca-rhubarb-jjtf.squarespace.com/config/ Hello, I'm using the Zion template and when scrolling up and down, a black bar briefly appears in the background of the header only. Doesn't seem to be happening to any other page or area on the site while scrolling. Any help or coding would be greatly appreciated. Thank you so much as always! -
Site URL: https://alpaca-rhubarb-jjtf.squarespace.com/config/ Hello, I'm using the Zion template and when scrolling up and down, a black bar briefly appears in the background of the header only. Doesn't seem to be happening to any other page or area on the site while scrolling. Any help or coding would be greatly appreciated. Thank you so much as always!
-
Site URL: https://kale-clarinet-t64e.squarespace.com/ I injected an html code snippet and then styled it in css to scroll, everything is working perfectly except it's two lines of text instead of one continuous one, checkout the screenshot for reference. This is the code I used: *I'm copying this website to practice my web design skills, so this is my desired look (7th section): https://www.vacation.inc/ * HTML <div class="scroll"> For full details including alternate means of entry see Official Rules — NO PURCHASE NECESSARY.Void where prohibited. Ends at 11:59:59 ET on 9/21/21. Open to legal residents of the U.S., 18+. </div> CSS .scroll{ font-family: 'OptimaLTProItalic'; color: #EBE6DC; overflow: hidden!important; position: relative!important; -moz-transform:translateX(100%); -webkit-transform:translateX(100%); transform:translateX(100%); -moz-animation: scroll 25s linear infinite; -webkit-animation: scroll 25s linear infinite; animation: scroll 25s linear infinite;} @-moz-keyframes scroll { 0% { -moz-transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); } } @-webkit-keyframes scroll { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); } } #page {overflow-x:hidden} -
Site URL: https://www.joesgarageprescott.band I have created a website for our band. I would like to scroll (either horizontally or vertically) our song list. I set up the code then added the songs. It worked, but not in the way I imagined it. Rather than scrolling like a ticker tape, it scrolls the song list as an entire paragraph which scrolls across the screen at one time. Is there a way to do a ticker tape format or a way to scroll vertically, one line at a time, from bottom to top? Thanks. Ken
-
Has anyone added a smooth scrollbar to their website? I'm not meaning smooth scrolling to an anchor, I'm meaning the entire browser. I'll use the Fireart Studio's website as an example... https://fireart.studio Thanks in advance for your help!
-
Site URL: https://www.domrugman.co.uk/work/little-dough password - qwerty123 Is it possible to keep the left hand text box static while the images scroll down on the right? Thanks
-
Mobile Home page no images till scroll function activated
MattsJensen posted a question in Coding and Customization
Site URL: https://www.matthewjensen.com.au/ Site URL: https://www.matthewjensen.com.au/work/circuit-emm6e Hi there, Wondering if you can help. I have added some CSS code from various sources on this forum, but one of them is causing trouble with the Mobile Home screen. When the home page loads, nothing is visible till you activate the scrolling function? Then all images appear? Any ideas? Pass = mattstar75 Thank you -
Transparent homepage header to solid color on scroll?
deplatt posted a question in Coding and Customization
Site URL: http://www.martiandesign.com I would like to have the background of my header transparent and then fade to black when I scroll on the homepage only. Any help is greatly appreciated (7.1) -
Tremont Theme - Fix navigation at the top of the page
HarmonicMinor posted a question in Coding and Customization
Site URL: https://hen-semicircle-g5hj.squarespace.com/ Hi All, I would like to hide the navigation bar during scrolling. If you see now, when I'm scrolling down, it disappear but when I'm scrolling up, it appears. https://hen-semicircle-g5hj.squarespace.com/ PW : bubu How do I disable it during scrolling? I would like it to appear at the top of the page only. Thank you very much in advance! Best regards, Adrian
