تالار گفتگوی مشاغل برتر
خوش آمدید! برای فعال سازی امکانات لطفا ورود یا ثبت نام.

توجه

Icon
Error

nooshin88 Offline
#1 ارسال شده : 1396/01/20 09:01:06 ق.ظ
nooshin88

رتبه: Advanced Member

گروه ها: Registered
ارسالها: 92

تشکرها: 1 بار


شاید برایتان جالب باشد که بدانید چگونه می توان یک یا چند تگ HTML را با انیمیشن های متفاوت در صفحه وب ظاهر کرد؟ در این مقاله قصد داریم پلاگین wow را به شما معرفی کنیم.

زمانی که صفحه وب را باز نمایید محتوای صفحه به صورت پیش فرض نامرئی (opacity=0) هستند و هنگام اسکرول صفحه وب, محتوا با انیمیشن خاصی ظاهر می شود که این انیمیشن مربوط به css می‌باشد. همچنین شما می‌توانید به آسانی تنظیمات آن را تغییر دهید.

مزایا:


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

دمو آنلاین


راهنمای نصب wow:

1-لینک css

کد:

<link rel="stylesheet" href="/css/animate.css">


2-لینک js

کد:

<script src="/js/wow.min.js"></script>


3-قرار دادن کد زیر در فایل js

کد:

<script>
new WOW().init();
</script>


4-کلاس wow به المان مورد نظر

کد:

<div class="wow">
Content to Reveal Here
</div>


5-انتخاب استایل css


کد:

<div class="wow bounceInUp">

محتوا اینجا قرار می‌گیرد
کد:

</div>

موارد دیگر:

data-wow-duration: مدت زمان انیمیشن
data-wow-delay:تاخیر انیمیشن
data-wow-iteration:تعداد دفعات تکرار انیمیشن
data-wow-offset:فاصله شروع انیمیشن تا المان مورد نظر
کد:


<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
<section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></section>


سفارشی سازی انیمیشن:

boxClass:نام کلاس
animateClass:نام کلاس برای انیمیشن ها
mobile: فعال یا غیر فعال نمودن پلاگین در دستگاه موبایل
live:تیک کردن المان های جدید
کد:

wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default
}
)
wow.init();

منبع: انیمیشن در صفحات وب ستروکیت
تبلیغات
صفحات اختصاصي مرتبط با اين پست
کاربرانی که در حال مشاهده تالار هستند
Guest
جهش به تالار  
شما مجاز به ارسال مطلب در این تالار نمی باشید.
شما مجاز به ارسال پاسخ در این تالار نمی باشید.
شما مجاز به حذف مطلب ارسالی خود در این تالار نمی باشید.
شما مجاز به ویرایش مطلب ارسالی خود در این تالار نمی باشید.
شما مجاز به ایجاد نظر سنجی در این تالار نمی باشید.
شما مجاز به رای دادن در این تالار نمی باشید.


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