nicoledelger Posted April 14, 2021 Share Posted April 14, 2021 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 translatezhttps://medium.com/@johnearle/all-in-perspective-2996ee463509https://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. Link to comment
Beyondspace Posted April 16, 2021 Share Posted April 16, 2021 On 4/14/2021 at 11:45 PM, nicoledelger said: 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 translatezhttps://medium.com/@johnearle/all-in-perspective-2996ee463509https://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. I think you should target the page section and it's children like so .page-section -> .parallax .page-section .section-background -> .parallax__layer--back .page-section .content-wrapper -> .parallax__layer--base If you want to target specific section, use this tool to get its id, eg: [section-id] and update the selector [section-id].page-section BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
bray Posted June 30, 2022 Share Posted June 30, 2022 On 4/16/2021 at 2:57 AM, bangank36 said: Hey there! Does this still work? Could I pay you to implement on my site? I think you should target the page section and it's children like so .page-section -> .parallax .page-section .section-background -> .parallax__layer--back .page-section .content-wrapper -> .parallax__layer--base If you want to target specific section, use this tool to get its id, eg: [section-id] and update the selector [section-id].page-section Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment