卷轴上的动漫线

Question

我有一个简单的动画（一条线延伸）并且自动播放，但它在网站的第二部分。如何让它在用户打开时显示？

代码如下：

#home {
 height:1000px;
 background:rgba(0,153,255,1);
}

#work {
 position:relative;
 height:1000px;
 background: rgba(0,204,102,1);
}

#about{
 height:1000px;
 background: rgba(153,51,51,1);
 
}

#contact {
 height:1000px;
 background: rgba(153,153,153,1);
 
}


#line{
    position:absolute;
 width:340px;
 margin-top:200px;
 height:4px;
 background:rgba(0,0,0,1);
   -moz-animation-duration: 1s;
      -webkit-animation-duration: 1s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
}

 @-moz-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      
      to {
        margin-left:0%;
        width:600%;
      }
    }

 @-webkit-keyframes slidein {
      from {
        margin-left:0%;
        width:0%
      }
      
      to {
        margin-left:0%;
        width:340px;
      }
    }

<div id="home"> 
    
  </div>
  <div id="work">
  <div id="line">
  </div>
 
</div>
  <div id="about">
  </div>
  <div id="contact"></div>

我怎样才能让它以另一种方式工作，我的意思是，当用户向上滚动时动画再次工作？

Answer 1

使用 javascript 悬停或类似的东西来获取当前位置，如果该位置符合您的标准，请在您的动画中添加 class

document.querySelector('#line').addEventListener("mouseover", function() {
this.classList.add("animation_class");
});

这也适用于 css 悬停，但实施可能会变得粘滞

#line {
    margin-left:100%;
    width:300%;
    transition: width 1s, margin-left 1s;
}

#line:hover {
    margin-left:0%;
    width:600%;
}

只要您进入或离开 #line 元素

，就会触发转换

如果悬停发生在通过兄弟选择器的前一个元素上，也可以触发它：

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

Answer 2

CSS唯一的解决方案

有一些续集：

它在悬停 #work div 时起作用，因此无论何时将鼠标移到此 div，动画都会触发。

如果滚动不够，你也看不到。

#work:hover > #line {    
  -moz-animation-name: slidein;  
  -webkit-animation-name: slidein;  
  animation-name: slidein;  
}

#home {
  height: 1000px;
  background: rgba(0, 153, 255, 1);
}
#work {
  position: relative;
  height: 1000px;
  background: rgba(0, 204, 102, 1);
}
#work:hover > #line {
  -moz-animation-name: slidein;
  -webkit-animation-name: slidein;
  animation-name: slidein;
}
#about {
  height: 1000px;
  background: rgba(153, 51, 51, 1);
}
#contact {
  height: 1000px;
  background: rgba(153, 153, 153, 1);
}
#line {
  position: absolute;
  width: 340px;
  margin-top: 200px;
  height: 4px;
  background: rgba(0, 0, 0, 1);
  -moz-animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
@-moz-keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }
  to {
    margin-left: 0%;
    width: 600%;
  }
}
@-webkit-keyframes slidein {
  from {
    margin-left: 0%;
    width: 0%
  }
  to {
    margin-left: 0%;
    width: 340px;
  }
}

<div id="home">

</div>
<div id="work">
  <div id="line">
  </div>

</div>
<div id="about">
</div>
<div id="contact"></div>

jQuery 解决方案

function isScrolledIntoView(el) {
  var docViewTop = $(window).scrollTop(),
      docViewBottom = docViewTop + $(window).height(),
      elTop = $(el).offset().top,
      elBottom = elTop+$(el).height();
  return ((elBottom <= docViewBottom) && (elTop >= docViewTop));
  }

$(window).on('scroll',function(e){
  if(isScrolledIntoView($('#line'))){
    $('#line').addClass('animation-line');
  }else{
    $('#line').removeClass('animation-line');
  }
});

