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
این خصوصیت را به عنصری که اختصاص دادید، مرورگر شما ۹۰۰ پیکسل ارتفاع داره، برای این خصوصیت مقدار ۸۵۰ رو در نظر میگیرید، ۸۵۰ پیکسل از پایین مرورگر شما محاسبه میکنه تا بالا، ۵۰ پیکسل می ماند تا ارتفاع مرورگر شما رو پر کند. عنصر نمایش داده نمی شود تا زمانی که اسکرول ۵۰ پیکسل به طرف پایین کشیده بشه یعنی ۵۰ پیکسل به سمت پایین طی کند. بعد از این عنصر شما با افکت مورد نظر نمایش داده می شود.
این مطلب را به اشتراک بگذارید...
نظر / سوال