Search the Community
Showing results for tags 'scrolling'.
-
Rectangle Error block on Scrolling Wave
tradecreatives posted a question in Coding and Customization
Site URL: https://www.tradecreatives.co.uk I'm having an issue with the scrolling text block - on the editor it appears fine, but on mobile safari browser we have this bug. Does anyone know how to solve this issue? . -
I am using the Bedford template. Thank you so much for your help! -
Site URL: https://bozoo.it/ Hello, I would like to get a scrolling product gallery for my product like this website. https://sabai.design/ I am referring to the section "Beautiful, sustainable furniture for you, and for the Earth". How I can achive that in my template Saltless?
-
I have a scrolling issue on a code block. If you use the scroll buttons it likes to scroll beyond the content in the block. How do I get it to stop scrolling at the end of the content. I moved the link for the page up to the header for easy access. It's called Cryptocurrency Dashboard. The code block is at the top of the page called "Forking/Halving Events". Website: www.MidnightInvestor.com Password: 123456$
-
Scrolling reveals text vertically (not scrolling marquee)
Charms posted a question in Coding and Customization
Site URL: http://groupamana.com/ Hi there! Does anyone know how to create text that appears (whilst the previous text disappears) as you are scrolling? Like the header in the Amana Group site. Thanks! -
Site URL: https://www.rootsandbranches.center/ https://www.rootsandbranches.center/ Hi, I've embedded a contact form from HoneyBook (3rd party). But it is so long! I'd like to condense the space it uses and instead be able to scroll within the section. If that's not possible, then I'd like the section to open like an accordion. Is there a way to do either one? I just don't want the form to monopolize the whole page and make it annoying to get to the rest of the content. Thanks!
-
Scroll to anchor jumps back to wrong section
erikabarichello posted a question in Coding and Customization
Hello, I am building a single page website where I have added a custom navigation to the top with anchor links that make the page scroll to their specific section. Everything works fine except the third and last link, supposed to send you to the contact form, last section before the footer. When clicked it scrolls to the wrong place, on a section before the correct one. It goes to the right spot just on the second click. I have tried with 3 different coding solutions, all involving jQuery and they all behave the same way. Any idea why this could be happening? Thanks 🙂 -
Site URL: https://www.poornilindenfeld.com Hi there, I'm trying to add a design detail to my site where a number of images will stay fixed on the screen as a block of text scrolls past it. I used to have some CSS that did the job, but somehow I can't seem to recreate it. I've attached an example of one of the sections where I'd like the text to scroll and the image to "stick". If there is a way to do this with CSS and a section ID finder (recommendations would be appreciated!), that would be super helpful. I'd like to know how to do this with any section of my website. Here is the link: www.poornilindenfeld.com psw: saith Thanks in advance for any help or advice. -
Hello ◾️squarespacers _, I need help/advice. In gallery section (Grid: Simple+Lightbox) I want that on hover text "Enlarge" appear in lower right corner at bottom of the page. I tried quite a lot - but no luck. Is it even possible? Best Duško Bekar
-
Site URL: https://sparrowstartup.com/ Hello, another day, another bug. Attached a video where you'll see the fonts/pics getting larger or smaller randomly as I try to scroll down. Please help me understand what's wrong. Thank you. squarespace.mp4
-
I'm trying to use the code below to create a scrolling image to show website designs, however once I paste in the image block id and save, the image does not scroll. It seems only the scroll portion of the code isn't working since making changes to the height, drop shadow, etc. all take effect. Anyone have any ideas what I might be missing, or suggestions for other ways to achieve this effect? This is on a 7.1 site using Fluid Engine. #PASTE-BLOCK-ID { height: 500px; max-width: 80%; margin:auto; width: 100%; overflow-y:scroll; overflow-x:hidden; filter: drop-shadow(2px 22px 40px rgba(0,0,0,.3)); @media screen and (max-width:767px) { height:200px; } }
-
Site URL: https://www.casadesignla.com I'm running into an issue with a phantom scroll line that appears when I swipe left/right using mobile while viewing my site's gallery pages. I've been told by Squarespace support that the issue is linked to my custom CSS: /* Custom Contact Form Fields */ .form-wrapper .field-list .field .field-element { border: none !important; border-bottom: 1px solid #7B666A !important; border-radius: 0px !important; background: #e1dcc9; } /* Image Zoom on Hover */ .sqs-block-image .design-layout-inline { img:hover {transform: scale(1.1); transition: .8s;} img{transform: scale(1); transition: .8s;} } Any thoughts on how to adjust? Best, Kaila
-
Site URL: https://www.teresav.me/ My website homepage has a scrolling header of countries i've been to which I really like. But on mobile, the first and last countries (Ireland and Spain) overlap in a very ugly way. As far as I'm aware it doesn't do this on desktop. I've tried some of the easy fixes, like adding spaces, and adding a second item that is only spaces (as the text list of countries is all one item), but the problem persists (See attached). I would like to avoid making each country its own item because that seems tedious, but i'll do it if that's the recommended solve.
-
Hello ◾️squarespacers _, I need help/advice. I want to achieve that pagination is only shown at bottom of the page, when user scrolls down. Is it even possible? Best Duško Bekar
-
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; background: #173d56; } .Mobile-bar { position: fixed; z-index: 99999; } // move mobile overlay down .Mobile-overlay-menu-main { padding-top: 80px; } any help would be GREATLY APPRECIATED link to site -
Hello, I am trying to create 3 scroll anchor links to link to the next section on a specific page. I am using the following code and injecting it into the page header, but it only creates the anchor link from section 1 to 2, could someone help me figure out how to link section 2 to section 3 and from section 3 to back to top? <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function() { $("#page>article>section:first-child").append('<a href="#" class="next-section"><i class="fa fa-angle-down" aria-hidden="true"></i></a>'); $('a.next-section').on('click', function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: $(" #page>article>section:first-child").next().offset().top}, 500, 'linear'); }); }); </script> <style> article>section:first-child a.next-section { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-block; color: #fff; font : normal 400 20px/1 'Josefin Sans', sans-serif; letter-spacing: .1em; text-decoration: none; transition: opacity .3s; animation: fade_move_down 4s ease-in-out infinite; background-color: rgba(0,0,0,0.5); width: 150px; padding-bottom: 20px; text-align: center; font-size: 50px; } </style> Many thanks!
-
Hi, I would like to add an effect to my site such as the one on this website: https://afom.com.au/ Basically, when you scroll down it jumps to the entire next section, so one section at a time is displayed on screen. Could someone please advise me on how I may do this. Thanks in advance!
-
Hi, I put two appointment blocks on a page and the second one ended up with an unwanted vertical scroll bar. How can I get rid of it? I tried some codes I found on here but they did nothing but disable scrolling for the site. Thanks for any help. -
Site URL: https://maurice-template.webflow.io/ Hi .... Just wondering is it possible to achieve this animation effect in the new squarespace easily. I would like the images to move over the text upon scrolling (like this example where the images move over the word 'WORK' in this website: https://maurice-template.webflow.io/). I obviously understand this was created on a different platform, but want to see whats possible within Squarespace. If so can anyone please explain how to achieve this. Assume custom CSS code is necessary. Not sure if this is a simple or complex process using the new 7.1 squarespace. Thanks -
Site URL: https://www.rumahkeduamedia.com/rkm-news Site URL: https://www.rumahkeduamedia.com/rkm-news Please help, my marquee text not running in mobile and desktop view, i use windows and open basically in google chrome/ firefox, and if i opene from mobile phone, i'm open using safari/chrome
-
Site URL: https://papaya-plums-lrzm.squarespace.com/ Hello, I'm having an issue with 'overflow' on my website's mobile version. Here is the site: https://papaya-plums-lrzm.squarespace.com/ password: lucyinthesky When I view on mobile, there is a white margin on the right hand side of the page, when I zoom out, and then I can't zoom back in, it messes up how the site is viewed on mobile. So I think there is some overflow I need to fix? I tried adding: /** Page Hide Overflow **/ html, body { overflow-x: hidden!important; } However, that seems to cause other issues with the mobile where it's breaking the scroll. So don't think it's an option. Any ideas - I've tried to localise the code that's causing the overflow in the first place, but having trouble doing this. Thank you
-
I'm looking to make it so a piece of scrolling text only displays on a certain day and at a certain time. Is there an easy way to do this with custom CSS? I'm using the Bergen template, if that helps.
-
Site URL: https://one-is.com/ Does anyone know how to create this kind of effect in Squarespace? Happy to hire someone who knows how. It's triggered by scrolling, not hovering. https://one-is.com/
-
Please see Scrolling Block Text Gradient. Scrolling Block Text Gradient.mp4
-
Site URL: https://pumpkin-lime-8bna.squarespace.com/ Hello I've got some scrolling text as an announcement bar in this site https://pumpkin-lime-8bna.squarespace.com/ pw AWC123 It's currently got a huge blank gap between scrolls, I'd love for it to be on a continuous loop rather than having a gap between loops. Is anyone able to help? This is the code I've used to get it to this so far below. Thanks in advance. .sqs-announcement-bar-dropzone { position: -webkit-sticky!important; position: sticky!important; top: 0!important; z-index: 9999!important; } .show-on-scroll-wrapper.show { display: none!important; } /* Removing the underline on link in the announcement bar */ .sqs-announcement-bar-text a{ text-decoration: unset !important; } /* Adding left and right padding, change to match your site padding if needed */ .sqs-announcement-bar-text{ padding-left: 40px; padding-right: 40px; } /* Hiding anything that extends beyond the screen */ #announcement-bar-text-inner-id { margin: 0 auto; overflow: hidden; } /* Starting the text off of the screen and adjusting width, change the animation: 15s to however long you want the marquee to take in seconds */ #announcement-bar-text-inner-id p { display: inline-block; width: max-content; padding-left:100%; will-change: transform; animation: marquee 25s linear infinite; } /* Stopping the marquee on hover so people can click on links */ #announcement-bar-text-inner-id p:hover { animation-play-state: paused } @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }
