视差元素 - 仅在 x 方向使用 javascript

Question

我正在尝试重新创建此视差功能，其中 x 位置根据鼠标移动在两层之间变化。

我不确定哪个元素，如果它是鼠标应该跟踪的部分，以及使用什么公式来修改元素的位置以及给它一个缓动效果，这样当鼠标停止时它不会突然停止。

将鼠标移动到 .hero-section

$(".hero-section ").mousemove(function(event) {
  console.log("mousemoveY---", event.clientX, event.clientY);
})

$( document ).ready(function() {


var myElement2= $(".hero-section-text-holder");
var myElement = $(".hero-text-blur");

function setTranslate(xPos, yPos, zPos, el) {
  console.log("test");
  el.style.transform = `translate3d(${xPos}, 0, 0) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg)`;
}


myElement.mousemove(function(event) {
  console.log("mousemoveY---", event.clientX, event.clientY);

  let x = event.clientX;

  var position = {
    left: myElement[0].offsetLeft
  };

  console.log("x", x);

  console.log("position", position);

  let degx = position.left - x;

  console.log("degx", degx);

  setTranslate(-(degx / 20)+"px" , 0, 0, myElement[0]);
  
  
 setTranslate((degx / 10)+"px", 0, 0, myElement2[0]);
});


myElement.mouseleave(function() {
  console.log("mouseleave");
  setTranslate(0, 0, 0, myElement[0]);
  setTranslate(0, 0, 0, myElement2[0]);
});

});

body {
    color: #fff;
    background-color: #000;
    font-family: Manrope, sans-serif;
    font-size: 14px;
    line-height: 1.2;
}


.container {
  padding: 40px;
}

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



