loading...

ابزارها قالب

هنگامی که صفحه تا حدی پایین می آید که یکی از اشیا صفحه مشخص شود ، انیمیشنی که مشخص کرده ایم اجرا می شود

تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
آخرین ارسال های انجمن
حمیدرضا بازدید : 4759 چهارشنبه 25 شهريور 1394 نظرات (3)

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

افزونه ی wow

اگر این نمونه را ببینید منظور من را به خوبی می فهمید. خب! شروع می کنیم. اول یک کد html را می نویسیم.

برای دیدن خروجی کد های خود می توانید از این ابزار استفاده کنید

کد های html

<<<code>>>

<div data-animation="aCssClassName" data-timeout="400" class="showOnScroll">

    محتوایی که می خواهید نمایش داده شود ...

</div>

<<</code>>>

در بالا من از تگ div استفاده کرده ام. می توانید از هر تگ دیگری هم استفاده کنید. فقط نکته این است که باید class برابر با showOnScroll یا هر نام اختیاری دیگری که می خواهید باشد.

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

قسمت آبی رنگ ، مشخص کننده ی زمانی است که باید طول بکشد تا انیمیشن شروع به اجرا شدن بکند. (بر حسب میلی ثانیه)

قسمت سبز رنگ ، این قسمت نمایانگر تمام اشایی است که باید بعد از رسیدن اسکرول به آن ها نمایش داده شوند.

کد های جاوا اسکریپت و جی کوئری

حتما ما برای این که بتوانیم انیمیشن ها را در زمان رسیدن صفحه به آن ها اجرا کنیم ، نیاز به جاوا اسکریپت و جی کوئری داریم.

<<<code>>>

var $window = $(window) ,

    winHeighPadded = $window.height() * 1.1; // تعریف متغیر های اولیه

$window.on('scroll', revealOnScroll); // مشخص کردن رویداد

function revealOnScroll() // تابعی که هنگام حرکت اسکرول اجرا می شود

