آشنایی با 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 که مقدار پیش‌فرض آن یک است.
