-
Notifications
You must be signed in to change notification settings - Fork 48
/
scale-phone-to-middle-when-scroll.html
63 lines (60 loc) · 2.01 KB
/
scale-phone-to-middle-when-scroll.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!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>Document</title>
<script src="/lib/gsap.min.js"></script>
<script src="/lib/ScrollTrigger.min.js"></script>
<style>
body {
height: 2000px;
/* margin-top:1000px; */
}
.phone-wrap {
background: #eee;
height: 100vh;
min-height: 750px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.phone-wrap img {
margin-top: 120px;
background-image: url(../images/iqooneo7-color-img1-md.png);
background-size: 461px 605px;
background-position: center;
background-repeat: no-repeat;
width: 461px;
height: 605px;
transform: translate(695px, 575px) scale(2.5, 2.5);
}
</style>
</head>
<body>
<div class="phone-wrap">
<img src="./images/iqooneo7-color-img1-md.png" />
</div>
<script>
gsap.registerPlugin(ScrollTrigger);
// gsap.to(".phone-wrap img", { x: 200 })
gsap.to(".phone-wrap img", {
scale: 1,
x: 0,
y: 0,
scrollTrigger: {
trigger: ".phone-wrap",
start: "bottom bottom", // 当 phone-wrap 元素底部,滚动到可视区域底部时, 开始动画
end: "bottom top", // 当 phone-wrap 底部,到达可视区域顶部的时候,结束动画
scrub: true, // 表示动画可以重复执行改成false表示只执行一次
markers: true, // 绘制开始位置和结束位置的线条
pin: true, // 动画执行期间,页面不进行滚动,动画执行结束后
},
});
// gsap.fromTo(".phone-wrap img", { x: 695,y: 575, scale: 2.5,}, {x: 0, yy: 0, scale: 1});
</script>
</body>
</html>