آموزش ایجاد افکت در هنگام لود و اسکرول سایت + ویدیو

آموزش ایجاد افکت در هنگام لود و اسکرول سایت + ویدیو

آموزش ایجاد افکت در هنگام لود و اسکرول سایت

آموزش ایجاد افکت در هنگام لود و اسکرول سایت

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

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

پس از دانلود این دو کتابخانه بایستی این دو را به صفحه قالبتان لینک بدهید که می توانید از لینک های زیر استفاده نمایید

لینک افزودنه کتابخانه animate.css

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

لینک افزودن کتابخانه wow.js و فعال کردن آن

 

              <script src="js/wow.min.js"></script>
              <script>
              new WOW().init();
              </script>

پس از این بایستی برای هر تگی که می خواهید از کتابخانه wow.js بهره ببرند کلاسی را تهت نام wow تعریف نمایید

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

حالا باید نام انیمیشن را بعد از کلاس wow مانند کد زیر درج نمایید.

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

تا اینجا توانستیم از انیمیشن ها در صفحه سایتمون استفاده کنیم و با اسکرول کردن آنها را به حالت اجرا در بیاوریم

حال می توانیم با استفاده از صفت هایی کار خود را حرفه ای تر کنیم که این صفات و attribute شامل موارد زیر میشود:

data-wow-duration: مدت زمان اجرا انیمیشن را مشخص می کند.

data-wow-delay: مدت زمان تاخیر در اجرا را مشخص می کند.

data-wow-iteration: تعداد دفعات تکرار انیمیشن را مشخص می کند.

data-wow-offset: این خاصیت مقدار اسکرول را مشخص می کند ، به طور پیش فرض به عنصری که
در آن از animate ها استفاده کرده ایم (تصاویر، نوشته و …) برسیم ، انیمیشن استفاده شده نمایان میشود.

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

برای مثال اگر 200 پیکسل را برای این صفت در نظر بگیریم ، می توانیم با گذشتن 200 پیکسل
از آن عنصر ،آن عنصر را با انیمیشن نمایش دهیم

توجه:در زمان مقدار دهی این صفت بایستی فقط از عدد استفاده نماییم و از به کاربردن px خودداری نماییم.

                    
                    <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>

 

آموزش ایجاد افکت در هنگام لود و اسکرول سایت

 

 

سعید شوق علی

لیسانس مهندسی نرم افزار - علاقه مند به زبان های برنامه نویسی تحت وب و کارهای گرافیکی

مطالب مرتبط

دیدگاهها

نظر: