下劃線標頭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)