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

Parallax perspective effect on a layered illustration using translatez()


nicoledelger

Question

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.

Link to comment
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

1 answer to this question

Recommended Posts

  • 0
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 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.

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...