CSS/JS图像滑出动画 [英] CSS/JS image slide out animation

问题描述

我正在尝试重新创建这样的效果: https://www.brontidebg.com/product 屏幕顶部(左侧)的主图像在屏幕外有一个非常平滑的动画(与底部图像相同).滚动到任一图像时，它们都以相同的方式进行动画处理.

I'm trying to recreate an effect like this: https://www.brontidebg.com/product The main image at the top of the screen (to the left) has a really smooth animation out into the screen (same with the image at the bottom). When you scroll to either image, they animate out in the same manner.

这是我想出的:

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

Codepen (view in fullscreen since I'm using vh): https://codepen.io/Caj/pen/GdZwYP

如您所见，图像在滚动时会滑出，但这并不是示例链接那样的平滑，专业外观的动画.如果您要向上滚动到顶部然后向下滚动(我必须重复运行该功能，而不仅仅是第一次滚动到视图中)，我也希望图像可以滑出.预先感谢！

As you can see, the image slides out as you scroll towards it, but it's not a smooth, professional looking animation like the example link. I'm also hoping to have the image slide out if you were to scroll up to the top and then back down (have the function run repeatedly, not just the first time you scroll to within view). Thanks in advance!

推荐答案

您已经差不多了，但是选择 ease 函数可以使动画具有微妙的专业感.我会尝试像这样的更柔和的过渡:

You are almost there, but what gives that subtle touch of professionality to the animation is the choice of the ease function. I would try with a softer transition like this one:

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

这篇关于CSS/JS图像滑出动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！