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>
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;