ظاهر شدن عناصر صفحه هنگام اسکرول
دسته‌ها : گرافیک, وکتور سه شنبه, بهمن ۱۳, ۱۳۹۴ admin دیدگاه ها3

css3animation-banner

یکی از پرطرفدار ترین افکت هایی که امروزه در صفحات وب پیاده میشه، ظاهر شدن عناصر به هنگام اسکرول صفحه هست. در این مقاله میخوام نحوه ی پیاده سازی این افکت ها در صفحه ی وب رو خدمتتون آموزش بدم.

کار بسیار بسیار ساده ای هست، کافیه یک css و یک js رو در صفحتون لود کنید و به هر عنصر یک کلاس خاص اختصاص بدید.

آماده اید تا یک پروژه ی کوچیک و باهم انجام بدیم؟

خوب ابتدا فایل های مورد نیاز رو از این لینک دانلود کنید.

در پوشه ای که دانلود کردید دو تا فایل وجود داره، animate.css و wow.js. این فایل رو همراه با پوشه های css و js در پوشه ی اصلی خودتون کپی کنید. ساختار ما به شکل زیر خواهد بود:

۱

animate.css افکت های خاصی رو در عناصر بوجود میاره، wow.js عناصر رو پنهان میکنه تا زمانی که صفحه در ابتدا لود شد و یا اسکرول خورد با افکتی که animate.css به اونها میده ظاهر بشن.

 

خوب از html شروع میکنیم. یک صفحه ایجاد کنید و نام این صفحه رو index.html قرار بدید.

فایل animate.css رو در عنصر head و فایل wow.js رو انتهای صفحه فراخوانی کنید:

<!DOCTYPE html>

<html>

   <head>

       <title>Iranweblearn.com - animate.css</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">

   </head>

   <body>

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

            <script>

            new WOW().init();

          </script>

  </body>

</html>

از کد زیر استفاده کردیم تا روی تمامی عناصر موجود در صفحه wow.js اعمال بشه:

<script>

            new WOW().init();

</script>

تا اینجا شما ۸۰ درصد راه رو اومدید، برای تکمیل راهتون باید به عناصرتون کلاس های خاص اختصاص بدید. حالا یک باکس در نظر میگیریم که قراره با افکت در صفحه ظاهر بشه. چون ابتدای صفحه قرار داره بدون اسکرول با افکت نمایان میشه. اگر تعداد عناصر بیشتر باشه و مجبور باشیم با اسکرول اونهارو ببینیم، عناصر پنهان میشن و هنگامی که اسکرول به پایین حرکت کرد عناصر تک به تک با افکت ظاهر میشن.

باکسی که مد نظرمون هست رو به شکل زیر ایجاد میکنیم:

<div> iranweblearn.com </div>

یک DIV کاملا ساده ، حالا با css اون رو تبدیل به یک باکس آبی رنگ میکنیم:

div{margin: 60px 0; width: 200px; height: 300px; padding: 25px; color: #fff; background-color: #4484F1;}

اگر خاطرتون باشه گفتم wow.js برای این منظور در نظر گرفته شده که عنصر رو پنهان کنه و با افکت اون رو نمایش بده پس کلاس wow رو به همه ی عناصر اختصاص بدید:

<div class="wow"> Iranweblearn.com </div>

برا اعمال افکت شما میتونید یکی از افکت های animate.css رو به عنصر اختصاص بدید.

برای مشاهده لیست کامل افکت ها با دموی آنلاین به این لینک مراجعه کنید.

خوب با توجه به افکت هایی که دیدید، ما میخوایم باکسمون از سمت چپ به راست نمایان بشه پس از bounceInLeft استفاده میکنیم:

<div class="wow bounceInLeft"> Iranweblearn.com </div>

تا اینجا عنصر ما پنهان هست و زمانی که صفحه لود میشه با افکت bounceInLeft ظاهر میشه و اگر به اسکرول نیاز باشه با اسکرول صفحه ظاهر میشه.

علاوه بر این کلاس ها شما میتونید خصوصیاتی رو برای عنصرتون در نظر بگیرید، این خصوصیات شامل موارد زیر میشه:

data-wow-duration: این خاصیت مدت زمان اجرای افکت رو مشخص میکنه مثلا افکت عنصر طی ۰.۲ ثانیه اجرا بشه.

data-wow-delay: این خاصیت مدت زمان تاخیر در اجرای افکت رو مشخص میکنه، مثلا بعد از ۰.۵ ثانیه یا بعد از ۱ ثانیه افکت اجرا بشه.

data-wow-iteration: این خاصیت تعداد دفعات تکرار افکت رو مشخص میکنه، مثلا عنصر ۲ بار پنهان بشه و با افکت ظاهر بشه.

data-wow-offset : این خصوصیت رو با مثال خدمتتون توضیح میدم. فرض کنید این خصوصیت رو به عنصرتون اختصاص دادید؛ مرورگر شما ۹۰۰ پیکسل ارتفاع داره، برای این خصوصیت مقدار ۸۵۰ رو در نظر میگیرید، ۸۵۰ پیکسل از پایین مرورگر شما محاسبه میکنه تا بالا، ۵۰ پیکسل میمونه تا ارتفاع مرورگر شمارو پر کنه. عنصر نمایش داده نمیشه تا زمانی که اسکرول ۵۰ پیکسل به طرف پایین کشیده بشه یعنی ۵۰ پیکسل به سمت پایین طی کنه. بعد از این عنصر شما با افکت مورد نظر نمایش داده میشه.

پس این خاصیت هارو هم به باکسمون اضافه میکنیم:

<div data-wow-iteration="1" data-wow-delay="0.3s" data-wow-duration="0.9s" class="wow bounceInLeft"> Iranweblearn.com </div >

حالا باکس ما در زمان لود صفحه با افکت نمایان میشه، هرچقدر تعداد باکس هارو بیشتر کنید با اسکرول صفحه زیبایی افکت ها بیشتر مشخص میشه.

میتونید پروژه ی کامل این آموزش رو در انتهای مطلب دانلود کنید و بررسی کنید.

امیدوارم که این آموزش مورد پسندتون قرار گرفته باشه.

موفق و پاینده باشید.

 

منبع این مطلب : مدرسه مجازی ایرانیان

 

دانلود فایل با لینک مستقیم

 

 

امیر رضائی وبسایت


عاشق طراحی وب و گرافیک هستم بیشتر اوقاتم در روز رو پای کامپیوتر به کد نویسی و طراحی سایت و تولید محتوا برای این سایت می کنم.وردپرس رو خیلی دوست دارم چندین بار هم سعی کردم با مدیریت های دیگه هم کار کنم ولی باز هم وردپرس رو ترجیح دادم.

مطالب مشابه با این موضوع

2 پاسخ برای “ظاهر شدن عناصر صفحه هنگام اسکرول

بالا رفتن