function isScrolledIntoView(el) {
  var docViewTop = $(window).scrollTop(),
    docViewBottom = docViewTop + $(window).height(),
    elTop = $(el).offset().top,
    elBottom = elTop + $(el).height();
  return ((elBottom <= docViewBottom) && (elTop >= docViewTop));
}

$(window).on('scroll', function(e) {
  if (isScrolledIntoView($('#line'))) {
    $('#line').addClass('animation-line');
  } else {
    $('#line').removeClass('animation-line');
  }
});

#home {
  height: 1000px;
  background: rgba(0, 153, 255, 1);
}
#work {
  position: relative;
  height: 1000px;
  background: rgba(0, 204, 102, 1);
}
#about {
  height: 1000px;
  background: rgba(153, 51, 51, 1);
}
#contact {
  height: 1000px;
  background: rgba(153, 153, 153, 1);
}
#line {
  position: absolute;
  width: 340px;
  margin-top: 200px;
  height: 4px;
  background: rgba(0, 0, 0, 1);
  -moz-animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.animation-line {
  -moz-animation-name: slidein;
  -webkit-animation-name: slidein;
  animation-name: slidein;
}
@-moz-keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }
  to {
    margin-left: 0%;
    width: 600%;
  }
}
@-webkit-keyframes slidein {
  from {
    margin-left: 0%;
    width: 0%
  }
  to {
    margin-left: 0%;
    width: 340px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home"></div>
<div id="work">
  <div id="line"></div>
</div>
<div id="about"></div>
<div id="contact"></div>

Answer 3

好的，这个解决方案使用了JS，因为你必须跟踪window位置来启动动画，它很简单，你可以在这里看到：

$(function() {

  window.addEventListener("scroll", function(event) {
    var top = this.scrollY,
      line = $('#line');

    if (top > 640) {
      line.addClass('animate-line');
    } else
      line.removeClass('animate-line');

  });

});

#home {
  height: 1000px;
  background: rgba(0, 153, 255, 1);
}

#work {
  position: relative;
  height: 1000px;
  background: rgba(0, 204, 102, 1);
}

#about {
  height: 1000px;
  background: rgba(153, 51, 51, 1);
}

#contact {
  height: 1000px;
  background: rgba(153, 153, 153, 1);
}

#line {
  position: absolute;
  width: 340px;
  margin-top: 200px;
  height: 4px;
  background: rgba(0, 0, 0, 1);
  -moz-animation-duration: 1s;
  -webkit-animation-duration: 1s;
}

.animate-line {
  -moz-animation-name: slidein;
  -webkit-animation-name: slidein;
}

@-moz-keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }
  to {
    margin-left: 0%;
    width: 600%;
  }
}

@-webkit-keyframes slidein {
  from {
    margin-left: 0%;
    width: 0%
  }
  to {
    margin-left: 0%;
    width: 340px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home"></div>
<div id="work">
  <div id="line"></div>
</div>
<div id="about">
</div>
<div id="contact"></div>

解释：

我把你的台词css分成两部分：

#line{
  position:absolute;
  width:340px;
  margin-top:200px;
  height:4px;
  background:rgba(0,0,0,1);
     -moz-animation-duration: 1s;
  -webkit-animation-duration: 1s;
}

.animate-line {
     -moz-animation-name: slidein;
  -webkit-animation-name: slidein;
}

因此当您添加 class .animate-line.

时，您的动画将 fire

然后我添加这个 JS：

$(function() {

  window.addEventListener("scroll", function(event) {
    var top = this.scrollY,
        line = $('#line');

    if(top > 640){
      line.addClass('animate-line');
    }else
      line.removeClass('animate-line');

  });

});

也很简单，它只是跟踪 window.scrollY 并且当位置是 > 640 它添加 class .animate-line 所以你的动画开始！

干杯

卷轴上的动漫线

Anime line on scroll

javascript

css

jquery

animation

scroll

CSS唯一的解决方案

jQuery 解决方案