How to recreate this clever effect - images that swing to the side as you scroll down page

Hi all

Does anyone know how to recreate the effect on this website. About halfway down the flowers on each side of the book move to the side to reveal the book as you scroll.

https://hollyringland.com/

It's definitely a Squarespace site but I have no clue how the designer managed this effect.

Thoughts?

Thanks!

Michelle

They added 2 Code Blocks, with this code on each Code Block

<div class="reveal-image-left animate"></div>

and

<div class="reveal-image-right animate"></div>

then use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    var elements = document.querySelectorAll(".span-1,.reveal-image-left,.reveal-image-right");
    var observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.intersectionRatio > 0) {
                entry.target.classList.add("animate");
            } else {
                entry.target.classList.remove("animate");
            }
        });
    });
    elements.forEach((element) => {
        observer.observe(element);
    });
});
</script>

14 hours ago, tuanphan said:

They added 2 Code Blocks, with this code on each Code Block

<div class="reveal-image-left animate"></div>

and

<div class="reveal-image-right animate"></div>

then use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    var elements = document.querySelectorAll(".span-1,.reveal-image-left,.reveal-image-right");
    var observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.intersectionRatio > 0) {
                entry.target.classList.add("animate");
            } else {
                entry.target.classList.remove("animate");
            }
        });
    });
    elements.forEach((element) => {
        observer.observe(element);
    });
});
</script>

 

Thank you so much @tuanphan You're a wonder!
So if I wanted to do the same on the flower images on the second section of this website https://ashley-kalagian-blunt.squarespace.com/ (password AKB2023) 
where do I put the image file names? Sorry, not 100% sure.....

On 2/3/2023 at 2:25 PM, Michelle_Barra_ said:

Thank you so much @tuanphan You're a wonder!
So if I wanted to do the same on the flower images on the second section of this website https://ashley-kalagian-blunt.squarespace.com/ (password AKB2023) 
where do I put the image file names? Sorry, not 100% sure.....

Hi @tuanphan Just wondering if you would possibly help me customize the code you kindly provided for this website (see above)
Thank you!

Ah I forgot, they added image by using CSS background image code

@media only screen and (min-width: 768px) {
    section[data-section-id="6336933d79ad22a69786cf7b"] .reveal-image-left::before {
        content: '';
        position: absolute;
        background-image: url(https://static1.squarespace.com/static/62182d7ba729412c22eb226f/t/62ed5b16640390167b71de4b/1659722518664/seven-skins-illustrations-1.png);
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        width: 650%;
        height: 650%;
        left: -6vw;
        top: -25vh;
        background-attachment: scroll;
        transition: .7s;
        transform: translatex(-20vw) rotate(35deg);
        z-index: 2
    }

    section[data-section-id="6336933d79ad22a69786cf7b"] .animate.reveal-image-left::before {
        width: 650%;
        height: 650%;
        transform: translatex(-40vw) rotate(0deg)
    }

    section[data-section-id="6336933d79ad22a69786cf7b"] .reveal-image-right::before {
        content: '';
        position: absolute;
        background-image: url(https://static1.squarespace.com/static/62182d7ba729412c22eb226f/t/62ed5be1640390167b720335/1659722721751/seven-skins-illustrations-2.pnghttps://static1.squarespace.com/static/62182d7ba729412c22eb226f/t/62ed5be1640390167b720335/1659722721751/seven-skins-illustrations-2.png);
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        width: 680%;
        height: 680%;
        top: -35vh;
        transition: .7s;
        transform: translatex(-30vw) rotate(-80deg);
        z-index: 2
    }

    section[data-section-id="6336933d79ad22a69786cf7b"] .animate.reveal-image-right::before {
        width: 700%;
        height: 700%;
        transform: translatex(-17vw) rotate(-40deg)
    }
}

Use this free tool to find data section id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

15 hours ago, tuanphan said:

Ah I forgot, they added image by using CSS background image code

@media only screen and (min-width: 768px) {
    section[data-section-id="6336933d79ad22a69786cf7b"] .reveal-image-left::before {
        content: '';
        position: absolute;
        background-image: url(https://static1.squarespace.com/static/62182d7ba729412c22eb226f/t/62ed5b16640390167b71de4b/1659722518664/seven-skins-illustrations-1.png);
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        width: 650%;
        height: 650%;
        left: -6vw;
        top: -25vh;
        background-attachment: scroll;
        transition: .7s;
        transform: translatex(-20vw) rotate(35deg);
        z-index: 2
    }

    section[data-section-id="6336933d79ad22a69786cf7b"] .animate.reveal-image-left::before {
        width: 650%;
        height: 650%;
        transform: translatex(-40vw) rotate(0deg)
    }

    section[data-section-id="6336933d79ad22a69786cf7b"] .reveal-image-right::before {
        content: '';
        position: absolute;
        background-image: url(https://static1.squarespace.com/static/62182d7ba729412c22eb226f/t/62ed5be1640390167b720335/1659722721751/seven-skins-illustrations-2.pnghttps://static1.squarespace.com/static/62182d7ba729412c22eb226f/t/62ed5be1640390167b720335/1659722721751/seven-skins-illustrations-2.png);
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        width: 680%;
        height: 680%;
        top: -35vh;
        transition: .7s;
        transform: translatex(-30vw) rotate(-80deg);
        z-index: 2
    }

    section[data-section-id="6336933d79ad22a69786cf7b"] .animate.reveal-image-right::before {
        width: 700%;
        height: 700%;
        transform: translatex(-17vw) rotate(-40deg)
    }
}

Use this free tool to find data section id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Thank you so much @tuanphan 
I couldn't make it work, but that's very much user error on me! 
If you're curious which page I tried it on - https://www.ashleykalagianblunt.com/test
 

On 2/16/2023 at 8:16 AM, Michelle_Barra_ said:

Thank you so much @tuanphan 
I couldn't make it work, but that's very much user error on me! 
If you're curious which page I tried it on - https://www.ashleykalagianblunt.com/test
 

The url doesn't exist now

14 hours ago, tuanphan said:

The url doesn't exist now

Oops sorry, accidentally deleted it. It's back now - https://www.ashleykalagianblunt.com/test

On 2/3/2023 at 10:25 AM, Michelle_Barra_ said:

Thank you so much @tuanphan You're a wonder!
So if I wanted to do the same on the flower images on the second section of this website https://ashley-kalagian-blunt.squarespace.com/ (password AKB2023) 
where do I put the image file names? Sorry, not 100% sure.....

I see you haven't added Code Block yet.