آموزش طراحی وب

ظاهر شدن عناصر صفحه هنگام اسکرول

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

css3 animation

سلام خدمت همراهان همیشگی ماهنامه طراحی وب

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

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

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

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

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

1

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

منتشر شده در شماره پنجم ماهنامه طراحی وب

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۶۷

  • سلام
    مطلب جالبی بود
    این افکت رو در یک صفحه ساده انجام دادم به درستی کار کرد
    اما وقتی در سایتم میخوام این افکت رو اعمال کنم کار نمیکنه
    به این صورت انجام دادم که فایل css و ۲ تا js رو در header فراخوانی کردم و یه بک دایو کلاسش رو دادم اما تغییری صورت نگرفت. CTRL + F5 رو هم زدم
    میتونید راهنماییم کنید ؟

    • سلام دوست عزیز
      فایل های js تون رو بعد از فایل های js موجود در صفحتون قرار بدید ، اگر جواب نداد بذارید انتهای صفحه .

  • با سلام و ممنون از پست آموزشیتون
    من دنبال خاصیتی هستم مثل ویزیبل که بشه نشون دادن وندانش رو کنترل کرد
    اصلا همچین خاصیتی تو سی اس اس داریم
    اگه موضوع آموزشی با توجه به این خاصیت بزارین ممنون میشم

    • سلام دوست عزیز
      بگید هدفتون از پنهان کردن و نمایش عناصر چیه تا راهنماییتون کنم. افکت خاصی و میخواین پیاده کنید؟
      موفق و پاینده باشید

  • سلام
    ممنون هستم از انتشار این آموزش.
    در قالب وردپرسی که قبلاً طراحی کردم جایگذاری کردم و به درستی کار کرد، خیلی راحت و شیک 🙂
    ممنون میشوم بفرمایید فرق این کتابخانه با Lazy Load چی هست ؟
    کدام سبک تر و بهتر است ؟
    با احترام

    • سلام دوست عزیز
      من با lazy load فقط یکبار کار کردم ، اطلاعی که دارم اینه که از نظر سایز هر دو پلاگین تقریبا در یک سطح هستند.
      پلاگین lazy load در IE8 به بالا پشتیبانی میشه اما animate.css در IE10 به بالا پشتیبانی میشه .
      پلاگین lazy load فقط افکت fadein داره اما animate.css افکت های متنوعی داره .
      موفق و پاینده باشید

  • سلام و خسته نباشید به مدیریت محترم.
    عذر میخوام طوری باشه که اسکرول گه میدم ‍پایین و باکس ها ظار میشن , بعد که اسکرول رو بالا میبرم دوباره میارم پایین باکس ها ظاهر نمونن مخفی باشن دوباره با اسکرول دادن ظاهر بشن….
    چیکار باید کنم؟
    ممنون میشم راهنمایی کنید.
    با تشکر

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

  • سلام من استفاده کردم مفید بود فقط مطمئن هستین که همه افکتها بدون مشکل اجرا میشن؟من چندتای دیگه شون رو امتحان کردم ولی نشد به بزرگی و کوچکی حروفشون هم توجه کردما.

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

  • سلام
    به خاطر آموزش خوبتون بسیار تشکر
    من با بوت استرپ سایتم را طراحی کرده ام و از کد های انیمیتی که در بالا قرار داده اید درونش استفاده کردم
    کد ها در فایرفاکس به خوبی اجرا می شوند ولی در گوگل کروم ابتدا سایتم را بهم ریخته نمایش می دهد و سپس درست می شود و یا در قسمت فوتر اگر از افکت وارد شدن به صفحه از پایین استفاده کتم صفحه جمع نمی شود و یک فضای خالی در پایین سایتم ایجاد می شود
    این مشکلات قابل حل هستند ؟ اگر چواب مثبت است با ید چه کاری انجام دهم؟

    • سلام دوست عزیز
      باید تو css هاتون دست ببرید، صد در صد قابل حل هست اما باید به html و css مسلط باشید تا این مشکل رو برطرف کنید.
      موفق باشید

  • سلام
    من قبلا پیغام دادم که با بوت استرپ سایتم را طراحی کرده ام
    یکی از سایت هایی که از این افکت ها توش استفاده کردم سایت زیر هست لطفا در گوگل کروم تستش کنید
    لودینگش خیلی بد هست
    می تونید راهنمایی کنید که مشکلش چیه ؟
    من css ها رو چک کردم ولی در کد ها مشکلی ندیدم !!!!
    http://honar-novin.ir
    ممنون

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

  • سلام
    وقت بخیر
    امکان دارد آموزش حرکت بر روی سایت های تک صفحه ای هنگام کلیک کردن بر روی منوی بالای سایت رو هم توضیح بدید؟ ( لطفا اگر افزونه ای در وردپرس دارد هم بگین )
    با تشکر

    • سلام دوست عزیز
      آموزشش و تو ماهنامه و هم تو سایت دادم ، نحوه ی ایجاد سفحات one page یا single page
      موفق باشید

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

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

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

  • سلام
    اول تشکر بابت این مطلب مفید و توضیح مناسب
    دوم یه سوال اگر من بخوام به تصاویری که در برگه سینگل (نوشته های متن) قرار دارند این کلاس رو بدم ، چه کار باید بکنم.
    یا حق

    • سلام دوست گرامی

      باید به html ثابت تگ مورد نظرتون دسترسی داشته باشید و کلاس مربوطه رو بهش بدید . نمیتونید با مطالب داینامیک این کارو انجام بدید.

      موفق باشید

  • من فقط می خوام تصاویر با اسکرول لود بشن قبلا از یک افزونه استفاده کردم ولی جواب نداد امکانشهست راهنمایی کنید؟

    • سلام

      اگر تصاویر شما ثابت هستن و میتونید بهشون کلاس اختصاص بدید ، از دستورات همین آموزش میتونید استفاده کنید. اما اگر تصاویرتون داینامیک هستن و دسترسی به html اون ها ندارید نمی تونید از این امکان استفاده کنید.

      موفق باشید

  • با سلام من طبق آموزش عمل می کنم اما فقط هنگامی که از سمت پایین به بالا اسکرول می کنم لود میشه در حالت از بالا به پایین همه یک دفعه ای لود میشن ؟ مشکل از کجاست ؟

  • سلام
    من میخواستم برای بهتر بالا اومدن سایت عکسها را به ترتیب لود کنم. یعنی تکستها لود بشن ولی تصاویر وقتی لود بشن که به div هر عکس با اسکرول میرسم. چه تابعی هست که بشه وقتی به div خاصی رسید آی دی اون رو بگیره و با جی کوئری تصویر مربوط رو بگیره و جای خودش بزاره.ممنون میشم کمکم کنید و یک نمونه هم بزارید برای اجرا.

    • سلام دوست عزیز

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

      موفق باشید

  • با سلام من طبق آموزش عمل می کنم اما فقط هنگامی که در مرورگر کروم از سمت پایین به بالا اسکرول می کنم لود میشه در حالت از بالا به پایین همه افکت ها یک دفعه ای لود میشن مشکل از کجاست ؟

  • سلام
    من این کد رو برای سایتم می خوام استفاده کنم ولی متاسفانه هر کدی که یک جورایی مربوط به جاوا اسکریپت و جی کوئری باشه قالبم نشون نمیده شاید هم مشکل از منه !
    امکان داره قالب نشون نده مثلا کد انتقال به بالای سایت هم برای سایتم گذاشته بودم کار نمیکرد …

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

  • با سلام رضا سید احمدپور هستم
    مدیر سایت تیم طراحی سایت وب یار http://www.webyar.net
    با تشکر از آقای حسین همت یار و باتشکر از مدیر سایت iranweblearn.com
    برای ارسال سریع آموزش این افکت گشتم تا کاربران را راهنمایی کنم که مطلبتان با ارزش بود و در اینستاگرام درچندین گروه لینک سایتتان را ارسال کردم.

    موفق باشید

  • سلام با تشکر از آموزش بسیار مفیدتون…من مدتها دنبال این مورد می گشتم
    اما چرا وقتی تو سایتم استفاده میکنم موقع لود شدن صفحه رو به هم می ریزن

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

  • سلام
    آقا چرا وقتی صفحه اسکرول میشه به سمت پایین
    به هر دایو ک میرسه صفحه به صورت افقی هم برای یه لحظه اسکرول میخوره؟

  • ساتم خشته نباشد
    من میخوام وقتی اسکرول دوباره به سمت بالا رفا افکت اجرا بشه
    از چه کدی باید استفاده کنم ؟

  • چیکار کنیم که همه انیمیشن ها با هم انجام نشن!
    یعنی اگه سه تا div کنار هم باشن به ترتیب انیمیشن ها اجرا بشه
    مثلا وقتی انیمیشن اولی تموم شد تازه انیمیشن روی div دومی شروع بشه و وقتی انیمیشن روی div دوم تموم شد انیمیشن div سوم شروع بشه

  • مطلب بسیار خوبی هست
    یک فایل css و دو تا js هست ؟ در فایل زیپی که من دانلود کردم فقط یک فایل css و یک js هست

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

    ممنون میشم راهنمایی کنید

  • سلام.
    لینک دانلود فایل هاتون مشکل داره.
    حتی لینک های دانلود ماهنامه ها هم خالی هستن و فایلی برای دانلود ندارن.
    ممنون میشم بررسی و اصلاح کنید.

  • با سلام و خسته نباشید
    چطور میشه خاصیت های data-wow-delay و data-wow-duration و data-wow-iteration و data-wow-offset رو با جاوا اسکریپت به یک عنصر اضافه کرد؟

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

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

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین