利用JS製作 IPhone SE

A13 動畫(弱化版)

2020/5/24 (日)      講者：Cuboid

Outline

  • 動畫預覽
  • Html架構
  • CSS的部分
  • JS的部分
  • 完整程式碼
  • 參考資料

Apple 官網

動畫預覽

HTML 架構

<div id="container">
    <video  src="https://www.apple.com/105/media/us/iphone-se/2020/90024c0f-285a-4bf5-af04-2c38de97b06e/anim/arcade-loop/large.mp4" muted  autoplay loop></video>
    <h1>
       LIS Bunny<br> 
       Hello World!!!!Hello World!!!!
    </h1>
       
    <div id="wrap">
       <img id="lisbunny" src="https://i.imgur.com/SZ6Cym1.png" />
    </div>
</div>

muted  靜音

autoplay 自動播放

loop 無限循環

 <video src="...." muted autoplay loop></video>

CSS 的部分

step1.

  * {
      padding: 0;
      margin: 0;
      list-style: none;
  }

  body {
      background-color: black;
  }

step2.

container 設定

 

position: sticky;

	  #container {
              position: sticky;
              top: 0;
              width: 100%;
              height: 1200px;
              overflow: hidden;
          }

          #container video {
              height: 100vh;
              width: auto;
              position: relative;
              transform: translate(0, 50%);

          }

          #container h1 {
              width: 100%;
              position: absolute;
              top: 0;
              left: 0;
              color: aliceblue;
              font-size: 64px;
              font-family: Helvetica;
              z-index: 20;
              text-align: center;
              transform: translate(0,200%);
              opacity: 1;
           }

step3.

wrap 設定

  

#wrap {
	width: 300px;
	height: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0px 0px 0px 100vh black;
	z-index: 10;
	min-width: 300px;
	min-height: 300px;
	background-color: black;
	opacity: 1;
}

#wrap  #lisbunny {
	width: 100%;
	height: 100%;
	opacity: 0;
}

box-shadow: MDN

完整css 程式碼

<style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        body {
            background-color: black;
        }

        #container {
            position: sticky;
            top: 0;
            width: 100%;
            height: 1200px;
            overflow: hidden;
        }

        #container video {
            height: 100vh;
            width: auto;
            position: relative;
            transform: translate(0, 50%);
        }

        #container h1 {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            color: aliceblue;
            font-size: 64px;
            font-family: Helvetica;
            z-index: 20;
            text-align: center;
            transform: translate(0,200%);
            opacity: 1;
         }

        #wrap {
            width: 300px;
            height: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0px 0px 0px 100vh black;
            z-index: 10;
            min-width: 300px;
            min-height: 300px;
            background-color: black;
            opacity: 1;
        }

        #wrap  #lisbunny {
            width: 100%;
            height: 100%;
            opacity: 0;
        }
</style>

JS 的部分

step1.

  window.addEventListener('scroll', (e) => {})

step2.

let scrolled = document.documentElement.scrollTop /
(document.documentElement.scrollHeight - document.documentElement.clientHeight)
console.log(scrolled)
//目前捲動距離／頁面總高度－視窗高度

document.documentElement.scrollTop       目前捲動距離document.documentElement.scrollHeight  頁面總高度

document.documentElement.clientHeight  視窗高度

scrolled 是介於0-1的數

step3.

let $h1 = document.querySelector('h1') //是指 h1 標籤這句標題
let $wrap = document.querySelector('#wrap') //指圖片的 容器
let $lisbunny = document.querySelector('#lisbunny') //指lisbunny圖片

step4.

$wrap.style.width = $wrap.style.height =
document.documentElement.clientWidth * 20 * (scrolled * scrolled * scrolled) + "px"

即是圖片在放到最大時,亦即是頁面捲動到最底時,它的大小會等於頁面寬度的 20 倍,再乘以 scrolled，即是捲動的百份比,最後加上 px 這個單位

