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 hover或类似的东西来获取当前位置，如果位置与你的ciriteria匹配，添加一个带动画的类

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

这也适用于css hover，但实现可能会变得棘手

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

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

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

，就会触发转换

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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');
  }
});

＆＃13;

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');
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

好的，这个解决方案使用JS，因为你必须跟踪窗口位置来开始动画，这很简单，你可以在这里看到它：http://codepen.io/dpedoneze/pen/PwyKaQ

解释

我将你的行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;
}

因此，当您添加课程fire时，动画将.animate-line。

然后我添加这个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，当位置为＆gt;时640 它会添加类.animate-line，以便开始动画！

干杯

滚动动漫线

3 个答案:

仅CSS解决方案

jQuery解决方案