• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید تا کنون 6252 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

space.js : پلاگین jQuery برای ساخت سایت با افکت اسکرولی سه بعدی

2 1920 ۱۶ فروردین ۹۴

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

space

 

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

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

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

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

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

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

خوبی این پلاگین به اینه که نیازی به کد نویسی javascript نداره و همه کارها با HTML انجام میشه. بدی اینه که این پلاگین تازه منتشر شده و هنوز پایدار ( stable ) نیس و اینکه از مرورگرهای قدیمی IE پشتیبانی نمیکنه.

کاری که باید انجام بدیم اینه که باید چند فریم ( frame ) بسازیم که بتونیم اونا رو پشت سر هم قرار بدیم و با اسکرول کردن بصورت زیبا بینشون جابجا بشیم. برای ساختن یک فریم باید یک div قرار بدین و کلاس space-frame رو به اون نسبت بدین. بصورت زیر :

خود سایت این ابزار پیشنهاد میکنه که درون این div یک div دیگه با کلاس space-inner-frame قرار بدین. با اینکار محتویات این فریم هم از لحاظ افقی و هم از لحاظ عمودی در وسط صفحه قرار میگیره. بصورت زیر :

بجای div از section استفاده کردم. همونطور که میدونین از نظر ظاهری section و div هیچ فرقی با هم ندارن و تنها فرقشون معناگرایی بودن section هست.

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

  • data-duration : مدت زمانی که انیمیشن مورد نظر برای اون فریم اتفاق میوفته رو مشخص میکنه. یک مقدار پیش فرض برای این مقدار در نظر گرفته شده و شما مثلا اگه 1.5 رو بعنوان مقدار برای ویژگی data-duration در نظر بگیرین ، این عدد 1.5 در اون مقدار پیش فرض ضرب میشه. بصورت زیر :
  • data-enter : افکتهای انیمیشنی که میخوایم در هنگام ورود به فریم مورد نظر اتفاق بیوفته رو درون این ویژگی قرار میدیم. مثلا اگر rotate360 قرار بدین ، هنگام ورود به فریم ، 360 درجه میچرخه و ... بصورت زیر :

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

    میبینید که بین هر افکت space قرار دادیم.
  • data-exit : افکتهای انیمیشنی که میخوایم در هنگام خروج از فریم مورد نظر اتفاق بیوفته رو درون این ویژگی قرار میدیم. تنظیماتش دقیقا مانند حالت قبل هست.

افکتهایی که موجوده عبارتند از :

  • scaleIn
  • fadeIn
  • scaleOut
  • fadeOut
  • rotateQuarterRight
  • rotateInQuarterClockwise
  • zoomOut
  • slideInBottom
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideInRight
  • slideOutUp
  • slideInTop
  • slideInLeft
  • slideBottomRight
  • rotate360
  • rotate3dOut

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram