ایجاد افکت با اسکرول کردن در سایت

فهرست
    برای شروع تولید فهرست مطالب ، یک هدر اضافه کنید
    scrollme : پلاگین jQuery برای ایجاد افکت در زمان اسکرول

    آیا قصد ایجاد افکت با اسکرول کردن در سایت خود را دارید ؟

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

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

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

     

    scrollme : پلاگین jQuery برای ایجاد افکت در زمان اسکرول

    در این مطلب میخوام یک پلاگین jQuery بنام scrollme رو خدمت شما معرفی کنم و اونو آموزش بدم.

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

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

    نحوه استفاده :

    ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jquery.scrollme.min.js و jquery.min.js نیاز داریم. این فایلهارو در انتهای مطلب قرار دادم و میتونین از اونا استفاده کنید.

    حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

    میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای CSS و HTML مورد نظر رو نوشتیم.

    ۶ تا div قرار دادم و برای هر کدام رنگی انتخاب کردم. خوبی این پلاگین اینه که میشه کاری کرد که لازم نباشه کد Javascript نوشت و با استفاده از HTML میتونین راهش بندازین. اولین کاری که باید بکنید اینه که دو کلاس scrollme و animateme رو به div ها اضافه کنید. بصورت زیر :

    با اینکار به این ابزار میگیم که میخوایم روی این المنتها افکت انجام بشه.

    این ابزار تعدادی ویژگی داره :

    • data-when : مشخص میکنه که این افکت مورد نظر ما چه زمانی باید اتفاق بیوفته. سه مقدار enter و exit و span رو قبول میکنه. اگر enter بزارید ، این افکت زمانی اجرا میشه که شما به سمت اون المنت اسکرول کنید و بالای اون المنت بخواد نمایش داده بشه. اگر exit بزارید ، این افکت زمانی اجرا میشه که پایین اون المنت در دیدرس قرار بگیره.
    • data-from : با استفاده از این ویژگی و data-to میتونین انیمیشن رو برعکس کنید و حتی زمان اجراشو کم و زیاد کنید ، عددی بین ۰ تا ۱ میتونین براشون قرار بدین
    • data-easing : با استفاده از این خاصیت میتونین نوع انیمیشن رو مشخص کنید. چهار حالت easeout و easein و easeinout و linear رو قبول میکنه.
    • data-opacity : میتونین شفافیت المنت مورد نظر رو زمانی که به موقعیت to میرسه مشخص کنید. عددی بین ۰ تا ۱ میتونین قرار بدین
    • scale – saclex – scaley – scalez : میتونین با استفاده از اینا سایز المنت رو تغییر بدین
    • rotatex – rotatey – rotatez : میتونین با استفاده از این موارد المنت رو بچرخونید
    • translatex – translatey – translatez : با استفاد از این موارد هم میتونین المنت رو در جهات مختلف جابجا کنید

    یک نمونه که همه موارد بالا در اونا قرار گرفته :

    حالا میتونین موارد رو تغییر بدین و اثر هر کدوم رو تست کنید.

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

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

    موفق باشید. یا علی

    منبع این نوشته 

    2 دیدگاه دربارهٔ «ایجاد افکت با اسکرول کردن در سایت»

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

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

    دیدگاه‌ خود را بنویسید

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    اشتراک گذاری این مقاله

    اشتراک گذاری در facebook
    اشتراک گذاری در google
    اشتراک گذاری در twitter
    اشتراک گذاری در linkedin
    اشتراک گذاری در whatsapp

    اطلاعات مقاله

    کسب درآمد از اینترنت

    کسب درآمد از اینترنت با پاورپوینت

    کسب درآمد از اینترنت به صورت دائمی

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

    چه به صورت تمام وقت و چه به صورت پاره وقت ، کاملا منعطف اما تضمینی

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

     کسب درآمد از اینترنت با پاورپوینت

    خرید پاورپوینت از شما

    خرید پاورپوینت از شما - پاورپوینت‌ های خود را بفروشید
    پاورپوینت های شما را خریداریم…

    فروش پاورپوینت های شما یکی از روش‌های درآمدزایی از فایل هایی است که زمانی ساخته‌اید و از آنها استفاده کرده اید.

    حالا می توانید از زحمتی که کشیده اید ، کسب درآمد کنید…

    جهت فروش پاورپوینت های خود به ما کافی است به لینک زیر مراجعه کنید…

    خرید پاورپوینت از شما

    فرصت خرید ویژه و مطمئن

    خرید ویژه پاورپوینت  

    پرداخت امن

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

     

    بازگشت بدون قید و شرط

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

     

    پشتیبانی فعال

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

    عضویت در خبرنامه فروشگاه

    منتظر شگفتی های ما باشید…

    سری به این مطالب هم بزنید ...

    رشته های مهندسی

    رشته های مهندسی – تمام رشته ها + 10 رشته پر طرفدار مهندسی

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

    ادامه مطلب

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

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

    ادامه مطلب
    زمان پخش برنامه های نوروز ۱۴۰۰

    زمان پخش برنامه های نوروز ۱۴۰۰

    زمان پخش برنامه های نوروز ۱۴۰۰ – سریال های نوروز 1400 – ساعت پخش سریال های نوروز 1400 – تاریخ پخش سریال های نوروز ۱۴۰۰ …

    ادامه مطلب
    لوگو داده پردازان مدرن - پاورپوینت درجه یک

    پاورپوینت درجه یک : 1PPT.ir معرفی ، محصولات ، فروش

    پاورپوینت درجه یک : 1PPT.ir معرفی ، محصولات ، فروش داده پردازان مدرن مجموعه داده پردازان مدرن در سال 1398 تصمیم به راه اندازی فروشگاه …

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

    تکه شدن کلمات در پاورپوینت و ورد – شکسته شدن کلمات در پایان خط

    تکه شدن کلمات در پاورپوینت و ورد – شکسته شدن کلمات در پایان خط رفع مشکل شکسته شدن کلمات در انتهای خطوط متن پاورپوینت و …

    ادامه مطلب
    افزونه حذف تصاویر اضافی در وردپس

    افزونه حذف تصاویر اضافی در وردپس

    افزونه حذف تصاویر اضافی در وردپس پاک کردن سایز های اضافی تصاویر در وردپرس یکی از مشکلات وردپرس ایجاد فایل های کپی با سایزهای مختلف …

    ادامه مطلب
    شماره گذاری صفحات اول پایان نامه با حروف ابجد

    شماره گذاری صفحات اول پایان نامه با حروف ابجد

    شماره گذاری صفحات اول پایان نامه با حروف ابجد چگونه در یک سند word ،دو نوع شماره گذاری برای صفحات داشته باشیم؟ در اکثر پایان …

    ادامه مطلب
    گرایش های رشته مدیریت بازرگانی در دکتری

    گرایش های رشته مدیریت بازرگانی در دکتری

    گرایش های رشته مدیریت بازرگانی در دکتری : بر اساس دفترچه انتخاب رشته مطقع دکتری سازمان سنجش سال 1399 ، گرایش های قابل انتخاب به …

    ادامه مطلب