Jquery scroll unlock phone animation

TheOldCounty
September 19, 2024
206 views
1 vote
2 Answers

Trying to create this onscroll unlock screen animation – how do you keep the phone static/sticky – and give enough time to unlock the screen – before letting the phone move on scroll.

Also need to create a parallax effect with the text by the side of it so I’ve created a transformX function – which should split the text into negative/positive changes in the x.

https://jsfiddle.net/turo2vyw/11/

  $(document).ready(function() {

console.log("ready")
var myElement = $(".iphone-lock-screen-image");

var myElement1 = $(".hero-text-holder-1");

var myElement2 = $(".hero-text-holder-2");    


function setTransform(yPos, el) {
  el.style.transform = `transform: translate3d(0px, ${yPos}%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;`;
}



function setTransformX(xPos, el) {
  el.style.transform = `transform: translate3d(${xPos}px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;`;
}



$(document).scroll(function(e){
  
  console.log("e", e)
  
  let h = $("body").offset().top;
  console.log("h", h)
  
  setTransform(h*2, myElement[0])
  
  
  setTransformX(h*4, myElement1[0])
  setTransformX(-h*4, myElement2[0])
  
});



  });

.section-hero {
    position: relative;
    padding-top: 3em;
}


.small-container {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}


.small-container {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}


.hero-product-demo {
    position: relative;
    display: block;
    width: 100%;
    height: 160vh;
}

.product-demo-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 110px;
    z-index: 1;
    min-height: auto;
    padding-top: 0px;
}



.product-container {
    position: relative;
    top: -30px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    width: 100%;
    padding-top: 1em;
    padding-bottom: 1em;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}


.product-phone-image-holder {
    position: relative;
    width: 400px;
}

img {
    display: inline-block;
    max-width: 100%;
}

.product-phone-image {
    width: 100%;
}


.play-icon-holder {
    position: absolute;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
    border-radius: 100%;
    -webkit-transition: box-shadow 200ms ease;
    transition: box-shadow 200ms ease;
    cursor: pointer;
}


.play-icon-image {
    position: relative;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(250, 88, 83, 0.41);
    border-radius: 100%;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
}



.product-phone-content {
    position: absolute;
    left: 36px;
    top: 36px;
    right: 37px;
    bottom: 35px;
    z-index: -1;
    overflow: hidden;
}


.product-phone-demo-image {
    position: absolute;
    left: 0%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    display: inline-block;
    width: 100%;
    height: 100%;
    opacity: 1;
    -o-object-fit: cover;
    object-fit: cover;
}


.iphone-lock-screen-image {
    position: absolute;
    left: 0%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 36px;
    opacity: 1;
    -o-object-fit: cover;
    object-fit: cover;
}


.hero-text-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 75px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: visible;
    width: 99vw;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}



