CSS/JS 图片滑出动画答案

【问题标题】：CSS/JS image slide out animationCSS/JS 图片滑出动画
【发布时间】：2018-10-05 04:33:15
【问题描述】：

我正在尝试重新创建这样的效果：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);
}

 $(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

如您所见，当您向其滚动时，图像会滑出，但它不像示例链接那样具有流畅、专业的动画效果。如果您要向上滚动到顶部然后再向下滚动，我也希望让图像滑出（让该功能重复运行，而不仅仅是第一次滚动到视图内）。提前致谢！

【问题讨论】：

标签： javascript jquery html css animation

【解决方案1】：

试试这个：

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 将在滚动的下方开始动画。

【讨论】：

【解决方案2】：

你快到了，但给动画带来微妙的专业感的是ease函数的选择。我会尝试像这样更柔和的过渡：

transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 400ms;

【讨论】：