.hero-section {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.hero-section-text-holder {
    width: 100%;
    height: 130vh;
    flex-direction: column;
    align-items: center;
    display: flex;
}


.hero-section-sticky {
    width: 100%;
    position: -webkit-sticky;
    position: sticky;
    top: 50%;
}


.hero-sticky-holder {
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
}


.hero-text-holder {
    grid-column-gap: 60px;
    perspective: 1000px;
    white-space: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
}

.hero-text-wrapper {
    justify-content: center;
    align-items: center;
    display: flex;
}


.hero-text {
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #eec5bd, #f3b1a5 35%, #c6caf6 72%, #dad9e9);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 14vw;
    font-weight: 800;
}

.hero-text-blur {
    opacity: .64;
    filter: blur(120px);
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #eec5bd, #f3b1a5 35%, #c6caf6 72%, #dad9e9);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 14vw;
    font-weight: 800;
    position: absolute;
}


.hero-text._02 {
    background-image: linear-gradient(to right, #eec5bd, #f3b1a5 6%, #c6caf6 61%, #dad9e9 72%);
}


.iphone-holder {
    z-index: 1;
    height: 600px;
    border-radius: 60px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
    top: 6%;
}

.iphone-holder{
      transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    opacity: 1;  
}





.iphone-screen {
    z-index: 1;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 4.1% 4.6%;
    display: flex;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

.iphone-screen-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
    border-radius: 25px;
}

.iphone-image {
    z-index: 2;
    height: 100%;
    position: relative;
}

.iphone-drop-shadow {
    width: 120%;
    height: 70%;
    filter: blur(64px);
    background-color: #000;
    position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="container">

  <div class="hero-section">
    <div class="hero-section-text-holder" style="will-change: transform; transform: translate3d(-6.72px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">
      <div class="hero-section-sticky">
        <div class="hero-sticky-holder">
          <div class="hero-text-holder" style="will-change: transform; transform: translate3d(13.44px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">
            <div class="hero-text-wrapper _01" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; opacity: 1;">
              <div class="hero-text">Test1</div>
              <div class="hero-text-blur" style="opacity: 0.6; filter: blur(120px); will-change: transform; transform: translate3d(-33.6px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">Test1</div>
            </div>
            <div class="hero-text-wrapper _02" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; opacity: 1;">
              <div class="hero-text _02">Test2</div>
              <div class="hero-text-blur" style="opacity: 0.6; filter: blur(120px); will-change: transform; transform: translate3d(-33.6px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">Test2</div>
            </div>
          </div>
        </div>
      </div>
      <div class="iphone-holder" style="transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; opacity: 1;"><img src="https://cdn.prod.website-files.com/63aee5793ca698452efe7f60/63aefb47917c0cfa0943fc97_iPhone%2014%20Pro%20%E2%80%93%20Space%20Black.webp" loading="lazy" sizes="(max-width: 767px) 196.6796875px, 295.015625px" srcset="https://assets.website-files.com/63aee5793ca698452efe7f60/63aefb47917c0cfa0943fc97_iPhone%2014%20Pro%20%E2%80%93%20Space%20Black-p-500.webp 500w, https://assets.website-files.com/63aee5793ca698452efe7f60/63aefb47917c0cfa0943fc97_iPhone%2014%20Pro%20%E2%80%93%20Space%20Black.webp 800w" alt="" class="iphone-image">
        <div class="iphone-screen"><img src="https://cdn.prod.website-files.com/63aee5793ca698452efe7f60/63aefd2632bfdbf4073fa431_Hero%20Iphone%20Image.webp" loading="lazy" alt="" sizes="(max-width: 479px) 80vw, 267.875px" srcset="https://cdn.prod.website-files.com/63aee5793ca698452efe7f60/63aefd2632bfdbf4073fa431_Hero%20Iphone%20Image-p-500.webp 500w, https://cdn.prod.website-files.com/63aee5793ca698452efe7f60/63aefd2632bfdbf4073fa431_Hero%20Iphone%20Image.webp 729w" class="iphone-screen-image"></div>
        <div class="iphone-drop-shadow" style="opacity: 1;"></div>
      </div>
    </div>
  </div>


</div>

Answer 1

这是我的最新版本 - 9 月 19 日 - 但它的加载方式有一个错误 - 我认为如果你过多地偏离一侧，它会错过元素并且视差出现故障。

https://codesandbox.io/p/sandbox/focused-goldwasser-j3t9n8

"use client";

import React, { useRef, useEffect } from "react";
import Link from "next/link";
import { Play } from "lucide-react";
import { isMobile } from "react-device-detect";

// Hero Section
const Hero = () => {
  const containerRef = useRef(null);
  const textRef = useRef(null);
  const imagemove = useRef(null);

  //make effects in mobile image & texts ...
  React.useEffect(() => {
    document
      .getElementById("makeEffectInto-left-Text")
      ?.classList.add("makeEffectIntoText");
    document
      .getElementById("makeEffectInto-right-Text")
      ?.classList.add("makeEffectIntoText-2");

    setTimeout(() => {
      let textfontSize = document.getElementById("meedtextone");
      let textfontSize2 = document.getElementById("meedtextone2");
      textfontSize.style.fontSize = "14vw";
      textfontSize2.style.fontSize = "14vw";
      document
        .getElementById("imageId-forRemove-hiddhen")
        ?.classList.remove("hidden");
      document
        .getElementById("imageId-forRemove-hiddhen2")
        ?.classList.remove("hidden");
      document
        .getElementById("hiddenImageComesFromDown")
        ?.classList.add("imageId-forRemove-hiddhenmain");
    }, 1200);
  }, []);

  //for effecting in mobile & background-text in mouse move
  useEffect(() => {
    const container = containerRef.current;
    const text = textRef.current;
    const imageMove = imagemove.current;

    setTimeout(() => {
      function getMouseDirection(e, element) {
        const rect = element.getBoundingClientRect();
        const x = e.clientX - rect.left; // Mouse X relative to the element
        const middleX = rect.width / 3;
        return x - middleX;
      }

      function handleMouseMove(e) {
        const deltaX = getMouseDirection(e, container);
        // Move text left or right based on mouse movement
        // alert(deltaX / 13)
        console.log(deltaX);

        if (text) {
          container.style.transition = "all 0.9s ease-in";
          text.style.position = "absolute";
          text.style.top = "70.5%";
          text.style.left = "50%";
          imageMove.style.position = "absolute";
          imageMove.style.top = "71%";
          imageMove.style.left = "50%";
          text.style.transform = `translate(-50%, -50%) translateX(${-(
            deltaX / 40
          )}px)`; // Adjust movement strength as needed
          imageMove.style.transform = `translate(-50%, -50%) translateX(${
            deltaX / 40
          }px)`;
        }
      }

      function handleMouseLeave() {
        // Reset text position on mouse leave
        if (text) {
          text.style.transform = `translate(-50%, -50%)`;
          imageMove.style.transform = `translate(-50%, -50%)`;
          container.style.transition = "all 0.9s ease-out";
        }
      }

      container.addEventListener("mousemove", handleMouseMove);
      container.addEventListener("mouseleave", handleMouseLeave);

      return () => {
        container.removeEventListener("mousemove", handleMouseMove);
        container.removeEventListener("mouseleave", handleMouseLeave);
      };
    }, 3300);
  }, []);

  return (
    <section
      data-w-id="bbb1681c-62a0-7375-a529-1c7bec5a4a0e"
      className="section  pt-[30px]"
      ref={containerRef}
      style={{ transition: "all 0.8 ease-in-out" }}
    >
      <div className="container no-paddings " id="container">
        <div className="hero-section">
          <div className="hero-section-text-holder transition-all ease-in-out duration-500">
            <div className="hero-section-sticky">
              <div className="hero-sticky-holder" id="transformatedText">
                <div className="hero-text-holder" ref={textRef}>
                  <div
                    className="hero-text-wrapper _01"
                    id="makeEffectInto-left-Text"
                  >
                    <div
                      className="hero-text transition-all ease-in-out duration-500"
                      id="meedtextone"
                    >
                      Meet
                    </div>
                    <div className="hero-text-blur">Meet</div>
                  </div>
                  <div
                    className="hero-text-wrapper _02"
                    id="makeEffectInto-right-Text"
                  >
                    <div
                      className="hero-text _02  transition-all ease-in-out duration-500"
                      id="meedtextone2"
                    >
                      Black
                    </div>
                    <div className="hero-text-blur ">Black</div>
                  </div>
                </div>
              </div>
            </div>

            <div
              className="iphone-holder"
              id="hiddenImageComesFromDown"
              ref={imagemove}
            >
              <img
                src="https://assets.website-files.com/63aee5793ca698452efe7f60/63aefb47917c0cfa0943fc97_iPhone%2014%20Pro%20%E2%80%93%20Space%20Black.webp"
                loading="lazy"
                sizes="(max-width: 767px) 196.6796875px, 295.015625px"
                srcSet="https://assets.website-files.com/63aee5793ca698452efe7f60/63aefb47917c0cfa0943fc97_iPhone%2014%20Pro%20%E2%80%93%20Space%20Black-p-500.webp 500w, https://assets.website-files.com/63aee5793ca698452efe7f60/63aefb47917c0cfa0943fc97_iPhone%2014%20Pro%20%E2%80%93%20Space%20Black.webp 800w"
                alt=""
                id="imageId-forRemove-hiddhen"
                className="iphone-image hidden"
              />
              <div className="iphone-screen">
                <img
                  src="https://assets.website-files.com/63aee5793ca698452efe7f60/63aefd2632bfdbf4073fa431_Hero%20Iphone%20Image.webp"
                  loading="lazy"
                  alt=""
                  sizes="(max-width: 479px) 80vw, 267.875px"
                  srcSet="https://assets.website-files.com/63aee5793ca698452efe7f60/63aefd2632bfdbf4073fa431_Hero%20Iphone%20Image-p-500.webp 500w, https://assets.website-files.com/63aee5793ca698452efe7f60/63aefd2632bfdbf4073fa431_Hero%20Iphone%20Image.webp 729w"
                  className="iphone-screen-image hidden"
                  id="imageId-forRemove-hiddhen2"
                />
              </div>
              <div className="iphone-drop-shadow"></div>
            </div>
          </div>

          <div className="hero-section-paragraph-holder">
            <div className="hero-paragraph-holder" id="onScrollPosition">
              <p>
                Effortlessly track and manage your time with Black. Customizable
                reports, invoicing, and integrations make it the perfect tool
                for freelancers and professionals.
              </p>
            </div>
            <div className="from-wra-er">
              <div className="form-block w-form">
                <form
                  id="email-form"
                  name="email-form"
                  data-name="Email Form"
                  method="get"
                  data-wf-page-id="63aee5793ca698e95ffe7f77"
                  data-wf-element-id="5ea415ca-a921-34a0-1f6c-2725653f3203"
                  aria-label="Email Form"
                >
                  <div className="from-holder">
                    <input
                      className="text-field-form w-input"
                      maxLength="256"
                      name="email-2"
                      data-name="Email 2"
                      placeholder="Enter Your Email"
                      type="email"
                      id="email-2"
                      required=""
                    />
                    <input
                      type="submit"
                      data-wait="Please wait..."
                      className="button from w-button"
                      value="Start Free Trial"
                    />
                  </div>
                </form>
                <div
                  className="success-message w-form-done"
                  tabIndex="-1"
                  role="region"
                  aria-label="Email Form success"
                >
                  <div>Thank you! Your submission has been received!</div>
                </div>
                <div
                  className="error-message w-form-fail"
                  tabIndex="-1"
                  role="region"
                  aria-label="Email Form failure"
                >
                  <div>
                    Oops! Something went wrong while submitting the form.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="logo-grid-holder" id="imageTransform">
          <div className="w-layout-grid logo-grid">
            <div
              id="w-node-f078fdf9-afcd-dd23-e056-d7d58c77dcd8-5ffe7f77"
              className="logo-small-container"
            >
              <img
                src="https://assets.website-files.com/63aee5793ca698452efe7f60/63af02dceb85a1104ee0c8f5_Logo01.svg"
                loading="lazy"
                alt=""
                className="logo-small"
              />
            </div>
            <div
              id="w-node-f078fdf9-afcd-dd23-e056-d7d58c77dcda-5ffe7f77"
              className="logo-small-container"
            >
              <img
                src="https://assets.website-files.com/63aee5793ca698452efe7f60/63af02dc67bbed2fe0724574_Logo02.svg"
                loading="lazy"
                alt=""
                className="logo-small"
              />
            </div>
            <div
              id="w-node-f078fdf9-afcd-dd23-e056-d7d58c77dcdc-5ffe7f77"
              className="logo-small-container"
            >
              <img
                src="https://assets.website-files.com/63aee5793ca698452efe7f60/63af02dccee58c6ac31a1ff8_Logo03.svg"
                loading="lazy"
                alt=""
                className="logo-small"
              />
            </div>
            <div
              id="w-node-f078fdf9-afcd-dd23-e056-d7d58c77dcde-5ffe7f77"
              className="logo-small-container"
            >
              <img
                src="https://assets.website-files.com/63aee5793ca698452efe7f60/63af02dc892ff685649d683b_Logo04.svg"
                loading="lazy"
                alt=""
                className="logo-small"
              />
            </div>
            <div
              id="w-node-f078fdf9-afcd-dd23-e056-d7d58c77dce0-5ffe7f77"
              className="logo-small-container"
            >
              <img
                src="https://assets.website-files.com/63aee5793ca698452efe7f60/63af02dc3ca6982d5900e42a_Logo05.svg"
                loading="lazy"
                alt=""
                className="logo-small"
              />
            </div>
            <div
              id="w-node-f078fdf9-afcd-dd23-e056-d7d58c77dce2-5ffe7f77"
              className="logo-small-container"
            >
              <img
                src="https://assets.website-files.com/63aee5793ca698452efe7f60/63af02dc0e332ae5dc9fe5e4_Logo06.svg"
                loading="lazy"
                alt=""
                className="logo-small"
              />
            </div>
            <div
              id="w-node-f078fdf9-afcd-dd23-e056-d7d58c77dce4-5ffe7f77"
              className="logo-small-container"
            >
              <img
                src="https://assets.website-files.com/63aee5793ca698452efe7f60/63af02dcf706a1a426eb3608_Logo07.svg"
                loading="lazy"
                alt=""
                className="logo-small"
              />
            </div>
            <div
              id="w-node-f078fdf9-afcd-dd23-e056-d7d58c77dce6-5ffe7f77"
              className="logo-small-container"
            >
              <img
                src="https://assets.website-files.com/63aee5793ca698452efe7f60/63af02dc7013f86c8f8ee7f0_Logo08.svg"
                loading="lazy"
                alt=""
                className="logo-small"
              />
            </div>
          </div>

          <div className="fade-in-move-on-scroll">
            <p>Trusted by Top-tier product campanies</p>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Hero;

Answer 2

这是一个很好的例子，说明了 React 如何使事情变得过于复杂 - 执行此操作所需的完整 JS 是：

const iphone = document.querySelector('.iphone-holder'),
  backgroundText = document.querySelector('.hero-text-holder')

document.addEventListener('mousemove', e => {
  const halfWindow = window.innerWidth/2,
    xVal = e.pageX - halfWindow,
    positionInWindow = (xVal/window.innerWidth),
    pct = 10 * positionInWindow
  
  iphone.style.transform = `translateX(${pct}%)`
  backgroundText.style.transform = `translateX(${-1*pct}%)`

})

如果您想扰乱视差渲染的方式及其调整量，您可以调整乘数。例如，如果您希望背景相对于前景元素或多或少地移动，您可以增加或减少 -0.3 乘数

const iphone = document.querySelector('.iphone-holder'),
  backgroundText = document.querySelector('.hero-text-holder')

document.addEventListener('mousemove', e => {
  const halfWindow = window.innerWidth/2,
    xVal = e.pageX - halfWindow,
    positionInWindow = (xVal/window.innerWidth),
    pct = 10 * positionInWindow
  
  iphone.style.transform = `translateX(${pct}%)`
  backgroundText.style.transform = `translateX(${-0.3*pct}%)`

})

body {
    color: #fff;
    background-color: #000;
    font-family: Manrope, sans-serif;
    font-size: 14px;
    line-height: 1.2;
}


.container {
  padding: 40px;
  overflow-x: hidden;
}

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



.hero-section {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.hero-section-text-holder {
    width: 100%;
    height: 130vh;
    flex-direction: column;
    align-items: center;
    display: flex;
}


.hero-section-sticky {
    width: 100%;
    position: -webkit-sticky;
    position: sticky;
    top: 50%;
}


.hero-sticky-holder {
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
}


.hero-text-holder {
    grid-column-gap: 60px;
    perspective: 1000px;
    white-space: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
}

.hero-text-wrapper {
    justify-content: center;
    align-items: center;
    display: flex;
}


.hero-text {
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #eec5bd, #f3b1a5 35%, #c6caf6 72%, #dad9e9);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 14vw;
    font-weight: 800;
}

.hero-text-blur {
    opacity: .64;
    filter: blur(120px);
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #eec5bd, #f3b1a5 35%, #c6caf6 72%, #dad9e9);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 14vw;
    font-weight: 800;
    position: absolute;
}


.hero-text._02 {
    background-image: linear-gradient(to right, #eec5bd, #f3b1a5 6%, #c6caf6 61%, #dad9e9 72%);
}


.iphone-holder {
    z-index: 1;
    height: 600px;
    border-radius: 60px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
    top: 6%;
}

.iphone-holder{
      transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    opacity: 1;  
}





.iphone-screen {
    z-index: 1;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 4.1% 4.6%;
    display: flex;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

.iphone-screen-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
    border-radius: 25px;
}

.iphone-image {
    z-index: 2;
    height: 100%;
    position: relative;
}

.iphone-drop-shadow {
    width: 120%;
    height: 70%;
    filter: blur(64px);
    background-color: #000;
    position: absolute;
}

<div class="container">

  <div class="hero-section">
    <div class="hero-section-text-holder" style="will-change: transform; transform: translate3d(-6.72px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">
      <div class="hero-section-sticky">
        <div class="hero-sticky-holder">
          <div class="hero-text-holder" style="will-change: transform; transform: translate3d(13.44px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">
            <div class="hero-text-wrapper _01" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; opacity: 1;">
              <div class="hero-text">Test1</div>
              <div class="hero-text-blur" style="opacity: 0.6; filter: blur(120px); will-change: transform; transform: translate3d(-33.6px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">Test1</div>
            </div>
            <div class="hero-text-wrapper _02" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; opacity: 1;">
              <div class="hero-text _02">Test2</div>
              <div class="hero-text-blur" style="opacity: 0.6; filter: blur(120px); will-change: transform; transform: translate3d(-33.6px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">Test2</div>
            </div>
          </div>
        </div>
      </div>
      <div class="iphone-holder" style="transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; opacity: 1;"><img src="https://cdn.prod.website-files.com/63aee5793ca698452efe7f60/63aefb47917c0cfa0943fc97_iPhone%2014%20Pro%20%E2%80%93%20Space%20Black.webp" loading="lazy" sizes="(max-width: 767px) 196.6796875px, 295.015625px" srcset="https://assets.website-files.com/63aee5793ca698452efe7f60/63aefb47917c0cfa0943fc97_iPhone%2014%20Pro%20%E2%80%93%20Space%20Black-p-500.webp 500w, https://assets.website-files.com/63aee5793ca698452efe7f60/63aefb47917c0cfa0943fc97_iPhone%2014%20Pro%20%E2%80%93%20Space%20Black.webp 800w" alt="" class="iphone-image">
        <div class="iphone-screen"><img src="https://cdn.prod.website-files.com/63aee5793ca698452efe7f60/63aefd2632bfdbf4073fa431_Hero%20Iphone%20Image.webp" loading="lazy" alt="" sizes="(max-width: 479px) 80vw, 267.875px" srcset="https://cdn.prod.website-files.com/63aee5793ca698452efe7f60/63aefd2632bfdbf4073fa431_Hero%20Iphone%20Image-p-500.webp 500w, https://cdn.prod.website-files.com/63aee5793ca698452efe7f60/63aefd2632bfdbf4073fa431_Hero%20Iphone%20Image.webp 729w" class="iphone-screen-image"></div>
        <div class="iphone-drop-shadow" style="opacity: 1;"></div>
      </div>
    </div>
  </div>


</div>