18
تشکر

آشنایی با impress.js

impress.js

impress.js

همه ما حداقل یکبار ارائه داشته‌ایم و اطلاعات و دانش خودمان را برای دیگران روی پرده در ویدئو پروژکتور ارائه کردیم. خب از چه نرم افزاری برای ایجاد ارائه تصویری استفاده کردیم؟ مایکروسافت پاورپوینت؟ یا لایبر آفیس؟ اگر شما یک وب دولوپر مشتاق باشید، حتماً میخواهید ارائه تان را نیز بر پایه وب درست کنید و داخل مرورگر به دیگران نمایش دهید.

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

اما برای ایجاد ارائه بر پایه وب از چه چیزی استفاده کنیم؟! خوشبختانه impress.js برای همین کار است.

impress.js از تکنیک های 3D Transform برای زیبا‌تر کردن ارائه استفاده میکند.

میتوانید یک نمونه زیبا را در اینجا، و همچنین مجموعه‌ای از آن‌ها در اینجا ببینید.

در ادامه مطلب همراه ما باشید تا نحوه درست کردن یک ارائه با impress.js را ببینیم…

impress.js

نکته مهمی که در مستندات impress.js به آن اشاره شده است، این است که impress.js طراحی برای شما انجام نمیدهد و فقط میتواند اسلاید ها را به نحوی زیبا با استفاده از تکنیک های 3D Transform جا به جا کند.

impress.js به هیچ کتابخانه دیگری وابسته نیست و با خیال راحت میتوانید استفاده کنید. در ابتدا باید این کتابخانه را به صفحه متصل کنید. میتوانید از اینجا آن را دانلود کنید (ستون سمت راست) و یا با استفاده از دستور bower install impress.js آن را در مسیر پروژه خود دانلود کنید.

بعد از متصل کردن این کتابخانه به صفحه، کد زیر را نیز درون یک تگ script قرار میدهیم تا impress.js کار کند.

impress.init();

سپس به تگ body کلاس impress-not-supported را اضافه میکنیم، تا در صورتی که مرورگر کاربر از impress.js پشتیبانی نکرد با استفاده از این کلاس پیغام مناسب را به کاربر بدهیم در غیر اینصورت خود impress.js این کلاس را حذف خواهد کرد.

<body class="impress-not-supported"> ... </body>

سپس درون تگ body تگ div#impress را میسازیم، که تمام اسلایدهای ما باید درون آن قرار بگیرند.

<div id="impress"> ... </div>

کار خیلی ساده است. هر اسلاید یک تگ دایو به صورت div.step.slide است. و هر چیزی که درون آن قرار بگیرد برای همان اسلاید است. برای مثال ما در زیر دو اسلاید با محتویات آن را ساختیم.

<div class="step slide">
  <h1>Slide 1</h1>
</div>
<div id="step-2" class="step slide">
  <h1>Slide 2</h1>
</div>

اما اگر نتیجه را در مرورگر ببینیم، خواهیم دید که این دو اسلاید روی هم افتاده اند. ما باید با استفاده از ویژگی های data-x, data-y و data-z اسلایدها را از یکدیگر جدا کنیم. پس کدهایمان را تغییر میدهیم.

<div class="step slide" data-x="-2000" data-y="1000">
  <h1>Slide 1</h1>
</div>
<div id="step-2" class="step slide">
  <h1>Slide 2</h1>
</div>

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

اما impress.js قابلیت های دیگری نیز دارد. برای مثال میتوانید با استفاده از خاصیت data-rotate یک اسلاید را بچرخانید. و یا با استفاده از خاصیت data-scale یک اسلاید را بزرگتر یا کوچکتر از حد معمول بکنید.

<div class="step slide" data-x="-2000" data-y="1000" data-rotate="40" data-scale="1">
  <h1>Slide 1</h1>
</div>
<div id="step-2" class="step slide" data-scale="2">
  <h1>Slide 2</h1>
</div>

همچنین خاصیت data-rotate میتواند به خاصیت های data-rotate-x, data-rotate-y و data-rotate-z شکسته شود، که واقعا جذاب است.

<div class="step slide" data-x="-2000" data-y="1000" data-rotate-y="40" data-scale="1">
  <h1>Slide 1</h1>
</div>
<div id="step-2" class="step slide" data-scale="2">
  <h1>Slide 2</h1>
</div>

به همین سادگی شما میتوانید اسلایدهایی بسیار زیبا بسازید.

  • زهیر می‌گه:

    من ترم قبل سه تا از ارائه ها مو با impress.js درست کردم. هم دوستام هم استادا خیلی خوششون اومد!
    می تونید از اینجا هر سه تا شو دانلود کنید:
    http://30ss3.blog.ir/tag/%D8%B3%D8%A7%D8%AE%D8%AA%D9%86%20%D8%A7%D8%B3%D9%84%D8%A7%DB%8C%D8%AF%20%D8%A8%D8%A7%20impress.js

  • مهدی می‌گه:

    بعد 12 سال کار طراحی وب با خوندن سایت شما احساس یک آدم کاملاً بی سواد رو دارم و کاملاً افسرده شدم الان :)

    خسته نباشید واقعاً

  • حامد مودی می‌گه:

    سلام فوق العاده بود
    ممنون

  • آقا محسن ممنون عالی و پر کاربرد

  • رضا می‌گه:

    سلام محسن جان
    بهترین سایت اطلاع رسانی سایت خودته
    دمت گم
    موفق باشی :)

  • امیر می‌گه:

    با سلام و تشکر به خاطر سایت خوب و پرمحتواتون، به همین خاطر ما شما رو در سایت http://beyamooz.com لینک کردیم امیدوارم که یک سری به سایت ما بزنید و اگر این اونو مناسب دیدید ما رو لینک کنید.

    • محسن شفیعی می‌گه:

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

  • sdf می‌گه:

    خیلی عالی بود ، واقعا چقدر جاوا اسکریت داره پرکاربرد میشه هرکاری میشه باهاش کرد

  • میلاد می‌گه:

    خیلی عالی بود محسن جان
    مرسی بابت معرفی

  • سمیه می‌گه:

    جالب بود ممنون

  • محسن شفیعی می‌گه:

    دوستان، من خودم دیروز یک ارائه عناوین داشتم، که با استفاده از همین impress.js یک ارائه 4 صفحه ای ساختم، برای نمونه ساده میتونید از اینجا دانلود کنید.


  • نظرات این مطلب بسته است.