اجرای انیمیشن css با حرکت اسکرول

آموزش حفظ حالت انیمیشنی عناصر که تا زمان رسیدن اسکرول به آن فعال نمیشود

حتما تا به حال با صفحاتی مواجه شده اید که وقتی به قسمتی از آن ها می رسید ، جلوه های جالبی نمایش داده می شود. حالا این نمایش هم می تواند به صورت ساده باشد و یا با انیمیشن خاصی از css. همراه باشد.

استفاده از افزونه هایی مانند wow فقط حالت انیمیشنی مخصوص به خود را دارد و بطور مثال اگر یک div با کلاس wow bounceInLeft باشد در که انتهای صفحه قرار دارد و کاربر با لود آن صفحه و تا زمانی که به div مورد نظر برسد انیمیشن های داخل div از قبل اجرا شده و کاربر آن را نمیبیند و صرفا خود div بصورت انیمیشنی wow bounceInLeft نمایش داده میشود.

استفاده از این حرکات انیمیشنی میتونه خیلی مفید باشه برای جلب توجه کاربران خود...

طرز کار این اسکریپت به این صورت است که هنگامی که صفحه تا حدی پایین می آید که یکی از اشیا صفحه که از قبل مشخص شده است دارای انیمیشنی است که میخواهیم اجرا شود.

نسخه اصلی این اسکریپت به صورت زیر است:

باید در داخل تگ <body></body> و در انتهای آن باشد.

<script>
addAnimationData('#lp-pom-image-126','bounceIn','1000');
//addAnimationData('#your-next-element','bounceIn','2000');

function addAnimationData(elem, elemData, elemTimeout) {
  $(elem).addClass("revealOnScroll").attr("data-animation",elemData).attr("data-timeout",elemTimeout);
}
$(function() {
  var $window           = $(window),
      win_height_padded = $window.height() * 1.1,
      isTouch           = Modernizr.touch;
  if (isTouch) { $('.revealOnScroll').addClass('animated'); }
  $window.on('scroll', revealOnScroll);
  function revealOnScroll() {
    var scrolled = $window.scrollTop(),
        win_height_padded = $window.height() * 1.1;
    // Showed...
    $(".revealOnScroll:not(.animated)").each(function () {
      var $this     = $(this),
          offsetTop = $this.offset().top;
      if (scrolled + win_height_padded > offsetTop) {
        if ($this.data('timeout')) {
          window.setTimeout(function(){
            $this.addClass('animated ' + $this.data('animation'));
          }, parseInt($this.data('timeout'),10));
        } else {
          $this.addClass('animated ' + $this.data('animation'));
        }
      }
    });
    // Hidden...
   $(".revealOnScroll.animated").each(function (index) {
      var $this     = $(this),
          offsetTop = $this.offset().top;
      if (scrolled + win_height_padded < offsetTop) {
        //add additional animate.css animations to the removeClass function
        $(this).removeClass('animated fadeInUp flipInX lightSpeedIn bounceIn slideInLeft slideInRight fadeInLeft fadeInRight')
      }
    });
  }
  revealOnScroll();
});
</script>

نحوه فراخوانی آن:

    <div data-animation="animation" data-timeout="2000" class="revealOnScroll">
        محتوایی که می خواهید نمایش داده شود ...
    </div>

در بالا از تگ div استفاده کرده ایم ،ولی می توانید در هر تگ دیگری هم استفاده کنید. فقط نکته این است که باید class برابر با revealOnScroll باشد و میتواند شامل class های دیگر برای استایل دهی نیز شود .

قسمت قرمز رنگ ، نام کلاسی است که انیمیشنی برای آن مشخص شده است.

قسمت نارنجی رنگ ، مشخص کننده ی زمانی است که باید طول بکشد تا انیمیشن شروع به اجرا شدن بکند. (بر حسب میلی ثانیه)

قسمت سبز رنگ ، این قسمت نمایانگر تمام اشایی است که باید بعد از رسیدن اسکرول به آن ها نمایش داده شوند و حتما شامل revealOnScroll نیز باید باشد.

این اسکریپت به موارد زیر احتیاج دارد:

1- modernizr.js میتوانید در بخش پایینی body قرار دهید

2- آخرین نسخه jquery یا +2.1.0 میتوانید در بخش head قرار دهید

منبع رویکت