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

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

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

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 : این خصوصیت رو با مثال خدمتتون توضیح میدم. فرض کنید این خصوصیت رو به عنصرتون اختصاص دادید؛ مرورگر شما ۹۰۰ پیکسل ارتفاع داره، برای این خصوصیت مقدار ۸۵۰ رو در نظر میگیرید، ۸۵۰ پیکسل از پایین مرورگر شما محاسبه میکنه تا بالا، ۵۰ پیکسل میمونه تا ارتفاع مرورگر شمارو پر کنه. عنصر نمایش داده نمیشه تا زمانی که اسکرول ۵۰ پیکسل به طرف پایین کشیده بشه یعنی ۵۰ پیکسل به سمت پایین طی کنه. بعد از این عنصر شما با افکت مورد نظر نمایش داده میشه.

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

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

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

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

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

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

دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • Mj

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

    • میترا رحیمی

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

  • meisam

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

    • میترا رحیمی

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

  • Web Developer

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

    • میترا رحیمی

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

  • مهرداد

    چرا لینگ فایل ها کار نمیکنه

    • میترا رحیمی

      سلام دوست عزیز
      کار میکنه مشکلی نداره ، مجدد تست کردم .

  • مرتضی شکری

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

    • میترا رحیمی

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

  • حسین حسنی

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

    • میترا رحیمی

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

  • Nima

    سلام
    ممنون خانم رحیمی مطلب خیلی مفیدی بود
    سپاس

  • سعید طراوت

    سلام
    جالب و مفید بود ولی..
    فایل animate.css که گذاشتید کامل نیست! چندتا افکت کم داره.

    • میترا رحیمی

      سلام دوست عزیز
      والا این رو از سایت خودش دانلود کردم : )

  • هرمس

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

    • میترا رحیمی

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

  • هرمس

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

    • میترا رحیمی

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

  • pgh

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

    • میترا رحیمی

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

  • emad

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

    • میترا رحیمی

      سلام دوست عزیز
      خیلی ممنونم
      موفق و پاینده باشید

  • حمید قرامحمدی

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

    • میترا رحیمی

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

  • حمید قرامحمدی

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

  • rezad

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

    • میترا رحیمی

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

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

      موفق باشید

  • rezad

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

    • میترا رحیمی

      سلام

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

      موفق باشید

  • علی امیر

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

    • میترا رحیمی

      سلام
      متوجه نشدم ، یکم واضح تر بگید.

  • pxinu

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

    • میترا رحیمی

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

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

      موفق باشید

  • محمد

    سلام می شه برای data-wow-offset یک مثال بزنید
    ممنون

    • میترا رحیمی

      سلام دوست عزیز
      تو مقاله یک مثال زده شده.
      موفق باشید

  • محمد

    بنده این قست رو توی ایندکس جایگذاری کردم

    <img src="/img/head-logo.png”>

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

  • حامد افسری

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

    • حسین همت یار

      سلام ، سوالات فقط در بخش پرسش و پاسخ جواب داده خواهد شد . تشکر

  • Saleh

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

    • میترا رحیمی

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

  • رضا سید احمدپور

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

    موفق باشید

    • میترا رحیمی

      سلام
      خیلی ممنونم لطف کردید
      موفق و پاینده باشید

  • حسام

    بسیار عالی بود. متشکر

  • مهدی

    سلام. مطلب مفیدی بود
    سپاسگزارم

  • دکوراسیون داخلی

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

  • مصطفی کیوانی

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

    • حسین همت یار

      سلا م، سوالات قط در پرسش و پاسخ جواب داده خواهد شد . تشکر

  • علی

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

    • حسین همت یار

      سلام ، سوالات فقط در بخش پرسش پاسخ جواب داده خواهد شد. تشکر

  • میثم

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

    • حسین همت یار

      سلام ، سوالات فقط در بخش پرسش پاسخ جواب داده خواهد شد. تشکر

  • حسین

    آقا ممنون خیلی خوب بود کمک کرد واقعا

  • رضا نوری

    وظیفه خودم دونستم از شما تشکر کنم
    امیدوارم همیشه موفق و سربلند باشید

  • فرناز عزیززاده

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

  • mortaza7khat

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

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