javascript - CSS/JS 图片滑出动画
问题描述
我正在尝试重新创建这样的效果:https ://www.brontidebg.com/product 屏幕顶部(左侧)的主图像在屏幕上具有非常流畅的动画(与图像相同)在底部)。当您滚动到任一图像时,它们会以相同的方式进行动画处理。
这是我想出的:
HTML
<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>
CSS
.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);
}
JS
$(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");
}
});
});
Codepen(因为我使用的是 vh,所以全屏查看):https ://codepen.io/Caj/pen/GdZwYP
如您所见,当您向其滚动时,图像会滑出,但它不像示例链接那样流畅、专业的动画。如果您要向上滚动到顶部然后再向下滚动,我也希望让图像滑出(让该功能重复运行,而不仅仅是您第一次滚动到视图内)。提前致谢!
解决方案
尝试这个:
https://codepen.io/anon/pen/ZoWVxr
$(".slideright").each(function(){
var pos = $(this).offset().top;
if (winTop + 600 > pos) {
$(this).addClass("slideinright");
}
if(winTop === 0) {
$(this).removeClass('slideinright')
}
});
添加了不透明度,更改了速度并添加了滚动到顶部时的重置。我稍微改变了你的逻辑,使它不会立即开始动画,它只会在图像出现时才开始。您可以更改winTop + 600
以控制它何时启动。添加更多使其更早开始,更少使其更晚开始。winTop + 200
将在滚动的下方开始动画。
推荐阅读
- python - 从 Python 列表创建字典数组
- python - 如何运行嵌套的部分
- hadoop - 周、月、季度和年的 Impala 日期
- kotlin - 二级构造函数参数
- arangodb - Arangodb 文档数组与键/值集合
- python - 如何将字符串更改为类似字节的对象?
- mongodb - 在 heroku 上使用 mongodb 部署 jhipster 网关
- node.js - Redux 显示来自 Nodejs 后端的错误消息
- php - 在woocommerce主页中隐藏自定义代码
- node.js - 即使在将 ttl 设置为零之后,AWS APIGateway lambda 授权方缓存策略也是如此