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
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • Resources
  • 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
  • German Circle Members's Topics

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://www.loveatfirstsit.net/ Hello! I had an issue where my background photos in my 7.1 squarespace site suddenly disappeared. All of the background images where suddenly in black. Even though when i used the edit option to add a photo, the photo was actually still set as the appropriate image, but when the site was live, all of the photos throughout the site photos where hidden in black. I was able to get them back with by removing the code below from the to code injection, (compliments of an awesome user that offered the code fix in a different forum), however by doing that, there is no longer a parallax from the photos. .has-background .section-background img { visibility: hidden!important; } Is there a code to get that parallax scroll back for the background photos without compromising anything else? Any help would be greatly appreciated. Thank you!☺️
  2. Site URL: https://www.katherineelder.com/ Hello, A while back I added the following coding to my website to create parallax in the background images. Yesterday I changed the header image on the shop page and all the section background images have gone and I don't know why. Please could you help me? Current Code Injections. HEADER <style> body.header--menu-open .header-title { filter: unset !important; } body.header--menu-open header#header img { content: url(https://static1.squarespace.com/static/60e2168480601f08e2ae389e/t/627bc5bf85a284571e186ead/1652278719894/Katherine_Elder_logo_sky.png) !important; } </style <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> FOOTER <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'); var imgUrl = findImage.data('src') + '?format=2500w'; var dimensions = findImage.data('image-dimensions'); var imgWidth = dimensions.substr(0, dimensions.indexOf('x')); var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1); $(this).parallax({ bleed: 0, imageSrc: imgUrl, naturalWidth: imgWidth, naturalHeight: imgHeight, speed: .2, }) }); document.getElementsByTagName("body")[0].onresize = function() { setTimeout(function() { jQuery(window).trigger('resize').trigger('scroll') }, 100) }; </script> <style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style> Thanks!!
  3. 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
  4. Hey all, I am wondering if anyone knows of a code I can use to add parallax image scrolling to banner images. I am building a site based off the Pacific template. Squarespace 7.0 only offers parallax image scrolling in the Brine template family in 7.0. Any help would be appreciated!
  5. So I've asked the "Customer Care" team a few times about this issue. Site scrolls fine on desktop but on mobile it is choppy and jumps up and down as you go by different content. I've tried experimenting with parallax content on and off and other things, but it still happens. And quite frankly, just turning off parallax wouldn't be a "solution" really. So the answer I always get is, "We're aware of this, but no ETA on a fix." That's just not acceptable. So I'm posting this to see if anyone has had any success with any hack to improve how jumpy things are on mobile. We predominantly use Sonora and Mojave templates. Perhaps it isn't as bad on some templates? Thanks.
  6. It's not perfect but it's close! To see the latest update for this Add a new section to your page (blank") Add a background image then choose "EDIT SECTION" Click on "background" Scroll to "Image Effects" Click the thumbnail... second one down on the right Click on the "adjust" little icon on right below thumbnail Click PARALLAX - make sure angle is set to "90", you can also adjust the intensity PRESTO! we all now have Parallax!
  7. 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 🙂
  8. Hi, Is there any CSS coding or code injections for parallax scrolling in 7.1? Thanks @tuanphanor anyone else?
  9. Site URL: https://bensfriendsofthevine.squarespace.com/ I've used this code an several sites and it works brilliantly! For some reason on this particular site, the social icons disappeared today, they were working fine yesterday! SITE: https://bensfriendsofthevine.squarespace.com/ PW: Ben Here is the code: (Settings/Advanced/code Injestion - placed in footer) <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'); var imgUrl = findImage.data('src'); var dimensions = findImage.data('image-dimensions'); var imgWidth = dimensions.substr(0, dimensions.indexOf('x')); var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1); $(this).parallax({ imageSrc: imgUrl, naturalWidth: imgWidth, naturalHeight: imgHeight, speed: 0.5, }) }); document.getElementsByTagName("body")[0].onresize = function() { setTimeout(function() { jQuery(window).trigger('resize').trigger('scroll') }, 100) }; </script> <style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style> <style> THIS IS WHERE I FOUND THIS AWESOME CODE! Credit to: https://schwartz-edmisten.com/blog/how-to-add-parallax-to-squarespace-7-1
  10. Site URL: https://www.aditya-sinha.com/ Hi, I am looking to create a parallax effect (through Squarespace style options or Custom CSS) on the slideshow at the top of my homepage. Basically, when scrolling down on the page, I want the header to disappear first and then the lower section to come up (thus achieving a parallax/tilt up effect on the slideshow where it moves slower than the text on screen). I managed to add tilt up to other sections with an image background that gives the illusion of parallax but the same option is not available for Slideshows. If @tuanphanor anyone else can help me with the same that would be really helpful! No Javascript code injection please ☹️ Thanks again! Password for access: tester
  11. Site URL: https://www.studiodelger.com/testing I’m trying to achieve a simple parallax effect on two overlapping .PNGs here: StudioDelger.com/testing My goal is to have the clouds in the background move more slowly than the people in the foreground as you scroll down the page. I’ve been looking at these tutorials on perspective and translatez https://medium.com/@johnearle/all-in-perspective-2996ee463509 https://keithclark.co.uk/articles/pure-css-parallax-websites/ Is it possible to do this with pure CSS? This site has a similar effect in the way that the pizza drawing and hand illustration moves up the page as you scroll. https://www.lamannabakery.com/ The CSS: /* Paralax Illustration */ //column container [data-section-id="60745c91580bd53b44eb6725"]{ .sqs-col-5{ position: relative; } .image-block{ position: absolute; width: 100%; } } //clouds sqs-block #block-yui_3_17_2_1_1618238465998_4806{ .sqs-block-content{ width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; perspective: 1px; perspective-origin: 0 0; } .image-block-outer-wrapper{ transform-origin: 0 0; transform: translateZ(-1px) scale(2); } .image-block-wrapper{} } //clouds image [data-image-id="60745d03bc8cce06463584c8"]{} //people sqs-block #block-yui_3_17_2_1_1618238465998_6847{ .sqs-block-content{} .image-block-outer-wrapper{} .image-block-wrapper{} } //people image [data-image-id="60745d1b829140737fd62ca8"]{} I would appreciate any help.
  12. Site URL: http://www.megvolk.com/bestow Hi there - I'm having an issue with project pages in the Jasper template. When loading the project pages, some images or videos don't show up upon landing on the page, and requires a scroll for them to appear. I'm afraid people won't scroll on my site and some work will be missed, so I want to disable parallax loading to have everything visible upon landing (unless there's another solve). I also wonder if it's related to my screen/browser size. It's happening here and here. However, all images load on this page without needing to scroll for them to appear : Def Jam Origins Series Any help or ideas would be appreciated! Thanks, M
  13. Site URL: http://sturmer.com.au/stories Hi there, I've applied some code in the code-injection section of my site wide footer to enable a parallax effect on the background images of my homepage (http://sturmer.com.au/) but it is causing problems on another page (http://sturmer.com.au/stories) by having the background images from the third section down bleed into other sections above. I have tried pasting the site-wide footer code directly onto the homepage 'page' on a per-page basis but this only seems to affect the header. Is there anyone able to assist and work out why this might be the case? Thanks so much for your help
  14. Site URL: https://tobiashaunhorst.com/tobiashaunhorst-de Dear Forum! I am having trouble with misaligned background pictures that get cropped in an awkward way in mobile view. I had to disable Parallax effect for mobiles, as it created issues with functionality and a strange whirring effect. This was done via code from this forum. Now the pics are static but weirdly cropped. I had already aligned all pictures via the focus point in the page settings. However this setting seems to be ignored by the software. How can I ensure reasonable alignment of the pictures on mobiles? Thank you for all your help! Tobias
  15. Hello everyone! I am trying to find a template, or a way to create a one page horizontal scroll site with anchors, but besides the "squarekicker" which I think is not what I am looking for, I can't find anything else. What I am aiming for is this https://polygondesign.com.au/ If you have any idea on how someone could recreate something like this, I would really appreciate your ideas and comments. Thank you in advance, Constantinos
  16. Site URL: https://www.byhutch.com Hi, I designed a site on Cargo for an artist and I would like to use the same .js file to animate a background image on squarespace but I am not sure how to implement it. I have added the image as a background, added the script to the footer injection and i have this code in the css. ///testing parallax section[data-section-id="629bd39be10a3e30d5e26b57"] { .section-background img { ??????? } } here's the script.... const sections = document.querySelectorAll("section") const bodyTag = document.querySelector("body") const addMovement = function () { const topViewport = window.pageYOffset const midViewport = topViewport + (window.innerHeight / 2) // lets find the middle of each section // (section, index) => {} sections.forEach((section, index) => { const topSection = section.offsetTop const midSection = topSection + (section.offsetHeight / 2) // how far away is the section from the visible area of the page const distanceToSection = midViewport - midSection // pick the tags to parallax const image = section.querySelector("img") const contentTag = section.querySelector("div") // weight down this distance let rotation = distanceToSection / 100 let contentDist = -1 * distanceToSection / 2 // for all the even sections, rotate the other way // is the index divisible by two // is the index's remainder zero? // the modulo operator 5 % 2 = 1, 4 % 2 = 0 if (index % 2 == 1) { rotation = rotation * -1 } // apply some parallax image.style.transform = `rotate(${rotation}deg)` contentTag.style.top = `${contentDist}px` contentTag.style.transform = `rotate(${-1 * rotation}deg)` // check the background if (distanceToSection > -100) { const dataBackground = section.getAttribute("data-background") bodyTag.style.backgroundColor = dataBackground } }) } addMovement() document.addEventListener("scroll", function () { addMovement() }) window.addEventListener("resize", function () { addMovement() }) any ideas? @tuanphan @creedon The url I am trying to implement is just a trial site https://radish-hexaflexagon-chhx.squarespace.com/parallax pw:demo
  17. Site URL: https://raspberry-wolverine-7tn4.squarespace.com/ Hi all, I am using parallax and therefore Brine 7.0 for a client. However, I want to disable the parallax for a number of banners because it is just too much. Anyone know how to do this? Thanks in advance!
  18. Site URL: http://campbell-rey.com Hey there, Would anyone know how to replicate this on Squarespace 7.1? I've experimented a little, but cant get the bg image to fix like this. Any help would be greatly appreciated! Thanks, Adam
  19. Hello Squarespace experts. I'm working on a site for a friend in which we want a single image to have parallax smart crop added to it, but to keep the rest of the images in the same style they were. Does anyone know how I might be able to do this? For reference this site is on 7.0 and using a Brine Template.
  20. Site URL: https://typeaprofessionals.com Hi there, I'm using the Brine 7.0 template with the parallax scrolling effect for three images on my home page. The images look fine on desktop and tablet view, but when I look at my site on my phone, I notice there is a black space below the images before they start scrolling (shown below). I'm using this CSS to make the header fixed--could this be cause of the black space problem beneath the images? Any idea how to fix? Thank you! //fixed header navigation// .Header.Header--top { position: fixed; top: 0px; z-index:1000; width:100%; } .Intro {padding-top:100px;} .Index {padding-top:100px;} .Main {padding-top:100px;} .Main.Main--page {padding-top:100px !important;} .Main.Main--blog-item {padding-top:0px !important;} @media only screen and (max-width: 480px) { .Main {padding-top:0px !important;} .Intro {padding-top:0px !important;} .Index {padding-top:0px !important;} .Main.Main--page {padding-top:0px !important;} }
  21. Hi everyone, I'm trying this Parallax effect for my personal website. I found this code on an youtube channel : here it's the link. I'm a beginner in Squarespace, so I try again and again ; 0 result with this message 'missing opening '{' . Can you help me, please? What's wrong? Thanks a lot in advance !
  22. Site URL: https://puma-hibiscus-cfk8.squarespace.com/ Hi there, I found this tutorial about a parallax overlapping effect for sections: https://library.superhi.com/posts/parallax-overlapping-sections-using-sticky-positioning I tried it out, and it works almost fine. I have one problem: the effect starts overlapping the section although the content isn’t loaded completely. The smaller text gets cut at the end of every section. Anyone any idea how to fix it? Thanks a lot for your help! My code: #siteWrapper section[data-section-id="621c9fa9c9e50e3f55a26b38"] { position: sticky; position: -webkit-sticky; top: 0; } #siteWrapper section[data-section-id="621ca0171f61485008230187"] { position: sticky; position: -webkit-sticky; top: 0; } #siteWrapper section[data-section-id="621c9fa9c9e50e3f55a26b38"] { position: sticky; position: -webkit-sticky; top: 0; } #siteWrapper section[data-section-id="621ca0171f61485008230187"] { position: sticky; position: -webkit-sticky; top: 0; } #siteWrapper section[data-section-id="621ca0dd94eb8b659e6d97e9"] { position: sticky; position: -webkit-sticky; top: 0; } #siteWrapper section[data-section-id="621ca1d5a5cbf94bb9fffd14"] { position: sticky; position: -webkit-sticky; top: 0; } #siteWrapper section[data-section-id="61eae59aeef95b3951e803e5"] { position: sticky; position: -webkit-sticky; top: 0; } example_overlapping_sections.mp4
  23. Site URL: https://michaelkelleher.co/ Is there a way to inject parallax scrolling with a background video? The code for background images does not work. Site link below. https://michaelkelleher.co/
  24. Site URL: https://www.NathanChwalik.com Hello! I'm trying to apply this code pen to allow for parallax movement based on mouse position: https://codepen.io/dmitrij-shorop/pen/PoOWOyN I tried code-injecting the javascript into the page header, but for some reason I can't get any movement. I've input the HTML code in a code block, the CSS in the Custom CSS, and I've tried viewing it on the live site. Still doesn't seem to work 😕 I'm really just trying to get three squares to be able to move, not the text portion... I'd be grateful for any advice! Thanks @tuanphan is this something that you know about with your insane coding skills ?
  25. In 7.1, it it possible to have a background video parallax or keep a fixed position? Thanks!
  • Create New...