{

   var scrolled = $window.scrollTop()

   $(".showOnScroll:not(.animated)").each(function () {

      var $this = $(this) ,

          offsetTop = $this.offset().top;

      if (scrolled + winHeightPadded > offsetTop) {

         if ($this.data('timeout')) { // آیا data-timeout هست

            window.setTimeout(function(){

            $this.addClass('animated ' + $this.data('animation'));

         }, parseInt($this.data('timeout'),10));

      } else {

         $this.addClass('animated ' + $this.data('animation'));

      }

   }

});

<<</code>>>

برای به دست آوردن اطلاعاتی در مورد رویداد ها در جاوا اسکریپت این مطلب را مطالعه کنید. رویداد های جاوا اسکریپت و جی کوئری تماما یکی هستند و فقط در طرز استفاده با هم متفاوت اند.

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

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

متد data در جی کوئری

با استفاده از این متد می توان ، صفت های اختیاری ای که دوست دارید در تگ خود داشته باشید را دریافت کنید. این صفت ها باید با data- شروع شوند. مثل data-animation و data-timeout

با استفاده از متد data که بعد از شی جی کوئری می آید می توان به این شکل صفتی را دریافت کرد:

<<<code>>>

$('anElement').data( 'timeout' ); // get data-timeout attribute

<<</code>>>

قسمت قرمز رنگ مقداری اختیاری است که می توانید در صفت شی مورد نظر مشخص کنید.

 

با وارد کردن کد های بالا در صفحه ، هنگامی که اسکرول صفحه توسط کاربر پایین بیاید و به شی مورد نظر برسد ، نام یک کلاس Css (مقدار صفت data-animation) به همراه نام کلاس animated به شی اضافه می شود. این کلاس باعث اجرای انیمیشنی روی شی می شود. همچنین این کار می تواند با وقفه صورت گیرد. این وقفه با مقدار data-timeout قابل تعیین است.

 

اگر سوالی در مورد این موضوع دارید در بخش نظرات بپرسید. حداکثر بعد از 12ساعت جواب میدم.

امیدوارم این مطلب به دردتون خورده باشه. قلب

مطالب مرتبط
ارسال نظر برای این مطلب
این نظر توسط nasim در تاریخ 6 سال پیش و 23:15 دقیقه ارسال شده است

سلام واسه انیمیت این wow چه فرقی میکنه با اینکه مستقیما از کلاسای animate.css استفاده کنی؟
پاسخ : سلام
animate.css مجموعه ای از انیمیشن هاست که با css نوشته شده. برای استفاده از اون ها باید نام کلاس مربوط به هر انیمیشن رو به یک عنصر در صفحه بدید تا انیمیشن روی اون اجرا بشه. اما با این کار و بدون استفاده از جاوا اسکریپت انیمیشن در زمانی که شما می خواید اجرا نمیشه. شما اگر بخواید می تونید خودتون رویدادی که دوست دارید رو برای انیمیشن ها با استفاده از جاوا اسکریپت ایجاد کنید. (مثلا موقع کلیک یا ...) من توی این مطلب رویداد رسیدن اسکرول رو گذاشتم.
animate.css بخشی از افزونه ی wow هستش. حالا اگر شما بخواید به طور کامل به این افزونه آشنا بشید و با کد های جاوا اسکریپت اون هم کار کنید می تونید از سایت افزونه استفاده کنید. من توی این مطلب فقط در حد نیاز و خیلی مختصر توضیح دادم و خودم به جای کد های خیلی زیاد افزونه ی wow فقط تابع revealOnScroll رو به عنوان رویداد نوشتم تا کد ، مخصوص رویداد اسکرول بشه.

این نظر توسط inarch در تاریخ 7 سال پیش و 16:26 دقیقه ارسال شده است

سلام خیلی دنبالش بودم .توضیحاتتنون خیلی خوب و کامل بود . ممنون

این نظر توسط رقــــیـــه یـــون در تاریخ 7 سال پیش و 16:10 دقیقه ارسال شده است

سلام.
این مطلب با مطلب (http://www.toolstheme.ir/post/170/%D8%A7%D9%81%D8%B2%D9%88%D9%86%D9%87-%DB%8C-wow/) چه فرقی داره؟
من این مطلب رو نخوندم، چون فکر میکنم مثل قبلی میمونه و تنها فرقش فکر کنم توی اینه که این مطلب با css هست و اون یکی مطلب با javascript.
درسته؟
پاسخ : سلام
نه دوتاش دقیقا یک چیزه. تنها فرق اینه که مطلبی که آدرسش رو گذاشتی این کار رو با استفاده از یک افزونه یاد داده تا راحت تر و کامل تر باشه ولی اون یکی بدون افزونه آموزش داده.


نام
ایمیل (منتشر نمی‌شود)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B :S
کد امنیتی
رفرش
کد امنیتی
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
ابزارهای خاص
جعبه ی پیوند لینک کوتاه کن رایگان ارزیابی آنلاین سایت و وبلاگ به صورت رایگان
تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
تبلیغات متنی
درباره ما
لوگوی ابزارها قالب
سایت ابزارها قالب برای خاص بودن آفریده شده است. به امید این که خاص ترین باشیم.
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • تبلیغات
    تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده

    آمار سایت
  • کل مطالب : 215
  • کل نظرات : 269
  • افراد آنلاین : 1
  • تعداد اعضا : 3183
  • آی پی امروز : 62
  • آی پی دیروز : 61
  • بازدید امروز : 185
  • باردید دیروز : 125
  • گوگل امروز : 9
  • گوگل دیروز : 7
  • بازدید هفته : 703
  • بازدید ماه : 8,566
  • بازدید سال : 63,573
  • بازدید کلی : 1,750,008
  • کدهای اختصاصی
    یادبود 175 شهید غواص
    یادبود 175 شهید غواص