Question

旋转滑块可以选择设置上滑图像过渡，我尝试复制该效果，这样我就可以使用它而不需要旋转滑块..

这是page，我试图采用上述过渡效果。

我试过这个CSS，但没有运气，我不知道如何使用关键帧进行动画制作。

谢谢

.full-img.parallax-yes{
    overflow-y: hidden;
    max-height: 330px;
    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    transition: background-position 1s;
    transform: matrix(1, 0, 0, 1, 0, 0);
    transform-origin: 0% 0% 0px;
}

Answer 1

希望这是您的目标，简单background-image slide-up animation使用CSS animation。

在父div中定义两个不同的类，一个用于background image，另一个用于text，其位置为绝对position:absolute，用于移动背景图像up-side在关键帧和background-position-y中使用negative value，用于向下background-position-y和positive values。

@-webkit-keyframes ani{
 from{
     background-position-y:0px;
 }
 to{
     background-position-y:-100px;
   }
}

＆＃13;

#bx{
  width:100%;
  height:300px;
  overflow:hidden;
  position:relative;
 }
 #bx > .iim{
  width:100%;
  height:600px;
  background:url('https://source.unsplash.com/user/erondu');
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:fixed;
  animation:an 5s forwards;
  transition:5s ease forwards;  
 }
@-webkit-keyframes an{
  from{
    background-position-y:0px;
  }
  to{
    background-position-y:-100px;
  }
}

#bx > .txt{
  width:100%;
  height:300px;
  overflow:hidden;
  position:absolute;
  color:black;
  font-size:32px;
  z-index:6;
  top:0;
  left:0;
}

＆＃13;

<div id="bx">
<div class="iim">
</div>
<div class="txt">
Replace following content by your text.
</div>
</div>

＆＃13;

Answer 2

这里我给出了使用关键帧

的示例代码

<div class="full-height"> </div>; 


    .full-height {
      max-height: 330px;
      min-height: 330px;
      background-image: url("http://carbongroup.com.au/wp-content/uploads/2015/10/bridge.jpg");
      background-size: cover;
      background-position: 0% 0%;
      background-repeat: no-repeat;
      background-color: green;
      animation-name: move;
      animation-duration: 10s;
      animation-timing-function: linear;
      animation-iteration-count: 1;
    }

    @keyframes move {
      0% {
        background-position: 0% 0%;
      }

       100% {
        background-position: 100% 100%;

      }
    }

Answer 3

您可以这样做，并在租约window.load()时使用，这样动画只会在您的页面已加载时启动。

$(window).load(function(){
$('.banner').addClass('loaded');
});

.banner{
  width: 100%;
  height: 200px;
  background-image: url(https://source.unsplash.com/user/erondu);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position-y: 100%;
  color: #fff;
  transition: all 5s cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-transition: all 5s cubic-bezier(0.47, 0, 0.745, 0.715);
}
.banner.loaded{
  background-position-y: 0%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="banner">
<p>this is banner text</p>
</div>

背景图像滑动过渡

3 个答案: