Search the Community
Showing results for tags 'scrolling'.
-
Hi all. My newest client has a very specific vision for his site, and I am not sure how I am going to accomplish it. He has a full-length picture of him in his business attire, and he wants that image to stay in place, while people scroll through the content next to the image. The scrolling content needs to be more than just text. I will need to include buttons, icons, anchors, and text styling throughout the scrolling content. I'm unsure of the best way to approach this and I would appreciate some suggestions. Thanks! -
Site URL: https://grape-primrose-9ww3.squarespace.com/ Hi, I am trying to change the appearance of the navigation menu as I scroll down the page. On scrolling past the header banner, I want the header background to remain transparent and the logo and navigation links to turn black. I have added some code already which was working before, but it seems like it has now stopped working for some reason... -
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.
-
Need Help Changing Color of Fixed Header for Scrolling
nattest posted a question in Coding and Customization
Site URL: http://www.saltycopy.com Hello, I am struggling to figure out how to edit my header. I want a transparent, fixed header (with white text) when at the top of a page on my site. I would like to change the color of the fixed header to an aqua (#c7faeb) with black text when I scroll. I've been playing with various CSS codes for this but haven't figured it out yet. I am using Squarespace 7.1 and any help would be very much appreciated! -
Site URL: https://www.justinpape.com/ Hey, Ive just noticed that my header when scrolling no longer stays transparent. On the main page it turns to a white BG and on a project page it turns Black. I have read a few different treads and tried the different custom codes i have seen but nothing seems to let it stay transparent all the time as it used to. Anyone have this issue and figure it out? Site: https://www.justinpape.com/- 2 replies
-
- 1
-
-
- custom-css
- header
- (and 3 more)
-
Site URL: https://digitalvenue.squarespace.com/ Hi! I have a very simple SS 7.1 landing page that should fit on one view on every browser without the need for scrolling, but somehow there are some pixels that won't allow this, and a very short (and bothering) scroll is still there. I have removed the header via css... Any pointers on how to make this cover 100% of the browser view eliminating the scrolling? Thanks! -
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!- 2 replies
-
- 1
-
-
- slideshow-gallery
- slideshow
- (and 1 more)
-
Site URL: https://opticair.co.uk/ Using the Sonora template, I have my home page set up as several sections, with anchor links within a fixed position primary navigation to enable the user to quickly navigate around the page, with a tidy scrolling visual effect. This would work (and has worked) fine if this were the only page on my site, using the link format '#section-name' to take the user to 'domain.co.uk#section-name'. There are additional pages in my site, which the user can access through links within the body of the home page and on which the primary navigation is obviously stil
-
hey guys, my english is not that good but i try to explain my question. I would like to build a one page website with a "scroll lock" effect. Is there any css code or tutorial how to make this effect? You can see this scroll effect at https://workflow-films.de Thank you and best wishes from germany! Dani -
Hi! I am trying to mimic this webpage's (https://www.reganarts.com/books/2016/the-godfather-notebook-special-edition/index.html) ability to have a static element remain fixed alongside a scrolling element. Essentially, I am trying to have an image remain fixed on one side, as the text next to it scrolls until reaching the end. At that point, the image and text will no longer remain fixed, and you can continue scrolling through the page. Anyone know how to do this with CSS? Happy to clarify if this is confusing. Also, I've done some research, and I'm aware that part of this would in
-
Site URL: https://tarantula-quillfish-w6xe.squarespace.com/ I added a "scroll to top" button on my page but I would like to have it fade in as you scroll down to make it appear. Right now it just pops up quickly. URL: https://tarantula-quillfish-w6xe.squarespace.com/ PW: !GCet0@E#8 Thank you in advance.
-
Site URL: https://ghostline.kitchen/get-started Hi there - I am not a coder or web developer but I happened to figure out how to get a Zoho Form and Calendly embedded into my site here: https://ghostline.kitchen/get-started How do I get rid of the annoying scroll bars that show up to the right of the form and Calendly tool? Thanks in advance!!
-
Resizing Gallery Blocks for mobile and seamless scrolling
ikaruga102 posted a question in Coding and Customization
Site URL: https://www.truthandbeautyphotography.com/engagements I have two pages like this. The images are so small on MOBILE, and I would like the gallery image to be larger. Here is an example of another squarespace user who has their gallery set up to scroll with swiping and with a good size. -
Site URL: http://lakerenfaire.com/ I am trying to find the right code to apply the "Index Scroll Nav: Show On Scroll" or "sticky navigation" to all pages on the site when scrolling down the page. This feature is available on the Pacific Template, but limited to and Index Page that has been set as the Homepage. Other Index Pages on the site or pages in general do not offer this option. How can this be achieved sitewide? -
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! -
scrolling How to make a stretchy scroll indicator?
bycrawford posted a question in Coding and Customization
Site URL: http://spaceforce.design/ Hi guys, I want to make a scroll indicator exactly like this: http://spaceforce.design/ Is there any code I can use for this? Thanks so much in advance! -
Site URL: http://bit.ly/ad7am-test1 EDIT 10/26/2020: Solved! See answer below. The webpage Iām trying to diagnose this on is http://bit.ly/ad7am-test1 and the password is < helper >. The default behavior for the gallery is that clicking or touching an image brings up a lightbox, to show the image at the largest it fits in the window, e.g. at 100% of the height of the viewport. I've customized the CSS ā because I need viewers to be able to read the text ā so that the lightbox instead shows the image at 100% of the width of the viewport.
-
Scroll back to top of page on icon/image click
bonniergcuk posted a question in Coding and Customization
Site URL: http://www.dolphinbottles.co.uk Hi, I was hoping to know if theres any code that when you click the mini logo in the right hand corner of the page it would auto-scroll back to the top of the page? The logo is fixed. Code is: <div id="dolphin-logo"> <img src="https://static1.squarespace.com/static/5efca1d4b38d327351cb3a48/t/5f80623086feca1a363d3f95/1602249265109/Untitled+design+%288%29+%281%29.png" width="110" height="55"> </div> #dolphin-logo { position: fixed; top: 90%; right: 0; left: 80%; transform: rotate(0deg) translateX(50%) -
Control Movement of Image/Video by Scrolling
AdminPrss posted a question in Coding and Customization
Hello, I want to incorporate something like this onto my website https://dogstudio.co/ , where the scrolling controls the movement of the background video/image. Can this be done with Squarespace? Really hope someone could help! -
Help with Fixed Background with Content scrolling indefinitely
Jori posted a question in Coding and Customization
Site URL: https://www.jorigoh.com/para Hello, My site password is 123 https://www.arcticmonkeys.com/ I am trying to achieve this fix background image while content scrolls pass to the top. I achieve it slightly with parallex BUT it only applies to 1st section, subsquently sections are opaque. Do i need add multiple of the same image to achieve this? wouldnt that mess up the alignment when it scrolls to the next section's image? Or make subsquent sections transparent? Or do i need to add a css to drag the section length? Thanks! -
Site URL: https://www.orcasoundproject.com/ Hello, I have created an animated counter with the help of a code injection at the bottom of the landing page. However it starts the counter when loading the page instead of when you scroll to the section defeating the point of the animation as you never get to see it. Is there any code to make start the animation only when you scroll to the desired section? Here is the code I've used for the animation: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(doc
-
I'm customizing a site (see here). One thing I've noticed is that the navigation bar, which retreats & then scrolls back into view on the homepage as you scroll down through the sections, doesn't replicate that behavior on other pages. For example, the blog page, or one of the other program description pages which has longer scrolling content. It looks like the class 'show' is being dynamically injected after the first page section on the homepage. 1. WHY? (more of a rhetorical question...) 2. How to copy over this scroll/hide/reveal behaviour to the other pages - not just home? -
Brine: Nav to change color after scrolling past Hero
AThompson_social posted a question in Coding and Customization
Hi friends, I am trying to trigger my navigation to change color after scrolling past the hero. Is there a way I can trigger the change by div or pixel? I currently have my nav as a sticky nav and want to keep that. this is what I'm working with. /*sticky nav https://forum.squarespace.com/topic/142732-brinekeene-sticky-navigation/#comment-184292*/ Header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; } // fix mobile nav .Mobile-bar--top { position: fixed; top: 0; left: 0; right: 0; -
Hello, I have parallax enabled for a banner image (which I like). However, on mobile, scrolling down the page looks very jittery. I'd like to disable parallax on mobile altogether, while leaving it functional on desktops. How can I do that? I've tried injecting the following code into the page header, to no avail: @media screen and (max-width:640px) { .parallax { background-attachment: inherit; } } Thanks, Joe
-
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.
