وقتی در حال وبگردی هستید و سایتی رو باز می کنید، ممکنه با افکت های جالبی روبرو بشید که المان های صفحه به ترتیب و به صورت های مختلف روی صفحه ظاهر می شن، افکت های مثل ظاهر شدن المان ها، چرخیدن المان و ... نمونه این افکت ها رو می تونید در صفحه اصلی سایت توسینسو هم مشاهده کنید. اگر کار شما طراحی وب هست بوسیله پلاگین 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 به المان اضافه میشه. لیست تنظیمات مورد استفاده به صورت زیر هست:
برای مثال، فرض کنید سه المان در کنار هم داریم و میخواییم افکت مورد نظر به ترتیب و با فاصله اجرا شود. برای اینکار المان ها رو به صورت زیر تعریف م کنیم:
<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 ثانیه زمان میبرد.
بنیانگذار توسینسو و برنامه نویس و توسعه دهنده ارشد وب
حسین احمدی ، بنیانگذار TOSINSO ، توسعه دهنده وب و برنامه نویس ، بیش از 12 سال سابقه فعالیت حرفه ای در سطح کلان ، مشاور ، مدیر پروژه و مدرس نهادهای مالی و اعتباری ، تخصص در پلتفرم دات نت و زبان سی شارپ ، طراحی و توسعه وب ، امنیت نرم افزار ، تحلیل سیستم های اطلاعاتی و داده کاوی ...
زمان پاسخ گویی روز های شنبه الی چهارشنبه ساعت 9 الی 18
فقط به موضوعات مربوط به محصولات آموزشی و فروش پاسخ داده می شود