Javascript CSS/JS图像滑出动画
我试图重现这样的效果: 屏幕顶部(左侧)的主图像在屏幕中有一个非常平滑的动画(与底部的图像相同)。当您滚动到任一图像时,它们以相同的方式显示动画 以下是我的想法: HTML JSJavascript CSS/JS图像滑出动画,javascript,jquery,html,css,animation,Javascript,Jquery,Html,Css,Animation,我试图重现这样的效果: 屏幕顶部(左侧)的主图像在屏幕中有一个非常平滑的动画(与底部的图像相同)。当您滚动到任一图像时,它们以相同的方式显示动画 以下是我的想法: HTML JS $(窗口)。滚动(函数(){ var winTop=$(window.scrollTop(); $(“.slideright”).each(函数(){ var pos=$(this).offset().top; 如果(位置
$(窗口)。滚动(函数(){
var winTop=$(window.scrollTop();
$(“.slideright”).each(函数(){
var pos=$(this).offset().top;
如果(位置
Codepen(由于我使用vh,所以全屏查看):
正如您所看到的,当您向图像滚动时,图像会滑出,但它不像示例链接那样是一个平滑、专业的动画。我还希望,如果您要向上滚动到顶部,然后再向下滚动(让该功能反复运行,而不仅仅是第一次滚动到视图内),可以将图像滑出。提前谢谢 试试这个:
增加了不透明度,改变了速度,并增加了当滚动在顶部时的重置。我稍微更改了一下您的逻辑,这样它就不会立即启动动画,它只会在图像处于视图中时正确启动。您可以将
winTop+600
更改为控制何时启动。添加更多以使其更早启动,减少以使其稍后启动winTop+200
将启动滚动条下方的动画。您就快到了,但是给动画带来微妙专业性的是选择了ease
功能。我会尝试一个更柔和的过渡,比如:
过渡:所有2s立方贝塞尔(0.23,1,0.32,1)400ms;
<div class="top">
<h1>scroll down<h1>
</div>
<div class="container">
<div class="block image-block slideright">
<figure>
<img src="https://i.guim.co.uk/img/media/11d4c182d094199e26ddb36febe67123a9bbc93a/34_246_2966_4275/master/2966.jpg?w=700&q=55&auto=format&usm=12&fit=max&s=4a5b5fe1d34627003607df532913292d">
</figure>
</div>
<div class="block text-block">
<h2> Some text </h2>
</div>
</div>
.top{
height:100vh;
}
h1{
text-align: center;
}
.block{
display: inline-block;
height: 100vh;
}
.image-block{
}
figure{
position: relative;
overflow: hidden;
height: 100vh;
width: 34vw;
text-align: center;
margin: 0;
}
image{
height: 100vh;
width: 34vw;
position: relative;
object-fit: cover;
}
.slideright{
transform: translateX(-34vw);
transition: all .8s ease-out;
}
.slideright.slideinright{
transform: translateX(0);
}
$(window).scroll(function() {
var winTop = $(window).scrollTop();
$(".slideright").each(function(){
var pos = $(this).offset().top;
if (pos < winTop + 600) {
$(this).addClass("slideinright");
}
});
$(".slideleft").each(function(){
var pos = $(this).offset().top;
if (pos < winTop + 600) {
$(this).addClass("slideinleft");
}
});
});
$(".slideright").each(function(){
var pos = $(this).offset().top;
if (winTop + 600 > pos) {
$(this).addClass("slideinright");
}
if(winTop === 0) {
$(this).removeClass('slideinright')
}
});