1. 首頁
  2. 問答
  3. 開始動畫時滾動到

開始動畫時滾動到

2015-06-12 121 views
7

我已經花了整整一天的時間尋找一種簡單的方法，讓我的動畫在我滾動到頁面上的特定位置後開始。開始動畫時滾動到

我的CSS

.animation { 
width: 50%; 
float: left; 
position: relative; 
-webkit-animation-name: test; 
-webkit-animation-duration: 4s; 
-webkit-animation-iteration-count: 3; 
-webkit-animation-fill-mode: forwards; 
animation-name: test; 
animation-duration: 4s; 
animation-iteration-count: 1; 
animation-fill-mode: forwards; }

而我的HTML

<div class="container"> 

<div class="animation"> 

Content goes here... 

</div> 

</div>

我不知道如何讓我滾動到類容器動畫的開始。

來源

2015-06-12 WeBWeB

+1

使用js和添加類的div時，它是在屏幕上看到：HTTP：/ /stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling – krzysiej

+1

你可以使用像https://github.com/customd/jquery-visible這樣的庫，而不是試圖自己弄清楚它 –

回答

8

的Javascript

var $window = $(window); 
var $elem = $(".animation") 

function isScrolledIntoView($elem, $window) { 
    var docViewTop = $window.scrollTop(); 
    var docViewBottom = docViewTop + $window.height(); 

    var elemTop = $elem.offset().top; 
    var elemBottom = elemTop + $elem.height(); 

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 
$(document).on("scroll", function() { 
    if (isScrolledIntoView($elem, $window)) { 
     $elem.addClass("animate") 
    } 
});

HTML

<div class="container"> 
    <div class="animation">Content goes here...</div> 
</div>

CSS

.animation.animate { 
    animation: pulse 5s infinite;//change this to whatever you want 
}

JSFiddle用（不要忘記滾動）打

來源

2015-06-12 11:27:14 trebor

2

@WebWeb，你可以試試這個si mple式：

$(window).on('scroll' , function(){ 
    scroll_pos = $(window).scrollTop() + $(window).height(); 
    element_pos = $(yourelement).offset().top + $(yourelement).height() ; 
    if (scroll_pos > element_pos) { 
     $(yourelement).addClass('add-anim'); 
    }; 

})

其基本上檢查所述窗口滾動位置比所述元件從文檔（加上元件高度）的頂部偏移李建華，伍妍。它是一個古老的公式。

FIDDLE AND DEMO HERE

如果你懶的和我一樣，雖然，你可以去waypoints.js一個驚人的圖書館。

來源

2015-06-12 11:38:28

2

您可以嘗試wow.js當元素在頁面上可見時，它可以快速簡單地在滾動上集成動畫。我創建簡單的演示。

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Bootstrap 101 Template</title> 
 
    <link rel="stylesheet" href="http://mynameismatthieu.com/WOW/css/libs/animate.css"> 
 
    <style> 
 

 
body { 
 
    padding-bottom: 200px; 
 
} 
 

 
    </style> 
 
    </head> 
 
    <body> 
 

 
<div style="height: 110vh"> 
 
</div> 
 

 
<div class="wow bounceInLeft"> 
 
    Animation start when Visible 
 
</div> 
 

 
<div data-wow-delay=".5s" class="wow bounceInLeft"> 
 
    Animation start when Visible after .5s delay 
 
</div> 
 

 
<div data-wow-delay="1s" class="wow bounceInLeft"> 
 
    Animation start when Visible after 1s delay 
 
</div> 
 

 
<div data-wow-delay="2s" class="wow bounceInLeft"> 
 
    Animation start when Visible after 2s delay 
 
</div> 
 

 
<div style="text-align: center; margin-top: 300px;"> 
 
    <span data-wow-delay="" class="wow bounceInDown">Link 1</span> 
 
    <span data-wow-delay=".1s" class="wow bounceInDown">Link 3</span> 
 
    <span data-wow-delay=".2s" class="wow bounceInDown">Link 3</span> 
 
    <span data-wow-delay=".3s" class="wow bounceInDown">Link 4</span> 
 
</div> 
 

 

 
<script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script> 
 
<script> 
 
new WOW().init(); 
 
</script> 
 

 
    </body> 
 
</html>

來源

2015-06-12 11:40:49

1

沒必要想着這件事......只是用它

GITHUB

下載animate.css和

<script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script> 
<link rel="stylesheet" href="css/animate.css"> 
<script> 
new WOW().init(); 
</script> 


<div class="wow bounceInLeft animated"> 
       <h2>animated heading</h2> 
</div>

嘗試實現這個這個代碼...

this link for more

（這些類可以使用）

bounce 
flash 
pulse 
rubberBand 
shake 
headShake 
swing 
tada 
wobble 
jello 
bounceIn 
bounceInDown 
bounceInLeft 
bounceInRight 
bounceInUp 
bounceOut 
bounceOutDown 
bounceOutLeft 
bounceOutRight 
bounceOutUp 
fadeIn 
fadeInDown 
fadeInDownBig 
fadeInLeft 
fadeInLeftBig 
fadeInRight 
fadeInRightBig 
fadeInUp 
fadeInUpBig 
fadeOut 
fadeOutDown 
fadeOutDownBig 
fadeOutLeft 
fadeOutLeftBig 
fadeOutRight 
fadeOutRightBig 
fadeOutUp 
fadeOutUpBig 
flipInX 
flipInY 
flipOutX 
flipOutY 
lightSpeedIn 
lightSpeedOut 
rotateIn 
rotateInDownLeft 
rotateInDownRight 
rotateInUpLeft 
rotateInUpRight 
rotateOut 
rotateOutDownLeft 
rotateOutDownRight 
rotateOutUpLeft 
rotateOutUpRight 
hinge 
rollIn 
rollOut 
zoomIn 
zoomInDown 
zoomInLeft 
zoomInRight 
zoomInUp 
zoomOut 
zoomOutDown 
zoomOutLeft 
zoomOutRight 
zoomOutUp 
slideInDown 
slideInLeft 
slideInRight 
slideInUp 
slideOutDown 
slideOutLeft 
slideOutRight 
slideOutUp

來源

2016-01-10 04:12:41

0

如果還有人想用這個動畫應該運行，當你打開網頁，懸停它，當您滾動當你向後滾動時再次運行，這裏是我如何解決它。

我使用了@robert，並添加了一些改進。

我做了這個搗鼓這個https://jsfiddle.net/hassench/rre4qxhf/

所以你去：

var $window = $(window); 
 
var $elem = $(".my-image-container"); 
 
var $gotOutOfFrame = false; 
 

 
function isScrolledIntoView($elem, $window) { 
 
    var docViewTop = $window.scrollTop(); 
 
    var docViewBottom = docViewTop + $window.height(); 
 

 
    var elemTop = $elem.offset().top; 
 
    var elemBottom = elemTop + $elem.height(); 
 

 
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && $gotOutOfFrame); 
 
} 
 

 
function isScrolledOutView($elem, $window) { 
 
    var docViewTop = $window.scrollTop(); 
 
    var docViewBottom = docViewTop + $window.height(); 
 

 
    var elemTop = $elem.offset().top; 
 
    var elemBottom = elemTop + $elem.height(); 
 

 
    return ((elemBottom < docViewBottom) && (elemTop < docViewTop)); 
 
} 
 
