Slideshow Presentasi yang Mengesankan dengan Impress.js
Apa anda merasa bosan ketika presentasi menggunakan Power Point yang animasinya hanya itu-itu saja?
Anda tidak perlu menggunakan perangkat lunak presentasi powerpoint tua sekarang kami memiliki Impress.js.
Ciptakan slideshow presentasi yang indah untuk web menggunakan HTML dan CSS tanpa men-download perangkat lunak besar. Impress.js, kerangka kuat CSS3 transformasi, melakukannya untuk Anda, ia menterjemahkan kode HTML Anda ke slide presentasi yang indah.
Quote:
Apa itu Impress.Js?
Impress.js adalah kerangka penyajian yang menggunakan semua fitur baru CSS3 transformasi dan transisi CSS untuk membuat presentasi yang unik.
Ide Impress.js datang dari melihat presentasi unik baru dari prezi.com .
Akhir-akhir ini di Github Impress.js telah menjadi sangat populer dan saya percaya Anda akan mulai melihat banyak perusahaan membuat presentasi dengan menggunakan kerangka kerja ini.
Proyek impress dilengkapi dengan file CSS sendiri yang dapat Anda gunakan sebagai gaya default untuk presentasi Anda.
Quote:
HTML
Sekarang kita memiliki semua file untuk proyek impress mari kita ciptakan markup HTML kita butuhkan untuk presentasi.
Spoiler for HTML:
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.">
<meta name="author" content="Bartek Szopka" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
<link href="css/impress-demo.css" rel="stylesheet" />
</head>
<body>
<div id="impress" class="impress-not-supported">
<!-- Slides for presentation will go here -->
</div>
[removed][removed]
</body>
</html>
Impress bekerja dengan menggunakan div dan menetapkan CSS transisi dan transformasi yang terjadi ketika pindah ke slide berikutnya. Untuk menetapkan yang div-div kita gunakan dalam presentasi mereka harus dimasukkan dalam div yang memiliki ID impress.
Quote:
Dukungan Browser
Untuk melihat dalam hasil yang baik dari presentasi Anda, lebih baik anda menggunakan browser chrome, safari atau Firefox 10 atau lebih tinggi. Hal ini karena browser ini mendukung CSS 3d transisi yang dibutuhkan oleh beberapa presentasi.
Quote:
Slide-Slide Impress
Setiap slide dalam presentasi merupakan elemen div semua yang perlu Anda lakukan untuk menggunakan ini dalam presentasi Anda.
Spoiler for Impress Slides:
<div id="impress" class="impress-not-supported">
<div class="fallback-message">
Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.
For the best experience please use the latest <b>Chrome</b> or <b>Safari</b> browser. Firefox 10 (to be released soon) will also handle it.
</div>
<!-- Add Slides To Your Presentation -->
<div id="slide1" class="step">
<h1>Slide 1</h1>
</div>
<div id="slide2" class="step">
<h1>Slide 2</h1>
</div>
<div id="slide3" class="step">
<h1>Slide 3</h1>
</div>
</div>
Seperti yang dapat Anda lihat dari kode di atas kami juga telah menambahkan ID untuk setiap slide. Ini berarti kita dapat menavigasi kepada mereka dalam URL.
Untuk melihat setiap slide dalam URL yang harus Anda lakukan adalah menambahkan # dan kemudian ID div ke akhir URL. Fitur ini berarti bahwa Anda dapat menggunakan impress untuk membuat navigasi unik di situs Anda.
Quote:
Attribut Slide
1. Kelas
2. Data-x
Data-x atribut digunakan untuk menentukan posisi slide pada sumbu x dari titik awal presentasi. Titik awal selalu akan menjadi pusat seluruh presentasi.
3. Data-y
Data-y atribut adalah sama dengan data-x atribut tetapi akan mengubah posisi sepanjang sumbu y.
4. Data Skala
Skala data atribut digunakan untuk menentukan seberapa besar slide ini. Memberikan sebuah nomor positif yang berarti slide ini lebih besar dari default jadi kita membutuhkan zoom out untuk melihat seluruh isi slide.
5. Data Rotate
Data-rotate atribut digunakan untuk memutar slide. Pemberian angka positif akan memutar div searah jarum jam
6. Data-z
Data-z atribut memungkinkan Anda menentukan lokasi slide sepanjang sumbu z. Oleh karena itu jika Anda ingin menampilkan slide Anda jauh dari Anda menempatkan angka negatif pada slide. Ini berarti bahwa presentasi akan memperbesar untuk menampilkan slide.
7. Data rotate-x
Data-putar-x atribut CSS 3d transformasi atribut yang memungkinkan Anda untuk memutar slide sepanjang sumbu x.
8. Data rotate-y
Data-putar-y atribut CSS 3d transformasi atribut yang memungkinkan Anda untuk memutar slide sepanjang sumbu y.
Menggunakan 8 atribut adalah semua yang Anda butuhkan untuk membuat presentasi yang unik dengan impress.js, yang harus Anda lakukan adalah menentukan atribut-atribut ini dan terkesan akan mengurus segala sesuatu yang lain.
