[Mohammad.MTZمشارکت کننده]

سلام
خسته نباشید
ببخشید به تازگی قالب هایی طراحی میشن که با پایین اومدن اسکرول بخش های سایت به صورت fade ظاهر میشن
مثل این:
http://demo.hamyarwp.com/free/accesspress-mag/

نحوه ی کد نویسی این سایت ها به چه صورته؟
این ویژگی در CSS اعمال میشه؟
ممنون

[سعید شعبانیسرپرست کل]

درود, در این قالب های از ترکیب جاوا اسکریپت و css برای اعمال افکت هایی در زمان اسکرول صفحه روی بخش های مختلف قالب استفاده می شود. از جاوا اسکریپت اغلب اوقات برای تشخیص یا پیش بینی زمان ظاهر شدن یک المان و ردیابی موقعیت اون المان استفاده می شود و با css انیمیشن های جذاب به المان ها اضافه می شود. به صورت دستی میشه چنین افکت هایی را به قالب داد ولی یکم وقت گیر هست و باید از صفر همه چیز رو خودتون برنامه نویسی و کدنویسی کنید. یک سری فریم ورک هایی دقیقا برای همین کار طراحی و ساخته شدند که کار را خیلی ساده می کنند. فریم ورک WOW.js و Animate.css یکی از دو framework خوب برای این کار هستند.

[Mohammad.MTZمشارکت کننده]

نحوه ی استفاده از این فریم ورکها ساده است؟

[سعید شعبانیسرپرست کل]

بله خیلی آسون هست. مثلا برای استفاده از woo.js باید مراحل زیر را طی کنید:

1- فایل Animate.css و wow.min.js را در هدر قرار بدید.

2- کد زیر را بعد از کدهای فراخوانی دو فایل Animate.css و wow.min.js قرار بدید.

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

3- اضافه کردن کلاس wow به المان هایی که می خواهید قبل از رسیدن اسکرول صفحه به اونها پنهان باشند و با رسیدن اسکرول صفحه دیده شوند.

4- اضافه کردن نوع افکت اون المان با استفاده از کلاس های bounceInUp, fadeIn, fadeInLeftBig و …

به همین راحتی. البته تنظیمات دیگه هم داره که می تونید در صفحه مستندات این framework ببینید.

[Mohammad.MTZمشارکت کننده]

بسیار سپاسگذارم.
اگر به مشکلی بر خوردم همینجا عنوان میکنم.
ممنون 🙂

[سعید شعبانیسرپرست کل]

در خدمتم

[نویسنده]

نوشته ها