Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'parallax'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Site URL: https://cristiestevens.com/frwrd-skincare Hello! I want to create this Parralax roll over animation as shown in the above link with a full bleed header, do I need to do this in code?
  2. Site URL: https://www.qbpsychology.ca/ Member 0 10 posts Posted Friday at 03:06 PM (edited) Password: psychology Note: reposted from last week because i didn't get any responses Hi guys! I watched a you tube video on how to mimic parallax in the new version of squarespace by putting the images in a hidden folder and then linking to them using css. The only issue is that it defaults to focusing on the vertical top of the pho
  3. Site URL: https://www.qbpsychology.ca/ Password: psychology Hi guys! I watched a you tube video on how to mimic parallax in the new version of squarespace by putting the images in a hidden folder and then linking to them using css. The only issue is that it defaults to focusing on the vertical top of the photo, so i can't choose if i want the focus shifted up or down. You can see this very clearly by clicking on the hidden pictures folder to get a sense of the images. Then go to any page where there is a picture in the header and adjust the height of the section. You'l
  4. Hi! my problem when I'am adding a parallax image to a page where I have a sticky CSS, the sticky code doesn't work anymore.(code below ) The sticky texts doesn't work with parallax pages? I checked all forums, but I didn't find the solution. this is the page url: https://www.studio4045.net/csurgo /* Sticky text on desktop */ @media screen and (min-width:901px) { /* Sticky text */ div#page-5fd7b5fb2b9b2c152d146504>.row:nth-child(2)>.span-3 { position: sticky; position: -webkit-sticky; top: 200px; Thanks,
  5. Site URL: https://oval-denim-r8bs.squarespace.com We added some Parallax functionality and unfortunately it broke the fallback image that comes up for mobile users. Anyone know any way to alter this code to not impact the video header? <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script> <script> $('.has-background:not(:has(.sqs-video-background))').each(function() { var findImage = $(this).find('.section-background img');
  6. I have the following code in my code injection footer to add parallax effect to all banner background images: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/scrollax@1.0.0/scrollax.min.js"></script> <script> $('.has-background').attr('data-scrollax-parent', 'true'); $('.has-background .section-background').attr('data-scrollax', 'properties: { translateY: "30%" }'); $.Scrollax(); </script> However, I want to disable the effect for one specific section. Is this pos
  7. Site URL: https://wedge-rust-ntjf.squarespace.com/ Hi there! I'm looking to create a website homepage similar to this ? https://arentpyke.com Is it possible to make let's say an image with a logotype on top of it and then scroll down into the homepage past the header. Or even if someone has guides on how to do this ? Cheers Sean!
  8. 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!
  9. Been trying to "work" the parallax option for an hour only to discover after some frustration that the new update does not support it. Please tell me this is false. Unless, is there another way I am unaware of? Such a shame Squarespace. Taking out one of the best aesthetic features (in my opinion) and honestly the only reason I used Squarespace in the first place. Seems as the company are adding more restrictions deliberately to make them less unique from their competitors. Great. Edit: Have decided to switch from this platform. Screenshot.mp4
  10. need help creating a parallax fixed footer. example here of what i would like to achieve: https://codepen.io/pqt/pen/bNByOj can anybody help?
  11. Site URL: https://www.davai.squarespace.com Hi all I have just noticed some pretty substantial errors on one of our websites (password: davai). I have added multiple images as Parallax effect on certain sections with help from the following code: [data-section-id="5f687b7bd45f307089cd61c5"]{ .section-background{ &::after { //creating the element content: ""; width:100%; height:100%; position: absolute; //adding the image background-image:url(https://static1.squarespace.com/static/5f6873716e3d0466b9953dd9/t/5f7ad62404f4b1
  12. Site URL: https://thelandcollaborative.squarespace.com Hi All, I've been through the many posts here about Parallax on Squarespace 7.1. I've tried about 5 different versions (all the issues are in the forums). The parallax is working, but the jitters are terrible when you scroll up. So far, I haven't found a fix for this. Is it possible to get any of the experts on here to commit to figuring it out? The website is: https://thelandcollaborative.squarespace.com. I'm using this in the site-wide code injection box: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2
  13. 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!
  14. 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
  15. Site URL: https://pepper-buffalo-5bc8.squarespace.com/creative I'm using Sonora and like a lot of the template but on a few pages, I'd like to be able to have full-bleed images of fixed proportions instead of the parallax reveals that the "banner" feature seems restricted to do. Is there a workaround?
  16. Site URL: https://www.orcasoundproject.com/ Hello, How can I add parallax scrolling on Squarespace 7.1 on specific images? I have tried different codes but none of them seem to be working or they have minimal impact, you can barely notice it. I would like to have the effect of totally scrolling through it like in this example on the header image: https://www.recyclerebuild.org/spotlight Thanks!
  17. Site URL: https://interiorsbydesignco.squarespace.com/ Hi, I've recreated a clients site from 7.1 to Brine in 7.0 so that they can have a parallax background image with scrolling text. I've added anchor text links to jump to text block and used spacer block and also carriage returns to get the positioning right. I want to stop the banner image to scale beyond the edges, so that the background image is always 100% of its width. Is this possible? To view the site: https://interiorsbydesignco.squarespace.com/ interiorsbydesign Now that I've added
  18. Hi ! I was wondering if there is a way to create overlapping section rather than background. Something similar to parallax effect but for entire section content not just its background. For example, I want as I scroll down section 2 to cover section 1 (both background and text) rather than only covering the background. Currently, I am using the parallax code from https://schwartz-edmisten.com/blog/how-to-add-parallax-to-squarespace-7-1 I really appreciate your help! @tuanphan
  19. Site URL: https://roncosta.com Does anyone have any good css/javascript code to get the parallax effect on 7.1? The one I'm using used to work great but now the main header of pages are flickering when you're scrolling up/down using a web browser. This is the code injection I'm using right now: <script src="\[https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js\](https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js)"></script> <script src="\[https://cdn.jsdelivr.net/npm/scrollax@1.0.0/scrollax.min.js\](https://cdn.jsdelivr.net/npm/
  20. Site URL: https://ellipse-rhubarb-cnfw.squarespace.com Hi everyone, Really frustrated by this one, been trying for ages tonight - hopefully someone can help! I'm looking to change the padding on a single element of the homepage - the section that says 'Colour of the month', so I can have the smaller text row appear closer to the bottom of the module than the global padding settings. What custom CSS can I add to target just that single element's padding? I've successfully targeted block-yui elements in other parts of the site, but seem to be struggling as this is a parallaxing
  21. I have an index page where i want the parallax effect on all the pages inside of the index except one. I am trying to disable the parallax effect on one specific page inside. For better context I am looking to have a background image that is the width of the page and does not have the parallax scroll. I tried using css to use a background image instead but it does not work. An example of what I am trying to achieve attached.
  22. 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
  23. Site URL: https://www.elevateptr.com/ Hi - does anyone know how I can adjust the custom code injected into my footer so the parallax code targets the first image on my homepage? Would it be block specific? If not, can anyone help me with the code to make a background image look good on mobile? I left this main image as an image vs. a background as I added css so on a mobile view the image shrinks to fill the screen. Thank you!
  24. Site URL: https://gardenia-cyan-txbg.squarespace.com/ Hi, I have a fixed split section on my site 7.1 and I added some css to add parallax on my images, I am having an issue with one where its not showing fully and there is a white space where it shouldn't. Any ideas? https://share.getcloudapp.com/2Nuyw0Rg https://gardenia-cyan-txbg.squarespace.com/ password: feel2020
  25. Site URL: http://www.pantryphilosophy.com My site has parallax effect but it needs an arrow to indicate there is more content below the banner image. I would like this arrow to allow users to jump to the next section.
  • Create New...