로메오의 블로그

Apple 홈페이지 스크롤 애니메이션 [ScrollMagic ] 본문

Design/Markup

Apple 홈페이지 스크롤 애니메이션 [ScrollMagic ]

romeoh 2021. 10. 28. 17:56
반응형

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple</title>
    <link rel="stylesheet" href="./app.css">
</head>
<body>
    <div class="intro">
        <h1>돈 많이 모아두셨죠?</h1>
        <video src="https://www.apple.com/105/media/ww/iphone-13-pro/2021/404b23a8-f9c5-466c-b0e6-3d36705b959d/anim/hero-video/xlarge.mp4"></video>
    </div>
    <section>
        <h1>지금 바로 구매하세요.</h1>
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
    <script src="./app.js"></script>
</body>
</html>

 

app.css

* {
    margin: 0; padding: 0; box-sizing: border-box;
}
body {
    font-family: Arial, Helvetica, sans-serif;
}
.intro {
    height: 100vh;
}
.intro video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.intro h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 80px;
    color:blanchedalmond;
}
section {
    height: 100vh;
    background-color: black;
}
section h1 {
    padding-top: 300px;
    text-align: center;
    font-size: 80px;
    color: white;
}

 

app.js

const intro = document.querySelector('.intro');
const video = intro.querySelector('video');
const text = intro.querySelector('h1');

const section = document.querySelector('section');
const end = section.querySelector('h1');

const controller = new ScrollMagic.Controller();

// Scene 1
const scene = new ScrollMagic.Scene({
    duration: 9000,
    triggerElement: intro,
    triggerHook: 0
})
    .addIndicators()
    .setPin(intro)
    .addTo(controller);

// Text Animation
const textAnim = TweenMax.fromTo(text, 3, {opacity: 1}, {opacity: 0})

// Scene 2
let scene2 = new ScrollMagic.Scene({
    duration: 3000,
    triggerElement: intro,
    triggerHook: 0
})
    .setTween(textAnim)
    .addTo(controller);

// Video Player
let accelAmount = 0.1;
let scrollPos = 0;
let delay = 0;

scene.on('update', e => {
    scrollPos = e.scrollPos / 1000;
})

setInterval(() => {
    delay += (scrollPos - delay) * accelAmount;
    console.log(scrollPos, delay)

    video.currentTime = scrollPos;
}, 33.3)

반응형

'Design > Markup' 카테고리의 다른 글

SVG 폰트 만들기  (0) 2022.03.23
Figma에서 Font Awesome 적용하기  (2) 2022.03.17
[Gimp] 사각형 그리기  (0) 2021.12.21
input file 이미지 미리보기 구현  (0) 2021.11.09
[Adobe Photoshop] 한글판을 영문판으로 변경  (0) 2020.01.22
'Design/Markup' Related Articles more
Comments