جاواسکریپت

آشنایی با impress.js

توسط در جمعه, اسفند ۴, ۱۳۹۶

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

برای اینکار ابتدا یک فایل HTML با ساختار زیر درست می‌کنید:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=1024" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" type="text/css" href="css/impress.css">
</head>
<body class="impress-not-supported">

  <div class="fallback-message">
    <p>Your browser <b>doesn't support the features required</b> 
    by impress.js, so you are presented with a simplified version of this presentation.</p>
    <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
  </div>

  <div id="impress">

    <!-- Slides Location -->

  </div>

  <div class="hint">
    <p>Use a spacebar or arrow keys to navigate. <br/>
    Press 'P' to launch speaker console.</p>
  </div>
  <script>
    if ("ontouchstart" in document.documentElement) { 
    document.querySelector(".hint").innerHTML = "<p>Swipe left or right to navigate</p>";
    }
  </script>
  <script src="js/impress.js"></script>
  <script>impress().init();</script>

</body>
</html>

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

برای اضافه کردن هر چیزی به پرزنتیشن خود می‌توانید از تگ‌های HTML5 استفاده کنید. مثل div, section,header,footer و غیره. ولی حتما باید آن را در کلاس step قرار دهید.

<div class="step">...</div>

و برای تعیین موقعیت شیء در فضای سه بعدی، مختصات نقطه مرکز آن شیء را در قالب سه پارامتر زیر مشخص کنید:

<div class="step" data-x="1000" data-y="1400" data-z="-3000">...</div>

مقدار data-x طول نقطه مرکز شیء بر روی محور افقی که روی صفحه مانیتور از چپ به راست می‌باشد.

مقدار data-y عرض نقطه مرکز شیء بر روی محور عمودی که روی صفحه مانیتور از بالا به پایین می‌باشد.

مقدار data-z ارتفاع نقطه مرکز شیء بر روی محور افقی که عمود بر صفحه مانیتور از داخل به بیرون (به سمت کاربر) می‌باشد.

اگر بخواهید شیء را در محل خود بچرخانید از پارامترهای زیر استفاده کنید:

<div class="step" data-rotate-x="30" data-rotate-y="60" data-rotate-z="90">...</div>

مقدار data-rotate-x زاویه دوران حول محور x است.

مقدار data-rotate-y زاویه دوران حول محور y است.

مقدار data-rotate-z زاویه دوران حول محور z است. (برای این نوع دوران می‌توانید از پارامتر data-rotate نیز استفاده نمایید.)

همچنین اگر بخواهید شیء مورد نظرتان را از اندازه واقعی خود بزرگتر یا کوچکتر نمایید از پارامتر data-scale استفاده کنید.

<div class="step" data-scale="5">...</div>

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

<div class="step" data-x="0" data-y="0" data-z="0" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1">...</div>

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

و مقدار پیش فرض تمامی پارامترها صفر است غیر از data-scale که مقدار پیش فرض آن یک می‌باشد.

برای درک بهتر اینکه این پارامترها چگونه کار می کنند. در کادر زیر پارامترها را تغییر دهید. و نحوه عملکرد هریک را ببینید.

0
نوشته‌های مرتبط