gpt4 book ai didi

javascript - 使用scrollMagic从右向左滑动动画

转载 作者:行者123 更新时间:2023-12-02 23:55:01 24 4
gpt4 key购买 nike

我是 GSAP 新手。

我正在关注 MilklsNice 的 ScrollMagic 和 GSAP 教程 YouTube .

在 GSAP 动画中,他解释了如何制作看起来像从左到右打开一本书的动画。

var overlay_test = document.querySelector('.overlay_test');

var animate_in = new TimelineMax();

animate_in
.fromTo(overlay_test, 2,
{skewX: 10, scale: 1.5},
{skewX: 0, xPercent: 100, transformOrigin: "0% 100%", ease: Power2.easeOut})
.box_test{
position: relative;
overflow: hidden;
height: 350px;
}

.img_test{
width: 800px;
}

.overlay_test{
display: block;
position: absolute;
left: 0;
top: 0;
background:white;
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<div class="box_test">
<img class="img_test" src="https://images.unsplash.com/photo-1553696801-25638feb93fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" alt="korea">
<div class="overlay_test"></div>
</div>

(您也可以查看 the CodePen 来了解这一点)

此时webpage ,我学会了如何从右到左显示 div。代码如下:

var left = new TimelineMax ();

var rect = document.getElementById('rect');

left
.from(rect,2,{width:0},1)
.from(rect,2,{left:400},1)
Result
EDIT ON
body{
background: #414141;
overflow:hidden;
}

#rect{
position:relative;
width:400px;
height:350px;
margin: 20px;
background: green;
align-items: center;
overflow:hidden;
}
#copy{
position: absolute;
bottom: 0;
margin: 0 10px;

}
h1{
font-family: 'Work Sans', sans-serif;
color: white;
width: max-content;
margin: 0 auto;
font-size: 145px;
line-height: 100px;
}
.very{
font-size: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<div id="rect">
<div id="copy">
<h1 class="very">Very cool </h1>
<h1> Jack!</h1>
</div>
</div>
(您还可以为此查看 the CodePen)

顺便说一下,
这个动画不完全是我想要的。因为,它只是将 div 从右向左移动,而不是像打开一本书一样从右向左打开它。不过,我还是尝试了:

var overlay_test = document.querySelectorAll('.overlay_test');

var animate_in = new TimelineMax();

animate_in
.from(overlay_test,2,{width:0},1)
.from(overlay_test,2,{left:800},1)
.box_test{
position: relative;
overflow: hidden;
height: 350px;
}

.img_test{
width: 800px;
}

.overlay_test{
display: block;
position: absolute;
left: 0;
top: 0;
background:white;
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<div class="box_test">
<img class="img_test" src="https://images.unsplash.com/photo-1553696801-25638feb93fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" alt="korea">
<div class="overlay_test"></div>
</div>
(您还可以为此查看 the CodePen)

现在,图像消失了。所以,我想我可以将动画应用到图片上,而不是覆盖图像。然而,现在动画从屏幕的左上角作为一个非常小的图像开始,并从那里扩展。

var img_test = document.querySelectorAll('.img_test');

var animate_in = new TimelineMax();

animate_in
.from(img_test,2,{width:0},1)
.from(img_test,2,{left:800},1)
.box_test{
position: relative;
overflow: hidden;
height: 350px;
}

.img_test{
width: 800px;
}

.overlay_test{
display: block;
position: absolute;
left: 0;
top: 0;
background:white;
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<div class="box_test">
<img class="img_test" src="https://images.unsplash.com/photo-1553696801-25638feb93fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" alt="korea">
</div>
(您还可以查看 the CodePen 来了解这一点)

这也不是我想要的。

I want to make an animation that looks like opening a book from RIGHT to LEFT. (the opposite of what I include at the beginning.)

我怎样才能实现它? :)

最佳答案

在动画中使用 right:0right:200% 也在 css 中将 left:0 更改为 right:0

See code

var overlay_test = document.querySelector('.overlay_test');

var animate_in = new TimelineMax();

animate_in
.fromTo(overlay_test, 2,
{skewX: 10, scale: 1.5 , right:0 },
{skewX: 0, right:"200%" ,transformOrigin: "0% 100%", ease: Power2.easeOut})
.box_test{
position: relative;
overflow: hidden;
height: 350px;
}

.img_test{
width: 800px;
}

.overlay_test{
display: block;
position: absolute;
right: 0;
top: 0;
background:white;
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>

<div class="box_test">
<img class="img_test" src="https://images.unsplash.com/photo-1553696801-25638feb93fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" alt="korea">
<div class="overlay_test"></div>
</div>

关于javascript - 使用scrollMagic从右向左滑动动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55438496/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com