$(document).on("scroll", function() { 
 
    if (isScrolledIntoView($elem, $window)) { 
 
    $gotOutOfFrame = false; 
 
    $elem.addClass("animate"); 
 
    $(function() { 
 
     setTimeout(function() { 
 
     $elem.removeClass("animate"); 
 

 
     }, 1500); 
 
    }); 
 
    } 
 
    if (isScrolledOutView($elem, $window)) { 
 
    $gotOutOfFrame = true; 
 
    $elem.removeClass("animate"); 
 
    } 
 
});
.my-image-container { 
 
    top: 50px; 
 
    max-width: 22%; 
 
} 
 

 
.my-image-container:hover { 
 
    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; 
 
    transform: translate3d(0, 0, 0); 
 
    backface-visibility: hidden; 
 
    perspective: 1000px; 
 
} 
 

 
.my-image-container .my-image { 
 
    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; 
 
    -moz-animation-delay: 1s; 
 
    -webkit-animation-delay: 1s; 
 
    -o-animation-delay: 1s; 
 
    animation-delay: 1s; 
 
    transform: translate3d(0, 0, 0); 
 
    backface-visibility: hidden; 
 
    perspective: 1000px; 
 
    width: 100%; 
 
} 
 

 
.animate { 
 
    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; 
 
    -moz-animation-delay: 0.5s; 
 
    -webkit-animation-delay: 0.5s; 
 
    -o-animation-delay: 0.5s; 
 
    animation-delay: 0.5s; 
 
    transform: translate3d(0, 0, 0); 
 
    backface-visibility: hidden; 
 
    perspective: 1000px; 
 
} 
 

 
@keyframes shake { 
 
    10%, 
 
    90% { 
 
    transform: translate3d(-1px, 0, 0); 
 
    } 
 
    20%, 
 
    80% { 
 
    transform: translate3d(2px, 0, 0); 
 
    } 
 
    30%, 
 
    50%, 
 
    70% { 
 
    transform: translate3d(-4px, 0, 0); 
 
    } 
 
    40%, 
 
    60% { 
 
    transform: translate3d(4px, 0, 0); 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
The animation will run when you firt open the page,<br> 
 

 
and when you hover it,<br> 
 

 
and when you scroll out then in. <br> 
 

 
<div class="my-image-container"> 
 
    <img class="my-image" 
 
    src="http://www.lifeofpix.com/wp-content/uploads/2017/05/img-5831.jpg"> 
 
</div> 
 
<br> Scroll down then back up 
 
<br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br> 
 
scroll up

來源

2017-06-14 10:30:35

相關問題

 相關問題