آموزش استفاده از Wow.JS و ایجاد افکت های جذاب در صفحات وب
وقتی در حال وبگردی هستید و سایتی رو باز می کنید، ممکنه با افکت های جالبی روبرو بشید که المان های صفحه به ترتیب و به صورت های مختلف روی صفحه ظاهر می شن، افکت های مثل ظاهر شدن المان ها، چرخیدن المان و ... نمونه این افکت ها رو می تونید در صفحه اصلی سایت توسینسو هم مشاهده کنید. اگر کار شما طراحی وب هست بوسیله پلاگین wow.js می تونید به راحتی این افکت ها رو به صفحاتتون اضافه کنید.
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
ابتدا از این لینک وارد صفحه git پلاگین wow.js بشید و از گزینه clone or download پکیج رو دانلود کنید. فایل animate.css رو هم از این لینک دانلود کنید. Animate CSS یک پکیج کلاس های CSS هست که افکت ها داخل این فایل تعریف شدن. در حقیقت wow.js قابلیتی رو به شما میده که با یکسری تنظیمات بتونید در زمان اسکرول کردن صفحه افکت ها رو اعمال کنید. بعد از دانلود wow.js داخل پوشه dist فایل wow.js.min رو به پروژتون اضافه کنید و همینطور استایل animate.css رو هم به بخش استایل ها اضافه کنید.ساختار صفحه html من به این صورت هست:
<!DOCTYPE html>
<head></head>
<html>
<head>
<title>Wow.js sample</title>
<link rel="stylesheet" href="css/animate.css" />
</head>
<body>
<script src="js/wow.min.js"></script>
</body>
</html>
تو قدم بعدی باید متد init رو برای wow.js فراخوانی کنیم. برای اینکار تگ script زیر رو به کد بالا اضافه می کنیم:
<script>
new WOW().init();
</script>
ساختار اصلی صفحه ما آماده هست. برای اضافه کردن المان ها به صفحه کافیه کلاس wow رو به المان مورد نظر اضافه کنیم:
<div class="wow">
Content to show on scroll
</div>
المان بالا، تا زمان رسیدن ScrollBar مخفی هست و بعد از رسیدن اسکرول نمایش داده میشه. کد بالا ساده ترین حالت استفاده هست. شما می تونید افکت های مورد نظرتون رو بوسیله کلاس های CSS اضافه کنید. برای مثال bounceInUp رو اضافه کنید افکت bounce از بالا به المان اضافه میشه:
<div class="wow bounceInUp">
Content to show
</div>
تا اینجا نحوه استفاده از wow.js رو یاد گرفتیم. موضوع بعدی تنظیماتی هست که میشه به المان ها داد. این تنظیمات بوسیله Attribute های html به المان اضافه میشه. لیست تنظیمات مورد استفاده به صورت زیر هست:
- data-wow-duration: مدت زمان اجرای افکت
- data-wow-delay: تاخیر قبل از اجرای افکت بعد از اسکرول شدن
- data-wow-offset: فاصله المان از پایین مرورگر جهت اجرای افکت
- data-wow-iteration: تعداد دفعاتی که افکت می تواند تکرار شود
برای مثال، فرض کنید سه المان در کنار هم داریم و میخواییم افکت مورد نظر به ترتیب و با فاصله اجرا شود. برای اینکار المان ها رو به صورت زیر تعریف م کنیم:
<div class="wow bounceInUp" data-wow-delay="1s" data-wow-duration="1s">
Box 1
</div>
<div class="wow bounceInUp" data-wow-delay="2s" data-wow-duration="1s">
Box 2
</div>
<div class="wow bounceInUp" data-wow-delay="3s" data-wow-duration="1s">
Box 2
</div>
افکت المان اول با فاصله 1 ثانیه، المان دوم دو ثانیه و المان سوم سه ثانیه اجرا می شود و اجرای هر افکت 1 ثانیه زمان میبرد.