Jump to content

Search the Community

Showing results for tags 'parallax'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • 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

Calendars

  • Events Calendar

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location


Badges


Expert ID

  1. Where has "image effects" gone for background images? The lack of parallax options in Squarespace 7.1 is baffling and now to lose "image effects" isn't helpful.
  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. Hello! πŸ‘‹ I am having an issue with parallax scrolling for background images. It seems that the issue arose about the same time that SS had headers and footers disappearing/changing colors. According to the SS status page, the header/footer issue had been fixed but apparently that fix caused the following code to stop working altogether. The problem is that, when I put the following code into the Settings > Advanced > Code Injection > Footer section, all of my background images completely disappear. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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({ imageSrc: imgUrl, naturalWidth: imgWidth, naturalHeight: imgHeight, speed: .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}main .has-background.background-width--inset{margin:4vw;padding:0!important}main .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}.sqs-catalog .section-background img{visibility:visible!important;}.has-background .section-background .sqs-video-background img{visibility:visible!important}</style> I have been using the code above flawlessly on multiple sites for some time without a hiccup until recently. I tried using SS built-in parallax engine for my background images but it isn't nearly as smooth as what the above code did for background images. My websites just aren't the same without it. I have also tried other similar bits of code that is supposed to do the same thing (actually, used to do the same thing before the SS header/footer issue) as the above code but those will not work either. I was wondering if anyone has had similar issues as I am having or maybe someone could look at the code above to see what might be causing the background images to completely disappear? Thanks in advance for your time! Website: https://cello-dachshund-wage.squarespace.com/config/ Password: WCB2022
  4. Hi, my background images are you showing up, and I think this is related to the custom css code I used to create a parallax effect. Can anyone help? Thanks!
  5. Hi, I spent my trial building my site on template Atlantic. I had a picture in the header using parallax and the image slightly moved while I scrolled...it worked perfectly. My trial expired so I purchase the site. Now, the header is just black even though when I edit the background, it shows my image is uploaded. If I delete the image, the header goes grey. No matter what I do, the image will not show, and, there are also no image options when the image is uploaded as the header, before I had all the parallax options and now none. This is my first SS. Any help would be greatly appreciated. My site was almost ready to go until I actually purchased it!?
  6. Hi! I'm working on my webpage and I found multiple helpful codes from the forums. I'm still struggling on finding the code for the parallax banner. Is there a CSS code for controlling height of an individual parallax banner for desktop view? When I create new subpages on index page they are always nicely cropping the size to match the content/text in it (see image ''ideal size of banner''. But whenever I add the picture the banner height is getting way too high compared to the content. (see the image '' too big banner'') I know I can change the color of the background for the whole web page but I would like to use the colored background image just on few places and keep the rest whitish looking. That's why I chose the option of uploading a colored image without any better ideas. I would need this code also for some other parallax banners, as they sometimes tend to make people scroll too much on the page. Thanks for the help πŸ™‚ Regards Sanni
  7. Site URL: https://www.camillaottesen.dk Hey. I'm using parallax headers in several pages, made with background-attachment: fixed. How can I twist the code, so it will also work i IOS? (i have removed the image-url in the following) [data-section-id="61e145e15bc8c537841f2161"]{ .section-background{ &::after { //creating the element content: ""; width:100%; height:100%; position: absolute; //adding the image background-image:url("IMAGE-URL(removed in this code-example"); background-repeat:no-repeat; opacity:70%; //positioning the image background-size:cover; background-position:center center; background-attachment: fixed; transform: scale(1); } } www.camillaottesen.dk code: Camilla
  8. hi:), I can't find anywhere how to add a parallax effect to each image block within a page, only in background images in header or footer, but I wish I could have this effect on all images on pages something like this : ttps://cuberto.com/projects/flipaclip/
  9. Hello! I was curious if it's possible to tag specific image blocks and have them all move at different speeds during scrolling? I don't want the background image to parallax, rather the top image blocks (and text blocks) to move separately. Thank you! K
  10. 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!☺️
  11. Just what the title says I'm about to throw my laptop out the window. It shouldn't be this hard to fix a problem that everyone has. - How do I turn off the parallax on the mobile version of my website. No, I do not know HTML or anything alike, hence why I am making a website on SquareSpace?!
  12. 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
  13. 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!
  14. 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.
  15. 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!
  16. 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 πŸ™‚
  17. Hi, Is there any CSS coding or code injections for parallax scrolling in 7.1? Thanks @tuanphanor anyone else?
  18. 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
  19. 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
  20. 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.
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
Γ—
Γ—
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.