背景图像向上滑动过渡

Question

革命滑动条有选项设置滑动图像过渡，我试图复制这个效果，所以我可以使用这个没有革命滑动条。

这是幻灯片的过渡效果。

这是我试图采用上述过渡效果的页面。

我尝试了这个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

这里我给出了使用关键帧的示例代码

<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 2

希望这是你正在尝试的，简单的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;
   }
}

#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;
}

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

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>