scrolled乘以3次（加速度公式）

step5.

h1 標題動畫

if (scrolled <= 0.1) {
	$h1.style.opacity = (0.1 - scrolled) / 0.1
	$h1.style.marginTop = scrolled * 1000 * -1 + 'px'
} else {
	$h1.style.opacity = 0
}

讓h1標題 往上淡去

step6.

圖片顯現 動畫

if (0.1<scrolled <= 0.2) {
	$lisbunny.style.opacity = (scrolled - 0.1) / 0.1
} else {
	$lisbunny.style.opacity = 1
}

step7.

為了讓影片完整顯現，所以要把黑色背景去掉

if (scrolled >= 0.6) {
	$wrap.style.opacity = 0
} else {
	$wrap.style.opacity = 1;
}

完整程式碼

<!DOCTYPE html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <title>lab3</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        body {
            background-color: black;
        }

        #container {
            position: sticky;
            top: 0;
            width: 100%;
            height: 1200px;
            overflow: hidden;
        }

        #container video {
            height: 100vh;
            width: auto;
            position: relative;
            transform: translate(0, 50%);
        }

        #container h1 {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            color: aliceblue;
            font-size: 64px;
            font-family: Helvetica;
            z-index: 20;
            text-align: center;
            transform: translate(0,200%);
            opacity: 1;
         }

        #wrap {
            width: 300px;
            height: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0px 0px 0px 100vh black;
            z-index: 10;
            min-width: 300px;
            min-height: 300px;
            background-color: black;
            opacity: 1;
        }

        #wrap  #lisbunny {
            width: 100%;
            height: 100%;
            opacity: 0;
        }
    </style>
</head>

<body>

    <div id="container">
        <video
            src="https://www.apple.com/105/media/us/iphone-se/2020/90024c0f-285a-4bf5-af04-2c38de97b06e/anim/arcade-loop/large.mp4"
            muted autoplay loop></video>
        <h1>
            LIS Bunny<br> 
            Hello World!!!! Hello World!!!!
        </h1>
       
        <div id="wrap">
            <img id="lisbunny" src="https://i.imgur.com/SZ6Cym1.png" />
        </div>
    </div>

    <script>
        window.addEventListener('scroll', (e) => {
            //目前捲動距離／頁面總高度－視窗高度
            let scrolled = document.documentElement.scrollTop /
                (document.documentElement.scrollHeight - document.documentElement.clientHeight)
            console.log(scrolled)
            let $h1 = document.querySelector('h1') //是指 h1 標籤這句標題
            let $wrap = document.querySelector('#wrap') //指圖片的 容器
            let $lisbunny = document.querySelector('#lisbunny') //指lisbunny圖片
            $wrap.style.width = $wrap.style.height =
                document.documentElement.clientWidth * 20 * (scrolled * scrolled * scrolled) + "px"
            //即是圖片在放到最大時,亦即是頁面捲動到最底時,它的大小會等於頁面寬度的 20 倍,再乘以 scrolled，即是捲動的百份比,最後加上 px 這個單位
            //scrolled乘以3次方，（加速度公式）
            if (scrolled <= 0.1) {
                $h1.style.opacity = (0.1 - scrolled) / 0.1
                $h1.style.marginTop = scrolled * 1000 * -1 + 'px'
            } else {
                $h1.style.opacity = 0
            }

            if (scrolled <= 0.2) {
                $lisbunny.style.opacity = (scrolled - 0.1) / 0.1
            } else {
                $lisbunny.style.opacity = 1
            }

            if (scrolled >= 0.6) {
                $wrap.style.opacity = 0
            } else {
                $wrap.style.opacity = 1;
            }
        })
    </script>
</body>

</html>

參考資料

iPhone SE 產品網頁之 A13 晶片動畫特效

IPhone SE - A13 Animation

position: sticky;  MDN

box-shadow: MDN

THANKS

Made with Slides.com