web-dev-qa-db-ja.com

スクロールしたときにアニメーションを開始

ページの特定の場所にスクロールした後、アニメーションを開始する簡単な方法を探して一日中過ごしています。

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

クラスコンテナーにスクロールしたときにアニメーションを開始する方法を知りたいです。

javascriptjquerycssanimationscroll
11
WeBWeB

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 で遊ぶ（スクロールすることを忘れないでください）

11
Bobby Tables

それについて不思議に思う必要はありません...それを使うだけです

[〜＃〜] 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>

このコードを試してください...

詳細はこのリンク

（これらのクラスは使用できます）

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
3
Gautam Jha

@WebWeb、あなたはこの簡単な式を試すことができます：

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

})

基本的には、ウィンドウのスクロール位置が、ドキュメントの上部からオフセットされた要素の高さ（および要素の高さ）よりも高いかどうかをチェックしています。古くからある製法です。

ここでフィドルとデモ

あなたが私のように怠惰な人なら、あなたは waypoints.js 素晴らしいライブラリに行くことができます。

3
Alexander Solonik

あなたは試すことができます 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>
2
Usman Arshad
$(window).scroll(function(event) { 
if ($(".container").offset().top < $(window).scrollTop() + $(window).outerHeight()) {
$('.animation').addClass('triggerAnim');
} 
else {
$('.animation').removeClass('triggerAnim');
}
});
.animation {
 width: 50%; 
 float: left; 
 position: relative; 
/*I took out from here to pass it to .triggerAnim*/
 -webkit-animation-duration: 4s; 
 -webkit-animation-iteration-count: 3;
 -webkit-animation-fill-mode: forwards; 
/*I also took out from here (for the same purpose).*/
 animation-duration: 4s; 
 animation-iteration-count: 1; 
 animation-fill-mode: forwards; 
}
/*We also have to add the followings to call it "animation". Sure it could be "transition" too, but that won't be the thing.*/
@keyframes test{
  0%{
    opacity: 0;
    transform: scale(0.3) translate3d(0,0,0);
  }
  50%{
    opacity: 0.9;
    transform: scale(1.1);
  }
  80%{
    opacity: 1;
    transform: scale(0.89);
  }
  100%{
    opacity: 1;
    transform: scale(1) translate3d(0,0,0);
  }
}
 /*The most important part.*/  
 .triggerAnim{
 -webkit-animation-name: test;
  animation-name: test; 
 }
 /*To see things easier.*/
 .content-to-scroll{
 color: grey;
 } 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- the above is needed for the triggering to work -->

<div class="content-to-scroll"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat dolor vel quam consectetur, nec auctor metus faucibus. Integer suscipit urna et quam auctor efficitur. Donec luctus suscipit vestibulum. Nulla ultrices dapibus orci, id pharetra mauris tincidunt in. Proin ac luctus sem. Duis sit amet justo magna. Proin venenatis sapien urna, sit amet varius odio ullamcorper non. In viverra viverra dolor at venenatis. Morbi justo ex, feugiat facilisis quam id, tincidunt ullamcorper magna. Cras convallis elit in consectetur auctor. Sed gravida quam ac ornare vehicula. Pellentesque nec metus vitae purus blandit fringilla.

Nulla sem felis, dignissim at diam in, ornare mollis turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel tellus id metus porttitor malesuada sit amet non velit. Vestibulum vehicula et leo a pulvinar. Maecenas tristique convallis efficitur. Nam sed euismod eros. Cras pretium molestie laoreet. Suspendisse at placerat sem. Duis in magna eu mauris pharetra sagittis. Integer ac sem eleifend, dictum lorem at, faucibus sem. Integer efficitur sapien nunc, nec luctus dolor maximus interdum. Proin finibus odio eget orci mattis, vehicula tincidunt tortor imperdiet.

Cras suscipit sapien nisl, sit amet mattis nulla lobortis eu. In hac habitasse platea dictumst. Vestibulum hendrerit quis dui bibendum lobortis. Pellentesque eget sapien lorem. Vivamus nunc elit, laoreet vitae tortor non, mattis cursus enim. Phasellus vehicula facilisis ante id suscipit. Donec tempus, neque vitae placerat vestibulum, eros tortor malesuada libero, vitae hendrerit nibh tortor sed dolor. In suscipit tincidunt felis quis fermentum. Curabitur at ultricies purus, ac ultricies leo. Quisque accumsan augue ac tortor fringilla, volutpat facilisis ligula bibendum. Curabitur velit justo, ultricies eget lectus id, mattis convallis erat. Morbi vitae elit ut leo fringilla faucibus in ut neque. Proin vulputate magna massa, ut tristique orci ultrices sed.

Mauris at volutpat nunc, at tristique augue. Curabitur ac consequat eros. Nullam volutpat vulputate velit eu semper. Morbi bibendum turpis nisl, laoreet tincidunt turpis eleifend sed. Cras maximus ante eu est aliquam gravida. Morbi consectetur porta auctor. Mauris lobortis consequat lorem, tincidunt ultricies elit varius eget. Integer efficitur non purus sit amet condimentum. Morbi sodales metus eu aliquet ullamcorper. Pellentesque at mollis ligula, a consequat justo. Ut aliquet mollis mi quis feugiat. Vivamus iaculis, lorem id feugiat mattis, leo felis ultricies tortor, et scelerisque nisi ligula a metus. Duis tincidunt, mi id faucibus rhoncus, nibh urna fringilla sapien, ac faucibus neque justo eget odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras sit amet molestie sem. Maecenas sed laoreet elit, in blandit sem.

