Search the Community
Showing results for tags 'scrolling'.
-
scrolling How to do snap scrolling for Squarespace 7.1
bycrawford posted a question in Coding and Customization
Hey guys, I want to create a snap scroll effect on my website. I'm using 7.1 - I know Brine works but need to adapt it to 7.1! Happy to use JS, CSS, etc. Whatever it takes. -
Seamless scrolling text in announcement bar
MaggieBovary posted a question in Coding and Customization
Site URL: https://keyboard-jaguar-k52z.squarespace.com/ Hello everyone, I'd like to make the announcement bar that is at the top of this website seamless, so that the same sentence repeats over and over without any blank space in between. Something like this: https://forthcoming.studio/ This is the website I'm working on: https://keyboard-jaguar-k52z.squarespace.com/ Password: tpt-2021 Any ideas on how to work it out? 🙂 Thanks in advance for your help! -
hello, I'm trying to get the snap scroll css feature working. As seen in this codepen example. (I want to be able to snap scroll section to section vertically.) https://codepen.io/andyadams/pen/omLOqZ As I understand it, you need to add the css to your container div and then to each section. (wasn't exactly sure what the container div is considered to be so I added that css to both collection and page.) I've added the css below but it doesn't work. Any help would be greatly appreciated! Thanks! Tom #page { scroll-snap-type: y mandatory !important; } #collection-60885ba
-
Site URL: https://www.willisforsurrey.ca Hi, I cannot find a single source for this code. I swear i've used it before. Would anyone kindly please help me get this code? These are what is currently filling with white. I want white icons and then green on a single mouse scroll .header-actions--right .header-actions-action--social {margin: 0;} body:not(.header--menu-open) .light-bold .header-actions .icon--fill svg {fill: #fff;} and using Darkest 2 as color profile Thanks in advance :)
-
Site URL: https://www.ssense.com/en-nl/men?gclid=Cj0KCQjwlqLdBRCKARIsAPxTGaVjdcIHrRuKU3PMthCK2HxW-uP9C4kvk6-2EvLX56cm4xhIYn8KiooaAtdjEALw_wcB Does anyone know how to make the gallery have static pictures in the sides but have the scroll down in the middle section. example here https://cobaltostudio.com/
-
Site URL: https://www.venuswtlau.com/ I insert custom CSS into my website to create a sticky footer, but I would love for the entire footer (or just the background colour) to fade or decrease opacity when you scroll down so that it doesn't cover content. I only want it to be at full opacity on the landing screen and when users reach the bottom of the page. Thanks in advance 🙂 -
horizontal overflow scroll for my homepage gallery.
Indi posted a question in Coding and Customization
Site URL: https://www.rerubbed.com I found this code, but am struggling to get it to work at all. Can anyone give me some advice? <style> .sqs-gallery { overflow: scroll; } body { background-image: none; } .sqs-gallery-design-strip-slide { padding-left: 3px; padding-right: 3px; } </style> <script type="text/javascript"> $( window ).load(function() { w = $(".sqs-wrapper").width(); $(".sqs-wrapper").width(w/2); }) </script> **for -
Changing logo in header while scrolling down
eduardvanpagee posted a question in Coding and Customization
Hi all, I want to have a different logo on my header ones you scroll down. This is the case; The background of my website is dark, but if you scroll down, a white header appears. But because the background of the logo changes from dark to white, the logo is not nice on one of these backgrounds. Because of this I have created another logo and I want to add this in a way that if I scroll down, the logo also changes to the other logo with another logo. Basically; If I scroll down I want to see the alternate logo on my header. [See attachment] [I don't know if this is relevant] Bu -
Site URL: https://codepen.io/tobiasthaden/pen/OVWKjm Hello there everyone! I was curious if anyone can help me with inserting this bout of code into Squarespace to change my background. I am curious if this is even possible, considering that from what I understand to change backgrounds we can only use CSS code? Am I wrong in that? Anywho, I'm looking to achieve the same effect as this groovy example . Any insight would be MUCH appreciated. xo
-
Site URL: https://www.cassiebarden.com/mountain-mikes-website I'm working on a portfolio site which includes a lot of mobile designs that are really tall and skinny. This is a big design challenge. I just saw something on another site (https://austinknight.com/work/petbrosia) that would be a perfect solution. Is there any way to achieve this in Squarespace? EDIT: solved it. Found the unique image id using the Squarespace chrome extension, and used the following code: #block-yui_3_17_2_1_1620689263094_32313 { width: 300px; height: 600px; overflow-y:scroll } -
How can I get rid of the horizontal scroll on mobile?
kristobans posted a question in Coding and Customization
Site URL: https://www.moderndifferent.com/ Hello. There is a left/right shift on mobile where you can grab the screen and move it left or right, and then it will spring back when released. -
Hi, I am looking at making a website that scrolls horizontally. A very simple site with title and menu in the top left hand corner. There would be a few galleries which I would like to scroll horizontally containing different sizes of images. I have already started something but the galleries only allow you to click through. Any help would be much appreciated .
-
Site URL: https://dweller.studio How would I add infinite scrolling text like this to my site? Using the code blocks I was able to add scrolling text but it eventually scrolls off screen I want it to be continuous like in the attached video. Screen Recording 2021-03-02 at 11.27.22 PM.mov
-
Site URL: https://www.thezonecommunity.com/become-a-member I would like to add a scroll feature, similar to the gallery, for quote blocks. Is this possible?
-
Announcement bar not showing after adding fixed scroll
charben posted a question in Coding and Customization
Site URL: https://bidie.co Hey! I just added custom css to fix the header while scrolling. The announcement bar is now hidden on desktop - seems to be fine for mobile. Please can you help? Thank you in advance! -
Site URL: https://www.downtoearthadventures.com/ Hi, I'm trying to get the scrolling marquee text to scroll continuously, without a pause and on one line. Any advice? https://www.downtoearthadventures.com/ pw: downtoshirts Examples: https://gawoonchung.com/about https://fourtwocreative.com/ Thank you! -
Site URL: https://sponge-lychee-awaf.squarespace.com Password is "1" I am having problems with Javascript. I don't know how to code in Java script so I was wondering if anyone can help me. I have a java script code for Luxy scrolling for smoother scrolling like Webflow, and I also have a code that works when scrolling on a page, the background colours fade together. For some reason, they don't like one another. The fading when scrolling no longer works and removes my background. Here is my code: Background change colour when scrolling: Header < -
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|Andro
-
[Custom Plugin Early Access] 360 image viewer block
bangank36 posted a question in Coding and Customization
Site URL: https://beyondspace-showcase.squarespace.com/shop-demo/p/sphereviewer/?password=1234&utm_source=squarespace_forum&utm_medium=topic&utm_campaign=promo Hello fellows, I am about to launch my latest Squarespace Plugin - Sphere Viewer Block. It provides an easy-to-use interface to integrate your 360 spritesheets images into Squarespace site, I wrote it so you can create it from Block Editor. I will give 5 single-site license for first 5 builders/designers who is interested in adding this feature for their site, I am welcome the feedbacks to make it work well before launc- 10 replies
-
- 6
-
-
-
- customized
- code-injection
- (and 3 more)
-
Hi there! I currently have scrolling text animation on my website , however, both the desktop and mobile version wraps the text as seen in below photos. Can someone please help me to modify the below code so that the text stops wrapping all together on all screens? Thanks so much! 🙂 .scroll{font-family:Milestone; font-size:2.7rem; color: transparent!important; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #FFFFFF; overflow: hidden!important; position: relative!important; -moz-transform:translateX(100%); -webkit-transform:translateX(100%); transform:translateX(100%) -
Hi there, How would one implement such a long/slow/smooth scroll as shown on this example of the website? http://robinmastromarino.com/ When you visit one of his works, the scroll seems very bouncy, like eased. Kind Regards, Max, ish.
-
Brine - Scroll past Logo and fix header navigation at top of page
EBB posted a question in Coding and Customization
Site URL: https://www.yaliglass.com I am refreshing our website (Brine 7.0) and would like to move our logo to the top centre position, with the main navigation underneath. As it takes up lots of space as a header I would like to be able to have the logo disappear when I scroll down and then fix the main navigation menu at the top of the page. I cannot figure out how to do this, I have tried various CSS but nothing has worked so far. Any help would be really appreciated! I attach two screen shots of what I would like it to look like (with Logo at top, then hidden when I start scrolling -
Lightbox Form not scrolling on mobile (iOS in particular)
IlbayDevin posted a question in Coding and Customization
Site URL: http://www.devinehealings.com Hello, So I have a Lightbox form on my home page (4th section) that is completely fine on desktop, however the scrolling is totally messed up on mobile. It seems to look fine upon the initial opening of the form, but once a field is selected, my phone zooms in automatically (which I have found out is due to the font-size and I wouldn't mind that happening if it wouldn't break the form). The display of the form in a zoomed in state seems to be fixed, as the lowest text field won't show even if selected. And when trying to scroll down it onl -
Hello, can you please help? I would simply like to have my site do the following: 1. When you click the back button in a browser, it takes you back to where you were on the previous page. Currently, it takes you back to top of page, which is frustrating if you were 10 images down in a gallery or on mobile. I am okay with a load time... 🙂 Is this possible on Squarespace? Example can be found here: https://www.nicholaskonert.com/art Thank you for your help and support. -
Site URL: https://www.urbanvillageproject.com/ Any ideas for how they may have built this series of stackable pages within the scroll? (https://www.urbanvillageproject.com/) It's simple, elegant, clearly communicates the various levels and goals of the project. I'd like to build something similar for a production company presenting several pitch decks.
