下划线标头CSS动画

Question

我有一些div标签在页面上，一旦他们在一个视口，我希望他们以某种方式动画。我已经在'视口'部分使用了waypoint.js，所以现在我被卡住了动画。

基本上，我希望在任何时候都在所有h1标签上留下灰色下划线。一旦他们看到了，我想要一条黑线从右到左在这条灰线的上方运行，然后几乎离开现场，停在灰线约25％处。

为了演示它，我已经改变了效果在hover上工作，正如你所看到的，当它穿过灰色线条时我已经有了部分，但是当它应该离开时我会卡住部分现场（几乎离开现场 - 在灰线的25％停止）：

HTML：

<div class="section-header"> 
    <span>Hello</span> 
</div> 

CSS：

.section-header { 
    text-transform: uppercase; 
    font-weight: 700; 
    font-size: 2em; 
    letter-spacing: 5px; 
    position: relative; 
    text-align: center; 

    > span { 
     display: inline-block; 
     position: relative; 
     border-bottom: 1px solid #ccc; 
     &:before { 
      content: ""; 
      position: absolute; 
      width: 0; 
      height: 1px; 
      bottom: -1px; 
      right: 0; 

      background-color: #000; 
      visibility: hidden; 
      -webkit-transition: all 0.9s ease-in-out 0s; 
      transition: all 0.9s ease-in-out 0s; 
     } 
     &:hover { 
      &:before { 
       visibility: visible; 
       width: 100%; 
      } 
     } 
    } 

} 

http://codepen.io/anon/pen/RWoxBv

这可能在CSS中完成吗？或者我应该使用JavaScript吗？

为了进一步展示动画，想象这是黑线：（！= 25％可见）

  - (starts from right hand side and goes to left) 
      -- 
     --- 
     ---- 
     ----- 
     ------ 
    ------- 
    -------- 
    --------- 
    ---------- 
----------- 
------------ (point when it covers the grey line and starts to 'leave the scene') 
----------- 
---------- 
--------- 
-------- 
------- 
------ 
----- 
---- 
--- (stopping there) 

Answer 1

所以从left 100%动画的元素left -75%
jsBin demo playground

这是一个很好的例子，它使用一个small jQuery plugin taken from here和位标准的CSS的：

/** 
 
* inViewport jQuery plugin by Roko C.B. stackoverflow.com/questions/24768795/ 
 
* 
 
* Returns a callback function with an argument holding 
 
* the current amount of px an element is visible in viewport 
 
* (The min returned value is 0 (element outside of viewport) 
 
* The max returned value is the element height + borders) 
 
*/ 
 
;(function($, win) { 
 
    $.fn.inViewport = function(cb) { 
 
    return this.each(function(i,el) { 
 
     function visPx(){ 
 
     var elH = $(el).outerHeight(), 
 
      H = $(win).height(), 
 
      r = el.getBoundingClientRect(), t=r.top, b=r.bottom; 
 
     return cb.call(el, Math.max(0, t>0? Math.min(elH, H-t) : (b<H?b:H))); 
 
     } 
 
     visPx(); 
 
     $(win).on("resize scroll", visPx); 
 
    }); 
 
    }; 
 
}(jQuery, window)); 
 

 

 

 
// Let's rock! 
 
$("h1 span").inViewport(function(px){ 
 
    $(this).toggleClass("animateLine", !!px); 
 
});

p{height:900px;}/*FOR DEMO ONLY*/ 
 

 
h1{ 
 
    text-align:center; 
 
} 
 
h1 span{ 
 
    display:inline-block; 
 
    position:relative; 
 
    overflow:hidden; 
 
} 
 
h1 span:after, 
 
h1 span:before{ 
 
    content:""; 
 
    height:1px; 
 
    width:100%; 
 
    position:absolute; 
 
    bottom:0px; 
 
    left:0; 
 
    transition: 3s; 
 
} 
 
h1 span:before{ 
 
    background:#ccc; 
 
} 
 
/* We'll animate this one to -75% */ 
 
h1 span:after{ 
 
    background:#000; 
 
    left:100%; 
 
} 
 
h1 span.animateLine:after{ 
 
    left: -75%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1><span>This is title 1</span></h1> 
 
<p>1 Scroll down to find more titles</p> 
 
<h1><span>This is title 2</span></h1> 
 
<p>2 Scroll down to find more titles</p> 
 
<h1><span>This is title 3</span></h1> 
 
<p>3 Scroll down to find more titles</p> 
 
<h1><span>This is title 4</span></h1> 
 
<p>4 Scroll down to find more titles</p> 
 
<h1><span>This is title 5</span></h1> 
 
<p>5 Scroll down to find more titles</p>

基本上设置伪:after初始100％左，并触发，将使用应用JQ左-75％的过渡的CSS3类插件就像在演示中一样。

https://stackoverflow.com/a/26831113/383904
CSS3-Animate elements if visible in viewport (Page Scroll)