Morbi venenatis porttitor consequat. Maecenas sodales arcu non neque ullamcorper, et facilisis diam auctor. Nulla lobortis, dui sed viverra venenatis, nisi sapien cursus ante, ac egestas tortor erat et justo. Quisque vel scelerisque diam. Maecenas ac lectus et odio suscipit aliquet quis a metus. In augue purus, rhoncus eu facilisis quis, pretium et risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dictum et nisi vel blandit. Fusce nec metus nec lorem imperdiet pharetra at eu enim. Curabitur mattis, nunc quis sagittis ornare, tortor ipsum dapibus lectus, a sagittis tortor ligula eu arcu. Duis quis velit non sem congue sollicitudin vitae a nunc. In vitae ligula eleifend erat fringilla egestas. Aliquam feugiat eleifend elit, sed blandit erat eleifend faucibus. Etiam et mattis justo, eget tempor neque. Donec ac euismod diam. Sed maximus in justo quis pellentesque. 
</div>
<div class="container">

<div class="animation">

Content goes here...

</div>

</div>
<div class="content-to-scroll"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat dolor vel quam consectetur, nec auctor metus faucibus. Integer suscipit urna et quam auctor efficitur. Donec luctus suscipit vestibulum. Nulla ultrices dapibus orci, id pharetra mauris tincidunt in. Proin ac luctus sem. Duis sit amet justo magna. Proin venenatis sapien urna, sit amet varius odio ullamcorper non. In viverra viverra dolor at venenatis. Morbi justo ex, feugiat facilisis quam id, tincidunt ullamcorper magna. Cras convallis elit in consectetur auctor. Sed gravida quam ac ornare vehicula. Pellentesque nec metus vitae purus blandit fringilla.

Nulla sem felis, dignissim at diam in, ornare mollis turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel tellus id metus porttitor malesuada sit amet non velit. Vestibulum vehicula et leo a pulvinar. Maecenas tristique convallis efficitur. Nam sed euismod eros. Cras pretium molestie laoreet. Suspendisse at placerat sem. Duis in magna eu mauris pharetra sagittis. Integer ac sem eleifend, dictum lorem at, faucibus sem. Integer efficitur sapien nunc, nec luctus dolor maximus interdum. Proin finibus odio eget orci mattis, vehicula tincidunt tortor imperdiet.

Cras suscipit sapien nisl, sit amet mattis nulla lobortis eu. In hac habitasse platea dictumst. Vestibulum hendrerit quis dui bibendum lobortis. Pellentesque eget sapien lorem. Vivamus nunc elit, laoreet vitae tortor non, mattis cursus enim. Phasellus vehicula facilisis ante id suscipit. Donec tempus, neque vitae placerat vestibulum, eros tortor malesuada libero, vitae hendrerit nibh tortor sed dolor. In suscipit tincidunt felis quis fermentum. Curabitur at ultricies purus, ac ultricies leo. Quisque accumsan augue ac tortor fringilla, volutpat facilisis ligula bibendum. Curabitur velit justo, ultricies eget lectus id, mattis convallis erat. Morbi vitae elit ut leo fringilla faucibus in ut neque. Proin vulputate magna massa, ut tristique orci ultrices sed.

Mauris at volutpat nunc, at tristique augue. Curabitur ac consequat eros. Nullam volutpat vulputate velit eu semper. Morbi bibendum turpis nisl, laoreet tincidunt turpis eleifend sed. Cras maximus ante eu est aliquam gravida. Morbi consectetur porta auctor. Mauris lobortis consequat lorem, tincidunt ultricies elit varius eget. Integer efficitur non purus sit amet condimentum. Morbi sodales metus eu aliquet ullamcorper. Pellentesque at mollis ligula, a consequat justo. Ut aliquet mollis mi quis feugiat. Vivamus iaculis, lorem id feugiat mattis, leo felis ultricies tortor, et scelerisque nisi ligula a metus. Duis tincidunt, mi id faucibus rhoncus, nibh urna fringilla sapien, ac faucibus neque justo eget odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras sit amet molestie sem. Maecenas sed laoreet elit, in blandit sem.

Morbi venenatis porttitor consequat. Maecenas sodales arcu non neque ullamcorper, et facilisis diam auctor. Nulla lobortis, dui sed viverra venenatis, nisi sapien cursus ante, ac egestas tortor erat et justo. Quisque vel scelerisque diam. Maecenas ac lectus et odio suscipit aliquet quis a metus. In augue purus, rhoncus eu facilisis quis, pretium et risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dictum et nisi vel blandit. Fusce nec metus nec lorem imperdiet pharetra at eu enim. Curabitur mattis, nunc quis sagittis ornare, tortor ipsum dapibus lectus, a sagittis tortor ligula eu arcu. Duis quis velit non sem congue sollicitudin vitae a nunc. In vitae ligula eleifend erat fringilla egestas. Aliquam feugiat eleifend elit, sed blandit erat eleifend faucibus. Etiam et mattis justo, eget tempor neque. Donec ac euismod diam. Sed maximus in justo quis pellentesque. 
</div>
0
Sándor Zuboly

ページを開いたときに実行するアニメーションにこれを使用したい人がいる場合は、ページをホバーし、スクロールしたときに再度実行し、後ろにスクロールしたときに実行します、ここに私がそれを解決した方法があります。

@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
0
Hassen Ch.