.hero-text-holder {
    position: absolute;
    top: 200px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    width: 99vw;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.hero-text-holder-1 {
    overflow: hidden;
    width: 50vw;
    text-align: right;
}



.hero-text-line {
    position: relative;
    overflow: hidden;
    width: 3px;
    height: 160px;
    margin-top: 60px;
    border-radius: 20px;
    background-image: -webkit-gradient(linear, left top, right top, from(#fa5853), color-stop(50%, #f46692), to(#ffc444));
    background-image: linear-gradient(90deg, #fa5853, #f46692 50%, #ffc444);
}



h1 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: Manrope, sans-serif;
    color: #323232;
    font-size: 75px;
    line-height: 1.2;
    font-weight: 800;
}

.hero-text {
    overflow: hidden;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 210px;
    line-height: 1.2;
    font-weight: 800;
}

.hero-text._1 {
    padding-right: 1rem;
    background-image: -webkit-gradient(linear, left top, right top, from(#fa5853), to(#f46692));
    background-image: linear-gradient(90deg, #fa5853, #f46692);
    text-align: right;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}



.hero-text-holder-2 {
    overflow: hidden;
    text-align: left;
}

.hero-text._2 {
    width: 48vw;
    padding-left: 1rem;
    background-image: -webkit-gradient(linear, left top, right top, from(#f46692), to(#ffc444));
    background-image: linear-gradient(90deg, #f46692, #ffc444);
    text-align: left;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="section-hero">
  <div class="small-container">
    <div style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;" class="hero-text-sticky">
      <div class="hero-text-holder">
        <div class="hero-text-holder-1" style="will-change: transform; transform: translate3d(-108.9px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">
          <h1 style="transform: translate3d(0%, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;" class="hero-text _1">Test1</h1>
        </div>
        <div class="hero-text-line" style="will-change: opacity; opacity: 0.274;"></div>
        <div class="hero-text-holder-2" style="will-change: transform; transform: translate3d(108.9px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">
          <h1 style="transform: translate3d(0%, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;" class="hero-text _2">Test2</h1>
        </div>
      </div>
    </div>
    <div data-w-id="08a4f49f-daee-82d9-5871-e852a62377d9" style="opacity: 1;" class="hero-product-demo">
      <div class="product-demo-sticky">
        <div class="product-phone-image-container">
          <div class="product-container">
            <div class="product-phone-image-holder"><img src="https://assets.website-files.com/604b35876a71cbbd84768e36/604ce94df02e1e447d32686d_Apple%20iPhone%2011%20Pro%20Space%20Grey%201.png" loading="lazy" sizes="(max-width: 479px) 300px, 400px" srcset="https://assets.website-files.com/604b35876a71cbbd84768e36/604ce94df02e1e447d32686d_Apple%20iPhone%2011%20Pro%20Space%20Grey%201-p-500.png 500w, https://assets.website-files.com/604b35876a71cbbd84768e36/604ce94df02e1e447d32686d_Apple%20iPhone%2011%20Pro%20Space%20Grey%201.png 588w" alt="" class="product-phone-image">
              <div class="product-phone-content"><img src="https://assets.website-files.com/604b35876a71cbbd84768e36/604d4b5ee9f5d3561967d646_ChatList-White.jpg" loading="lazy" sizes="(max-width: 479px) 246px, 327px" srcset="https://assets.website-files.com/604b35876a71cbbd84768e36/604d4b5ee9f5d3561967d646_ChatList-White-p-500.jpeg 500w, https://assets.website-files.com/604b35876a71cbbd84768e36/604d4b5ee9f5d3561967d646_ChatList-White.jpg 750w" alt="" class="product-phone-demo-image"><img src="https://assets.website-files.com/604b35876a71cbbd84768e36/604d43119ce091cb1037818c_LockScreen-Light.jpg" loading="lazy" sizes="(max-width: 479px) 246px, 327px" srcset="https://assets.website-files.com/604b35876a71cbbd84768e36/604d43119ce091cb1037818c_LockScreen-Light-p-800.jpeg 800w, https://assets.website-files.com/604b35876a71cbbd84768e36/604d43119ce091cb1037818c_LockScreen-Light.jpg 839w" alt="" class="iphone-lock-screen-image" style="will-change: transform; transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;"></div>
            </div><a href="#" class="play-icon-holder w-inline-block w-lightbox" aria-label="open lightbox" aria-haspopup="dialog" style="will-change: opacity; opacity: 0;"><img src="https://assets.website-files.com/604b35876a71cbbd84768e36/604e0b990851a7f3bb6efd47_play-button.svg" loading="lazy" alt="" class="play-icon-image">
              <script type="application/json" class="w-json">
                {
                  "items": [{
                    "url": "https://www.youtube.com/watch?v=sWRUzxINCoA",
                    "originalUrl": "https://www.youtube.com/watch?v=sWRUzxINCoA",
                    "width": 940,
                    "height": 528,
                    "thumbnailUrl": "http://i.ytimg.com/vi/sWRUzxINCoA/hqdefault.jpg",
                    "html": "<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FsWRUzxINCoA&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DsWRUzxINCoA&image=http%3A%2F%2Fi.ytimg.com%2Fvi%2FsWRUzxINCoA%2Fhqdefault.jpg&key=96f1f04c5f4143bcb0f2e68c87d65feb&type=text%2Fhtml&schema=youtube" width="940" height="528" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe>",
                    "type": "video"
                  }],
                  "group": ""
                }

              </script>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Tags: javascript jquery

Answers

Chosen as BEST ANSWER

19th sep -- this is the latest version I have --

https://codesandbox.io/p/sandbox/wczl42

but I am not sure its built well - could use refs - and better functions to create these effects.

"use client";
import React from "react";
//import "./style.css";

// Hero Section
const Hero = () => {
  React.useEffect(() => {
    var ellipseLeft = document.querySelector(".ellipse-left");
    var ellipseRight = document.querySelector(".ellipse-right");
    var rotateZ = 23;

    setInterval(() => {
      rotateZ++;

      ellipseRight.style.transform =
        "translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(" +
        rotateZ +
        "deg) skew(0deg, 0deg)";
      ellipseRight.style["transform-style"] = "preserve-3d";
      ellipseRight.style["will-change"] = "transform";

      ellipseLeft.style.transform =
        "translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(" +
        rotateZ +
        "deg) skew(0deg, 0deg)";
      ellipseLeft.style["transform-style"] = "preserve-3d";
      ellipseLeft.style["will-change"] = "transform";
    }, 50);
  }, []);

  React.useEffect(() => {
    setTimeout(() => {
      //text-comes from-top-to-bottom...
      document
        .getElementById("hero-text-sticky")
        ?.classList.replace("hero-text-top", "hero-text-top-to-bottom");
      //others..
      setTimeout(() => {
        document.getElementById("ellipses-holder")?.classList.remove("hidden");
        document.getElementById("main-Images")?.classList.remove("hidden");
        document
          .getElementById("conatiner-heading-texts")
          ?.classList.remove("hidden");
      }, 400);
    }, 400);
  }, []);

  //move mobile image by scrolling.............
  React.useEffect(() => {
    const scrollableDiv = document.getElementById("main-Section");
    let topPosition = 0;
    let element = scrollableDiv;

    // Accumulate the offsetTop up the chain
    while (element) {
      topPosition += element.offsetTop;
      element = element.offsetParent;
    }

    window.addEventListener("scroll", function () {
      let offset = window.pageYOffset;
      let position1 = 0;
      let position2 = 0;
      if (offset >= topPosition + 300 && offset < topPosition + 730) {
        position1 = offset - (topPosition + 300);
        document.getElementById(
          "scrolling-comes-left"
        ).style.transform = `translateX(-${position1 / 2.5}px)`;
        document.getElementById(
          "scrolling-comes-right"
        ).style.transform = `translateX(${position1 / 2.5}px)`;
        document.getElementById(
          "product-phone-content-1"
        ).style.transform = `translateY(-${position1 * 3.5}px)`;
      }
      setTimeout(() => {
        if (offset >= topPosition + 1000 && offset < topPosition + 1450) {
          position2 = offset - (topPosition + 1000);
          // position2 = position2.toFixed(1);
          document.getElementById(
            "scrolling-comes-left"
          ).style.transform = `translateX(${position2 / 30}px)`;
          document.getElementById(
            "scrolling-comes-right"
          ).style.transform = `translateX(-${position2 / 30}px)`;
        }
      }, 500);
    });
  }, []);

  //transition ease-in-out delay-150
  return (
    <section className="section-hero" id="main-Section">
      <div
        className="ellipses-holder hidden transition ease-in-out delay-750"
        id="ellipses-holder"
      >
        <div className="ellipse-right"></div>
        <div className="ellipse-left"></div>
      </div>

      <div
        className="hidden transition ease-in-out delay-350"
        id="conatiner-heading-texts"
      >
        <div className="main-hero-container ">
          <div className="small-container">
            <div className="text-center ">
              <div className="app-icon-holder">
                <img
                  src="https://assets.website-files.com/604b35876a71cbbd84768e36/604bec86217013e5a00ae099_App-Icon.svg"
                  loading="lazy"
                  alt=""
                  className="app-icon"
                />
              </div>
              <h1 className="main-heading  hero-header-main-title">
                Manage it all, in this all new system.
              </h1>

              <div className="w-layout-grid grid-10-columns">
                <p
                  id="w-node-_72db7d5e-67ba-1361-b1aa-1a07ac8f1178-ac768e33"
                  className="hero-description"
                >
                  Bold keeps your team’s work on-brand, on message, and on time.
                  Innovative features make creating and sharing your work feel
                  effortless.
                </p>
              </div>
              <div className="download-buttons hero-download-buttons">
                <div className="download-button">
                  <a
                    href="https://apple.com"
                    target="_blank"
                    className="button download w-inline-block"
                  >
                    <img
                      src="https://assets.website-files.com/604b35876a71cbbd84768e36/604cf52ff6f5c04c33cca6ad_Apple-Icon.svg"
                      loading="lazy"
                      alt=""
                      className="download-button-icon"
                    />
                    <div>Download for iOS</div>
                  </a>
                </div>

                <div className="download-button last">
                  <a
                    href="https://play.google.com/store/apps"
                    target="_blank"
                    className="button download w-inline-block"
                  >
                    <img
                      src="https://assets.website-files.com/604b35876a71cbbd84768e36/604cf52f84f8f84bb92cde4e_Android-Icon.svg"
                      loading="lazy"
                      alt=""
                      className="download-button-icon"
                    />
                    <div> Download for Android</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="small-container ">
        <div className="hero-text-sticky hero-text-top " id="hero-text-sticky">
          <div className="hero-text-holder">
            <div
              className="hero-text-holder-1  overflow-hidden"
              id="scrolling-comes-left"
            >
              <h1 className="hero-text _1 text-comes-from-left" id="">
                Meet
              </h1>
            </div>
            <div className="hero-text-line"></div>
            <div
              className="hero-text-holder-2 overflow-hidden"
              id="scrolling-comes-right"
            >
              <h1
                className="hero-text _2 text-comes-from-right"
                id="Bold-Header-Text2"
              >
                Bold
              </h1>
            </div>
          </div>
        </div>
        <div
          className="hidden transition ease-in-out delay-350"
          id="main-Images"
        >
          <div
            data-w-id="08a4f49f-daee-82d9-5871-e852a62377d9"
            className="hero-product-demo"
          >
            <div className="product-demo-sticky">
              <div className="product-phone-image-container">
                <div className="product-container">
                  <div className="product-phone-image-holder overflow-hidden relative ">
                    <div className="absolute top-[-2px] left-0 right-0 w-[83%] m-auto h-[20px] bg-white z-[2]">
                      <div className="w-full h-full relative">
                        <div className="absolute bg-white top-[-1px] right-0 rotate-[10deg] z-[3] w-[35px] h-[25px]"></div>
                        <div className="absolute bg-white top-[-1px] left-0 rotate-[-10deg] z-[3] w-[35px] h-[25px]"></div>
                        <div className="absolute bg-white top-1 right-[-15px] rotate-[35deg] z-[2] w-[35px] h-[25px]"></div>
                        <div className="absolute bg-white top-1 left-[-15px] rotate-[-35deg] z-[2] w-[35px] h-[25px]"></div>
                      </div>
                    </div>
                    <img
                      src="https://assets.website-files.com/604b35876a71cbbd84768e36/604ce94df02e1e447d32686d_Apple%20iPhone%2011%20Pro%20Space%20Grey%201.png"
                      loading="lazy"
                      sizes="(max-width: 479px) 300px, 400px"
                      srcSet="https://assets.website-files.com/604b35876a71cbbd84768e36/604ce94df02e1e447d32686d_Apple%20iPhone%2011%20Pro%20Space%20Grey%201-p-500.png 500w, https://assets.website-files.com/604b35876a71cbbd84768e36/604ce94df02e1e447d32686d_Apple%20iPhone%2011%20Pro%20Space%20Grey%201.png 588w"
                      alt=""
                      className="product-phone-image"
                    />
                    <div
                      className="product-phone-content"
                      id="product-phone-content-1"
                    >
                      <img
                        src="https://assets.website-files.com/604b35876a71cbbd84768e36/604d43119ce091cb1037818c_LockScreen-Light.jpg"
                        loading="lazy"
                        sizes="(max-width: 479px) 246px, 327px"
                        alt=""
                        className="iphone-lock-screen-image"
                      />
                    </div>
                    <div className="product-phone-content-2">
                      <img
                        src="https://assets.website-files.com/604b35876a71cbbd84768e36/604d4b5ee9f5d3561967d646_ChatList-White-p-500.jpeg"
                        loading="lazy"
                        sizes="(max-width: 479px) 246px, 327px"
                        alt=""
                        className="product-phone-demo-image"
                      />
                    </div>
                  </div>
                  <a
                    href="#"
                    id="playIcon-for-bold"
                    className="play-icon-holder w-inline-block w-lightbox"
                    aria-label="open lightbox"
                    aria-haspopup="dialog"
                  >
                    <img
                      src="https://assets.website-files.com/604b35876a71cbbd84768e36/604e0b990851a7f3bb6efd47_play-button.svg"
                      loading="lazy"
                      alt=""
                      className="play-icon-image"
                    />
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Hero;

(Edit)

it is parallax animation you can achieve it by using javascript and css i can help you about your project but i can’t help you make it all for so you can learn also how to do it.

question
Trying to create this onscroll unlock screen animation – how do you keep the phone static/sticky – and give enough time to unlock the screen – before letting the phone move on scroll.

Explanation:

HTML: Creates a phone with a screen and content that will allow scrolling.
CSS: Uses position: sticky to keep the phone in place while scrolling and transition for smooth animation.
JavaScript: Updates the phone’s position based on the scroll position and changes the text to show an unlock animation.

window.addEventListener('scroll', function() {
  const phone = document.querySelector('.phone');
  const unlockScreen = document.querySelector('.screen');
  const scrollPosition = window.scrollY;
  const threshold = 300; // Adjust this value based on where you want the effect to start

  if (scrollPosition > threshold) {
    phone.style.transform = `translateY(${scrollPosition - threshold}px)`;
    unlockScreen.innerHTML = 'Unlocking...';
  } else {
    phone.style.transform = 'translateY(0)';
    unlockScreen.innerHTML = 'Unlock Screen';
  }
});

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.container {
  position: relative;
  overflow: hidden;
  height: 200vh; /* To enable scrolling */
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone {
  position: sticky;
  top: 0;
  z-index: 10;
  transition: transform 1s ease-in-out;
}

.screen {
  width: 300px;
  height: 600px;
  background: #000;
  color: #fff;
  text-align: center;
  line-height: 600px;
  font-size: 24px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.content {
  height: 200vh; /* Extend content for scrolling */
}

<div class="container">
  <div class="phone">
    <div class="screen">Unlock Screen</div>
  </div>
  <div class="content">
    <!-- Your content here -->
  </div>
</div>

question 2?
Also need to create a parallax effect with the text by the side of it so I’ve created a transformX function – which should split the text into negative/positive changes in the x.

Explanation:

HTML:

Added .text and .text-content to include the text that will have the parallax effect.
CSS:

.text is positioned absolutely to ensure it’s centered and can move with the parallax effect.
JavaScript:

The transformX function calculates the horizontal translation based on scroll position.
parallaxEffect applies a multiplier to the scroll position to control the intensity of the parallax effect.

window.addEventListener('scroll', function() {
  const phone = document.querySelector('.phone');
  const unlockScreen = document.querySelector('.screen');
  const textContent = document.querySelector('.text-content');
  const scrollPosition = window.scrollY;
  const threshold = 300; // Adjust this value based on where you want the effect to start

  // Update phone position
  if (scrollPosition > threshold) {
    phone.style.transform = `translateY(${scrollPosition - threshold}px)`;
    unlockScreen.innerHTML = 'Unlocking...';
  } else {
    phone.style.transform = 'translateY(0)';
    unlockScreen.innerHTML = 'Unlock Screen';
  }

  // Parallax effect for text
  function transformX(value) {
    return `translateX(${value}px)`;
  }

  const parallaxEffect = scrollPosition * 0.5; // Adjust the multiplier for the effect intensity
  textContent.style.transform = transformX(parallaxEffect);
});

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.container {
  position: relative;
  overflow: hidden;
  height: 200vh; /* To enable scrolling */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.phone {
  position: sticky;
  top: 0;
  z-index: 10;
  transition: transform 1s ease-in-out;
}

.screen {
  width: 300px;
  height: 600px;
  background: #000;
  color: #fff;
  text-align: center;
  line-height: 600px;
  font-size: 24px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.text-content {
  font-size: 24px;
  color: #333;
}

.content {
  height: 200vh; /* Extend content for scrolling */
}

<div class="container">
  <div class="phone">
    <div class="screen">Unlock Screen</div>
  </div>
  <div class="text">
    <div class="text-content">Your Parallax Text Here</div>
  </div>
  <div class="content">
    <!-- Your additional content here -->
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.