javascript - 在 Y 屏幕位置显示 CSS 动画

Question

访问者在屏幕 Y 位置滚动后，是否有任何可能的方法来显示 css 动画。 例如。我有 2 个宽度为 100% 的部分，在第一部分中，有一些图像、文本等。但在第二部分中，有 2 个图像应该在访问者在该 Y 位置上滚动时设置动画。(y 位置应包含图片的高度)。

这是我的代码示例:

[http://codepen.io/anon/pen/mVZJRy][1]

(这些图片是.png)

HTML 代码

<section class="section3">

      <div id="left"> <img src="img/blue.png"> </div>
      <div id="right"> <img src="img/black.png"> </div>

    </div>

CSS 代码

    *{
   padding:0;
  margin:0;
  }


.section1{
  width:100%;
  height:670px;
  text-align:left;
  background-color:white;
  border-bottom:2px solid rgba(0, 0, 0, 0.1);
  box-shadow:0px 2px 0px #DFDFDF;
  }

.section3{
    width:100%;
    height:550px;
    background-color:#f2f2f2;
}

#right{
   position:absolute;
   left:51vw;
   top:856px;
   width:400px;
   height:400px;
  }

#right img{
   width:170px;
   height:290px;
 opacity:0;
  animation-fill-mode: forwards;
  animation-delay:1.1s;
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;    
  animation-duration: 1s;   
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-in-out;   
  -webkit-animation-timing-function: ease-in-out;       
  visibility: visible !important;   
}

@keyframes slideLeft {
    0% {
        transform: translateX(150%); opacity:1;
    }
    50%{
        transform: translateX(-8%);opacity:1;
    }
    65%{
        transform: translateX(4%);opacity:1;
    }
    80%{
        transform: translateX(-4%);opacity:1;
    }
    95%{
        transform: translateX(2%);opacity:1;
    }           
    100% {
        transform: translateX(0%);opacity:1;
    }
}

@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(150%);opacity:1;
    }
    50%{
        -webkit-transform: translateX(-8%);opacity:1;
    }
    65%{
        -webkit-transform: translateX(4%);opacity:1;
    }
    80%{
        -webkit-transform: translateX(-4%);opacity:1;
    }
    95%{
        -webkit-transform: translateX(2%);opacity:1;
    }           
    100% {
        -webkit-transform: translateX(0%);opacity:1;
    }
}

  #left{
   position:absolute;
   width:300px;
   height:357px;
   left:39vw;
   top:850px;
  }

  #left img{
   width:300px;
   height:357px;
animation-fill-mode: forwards;
  opacity:0;
  animation-delay:1.1s;

    animation-name: b;
    -webkit-animation-name: b;  

    animation-duration: 1s; 
    -webkit-animation-duration: 1s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 
}

@keyframes b {
    0% {
        transform: translateX(-150%);opacity:1
    }
    50%{
        transform: translateX(8%);opacity:1
    }
    65%{
        transform: translateX(-4%);opacity:1
    }
    80%{
        transform: translateX(4%);opacity:1
    }
    95%{
        transform: translateX(-2%);opacity:1
    }           
    100% {
        transform: translateX(0%);opacity:1
    }   
}


(-4%);opacity:1;
    }
    95%{
        -webkit-transform: translateX(2%);opacity:1;
    }           
    100% {
        -webkit-transform: translateX(0%);opacity:1;
    }
}

Answer 1

当滚动到正确的位置时，您可以为图像添加一些类名。并在这个类上设置你的 css animaion。 可能是这样的:

window.onscroll = function() {
  var scrolled = window.pageYOffset || document.documentElement.scrollTop,
      imgRight = document.getElementById('right').children[0],
      imgLeft= document.getElementById('left').children[0];

  if (scrolled => imgRight.height) {
      imgRight.className = 'slideLeft';
  }
  if (scrolled => imgLeft.height) {
      imgLeft.className = 'b';
  }
}

我在 css 中添加了一些修正 http://codepen.io/anon/pen/gPNpzM?editors=0110