لود شدن عناصر صفحه هنگام اسکرول کردن صفحه
0 0

لود شدن عناصر صفحه هنگام اسکرول کردن صفحه


لود شدن عناصر صفحه هنگام اسکرول کردن صفحه

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

ابتدا فایل های مورد نیاز رو از این لینک دانلود کنید.

در فایلی که دانلود کردید دو تا فایل وجود دارد،  animate.css و wow.js این فایل ها را به وب سایت خود اضافه کنید.

animate.css

 افکت های خاصی رو در عناصر ایجاد می کند و می توانید به دلخواه هر یک را روی عناصر اعمال کنید.

  wow.js

عناصر رو پنهان میکند تا زمانی که صفحه در ابتدا لود شود و یا با جابه جای اسکرول خود با افکتی که animate.css به عناصر می دهد ظاهر می شوند.

ما یک صفحه html ایجاد کردیم و کدهای آن به شکل زیر می باشد.


<!DOCTYPE html>
<html>
<head>
    <title>iranganj.ir</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="content">
        <div data-wow-iteration="1" data-wow-delay="0.3s" data-wow-duration="0.9s" class="wow bounceInDown"></div>
        <div data-wow-duration="0.9s" class="wow flipInY"></div>
        <div data-wow-duration="0.9s" class="wow bounceInLeft"></div>
        <div data-wow-duration="0.5s" class="wow swing"></div>
        <div data-wow-duration="0.8s" class="wow bounceInRight"></div>
        <div data-wow-duration="0.7s" class="wow rotateIn"></div>
        <div data-wow-duration="0.5s" class="wow fadeInLeft"></div>
        <div data-wow-duration="1s" class="wow fadeInRightBig"></div>
        <div data-wow-duration="0.8s" class="wow flipInX"></div>
    </div>
    <script type="text/javascript" src="js/wow.min.js"></script>
    <script type="text/javascript">
        new WOW().init();
    </script>
</body>
</html>

ابتدا animate.css را به  صفحه لینک کردیم و در انتها فایل  wow.js را قرار دادیم

کد زیر باعث اعمالwow.js  روی تمامی عناصر موجود در صفحه می شود

<script type="text/javascript">
  new WOW().init();
</script>

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

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

 data-wow-duration

این خاصیت مدت زمان اجرای افکت رو مشخص میکنه مثلا افکت عنصر طی ۰.۲ ثانیه اجرا شود.

data-wow-delay

 این خاصیت مدت زمان تاخیر در اجرای افکت رو مشخص می کند، مثلا بعد از ۰.۵ ثانیه یا بعد از ۱ ثانیه افکت اجرا شود.

data-wow-iteration

  این خاصیت تعداد دفعات تکرار افکت رو مشخص میکند، مثلا عنصر ۲ بار پنهان شود و با افکت ظاهر شود.

data-wow-offset

این خصوصیت را به عنصری که اختصاص دادید، مرورگر شما ۹۰۰ پیکسل ارتفاع داره، برای این خصوصیت مقدار ۸۵۰ رو در نظر میگیرید، ۸۵۰ پیکسل از پایین مرورگر شما محاسبه میکنه تا بالا، ۵۰ پیکسل می ماند تا ارتفاع مرورگر شما رو پر کند. عنصر نمایش داده نمی شود تا زمانی که اسکرول ۵۰ پیکسل به طرف پایین کشیده بشه یعنی ۵۰ پیکسل به سمت پایین طی کند. بعد از این عنصر شما با افکت مورد نظر نمایش داده می شود.

دانلود

نویسنده حسین فتحی
گروه مطلب Jquery
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۵ اسفند ۱۳۹۳
منبع ایران گنج
تعداد نظرات ۷
قیمت کاربران عضو سایت
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha
نظرات کاربران

  • یاهو

    سلام خسته نباشید چطور میتونم data-wow-duration='1s' data-wow-delay='2s' data-wow-offset='3s' data-wow-iteration='4s' رو توی جاوا اسکریپت تعریف کنم؟ میخوام بهشون مقدار بدم این کد رو نوشتم. نشد: y[i].style.wowdelay='.5'+'s';

    پاسخ
  • محمدرضا

    سلام ممنون عالی. به درصد چطوری عدد بدیم؟؟؟data-wow-offset جی کوئری بلد نیسم لطفا اموزششو بدین

    پاسخ
    • حسین فتحی

      سلام

      این موارد رو باید به صورت دستی محاسبه شود و بر حسب نیاز به کد اضافه شود

      پاسخ
  • محمد

    سلام

    خیلی عالی بود ممنون فقط یه data-wow-offset رو چه جوری استفاده کنیم اخه توی مثال شما نیستش data-wow-offset="760px" اینطوری زدم ج نداد با تشکر

    پاسخ
    • مدیر

      با سلام و درود

      نباید از px استفاده کنید فقط یک عدد برای آن وارد کنید

      <section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></section>

       

      پاسخ
      • محمد

        سلام نمیشه به درصد داد؟؟؟ اخه سایز مرور گرها فرق داره

        پاسخ
        • مدیر

          با سلام و درود

          برای این کار می توانید از جی کوئری استفاده کنید

          پاسخ