Embed Size (px)
Citation preview
1/3/2016
1
impress.js Framework
İçerik
1. API – Konumlandırma ve Geçişler
2. Konumlandırma
3. Perspektif
4. X ekseni etrafında döndürme
5. Y ekseni etrafında döndürme
6. Z ekseni etrafında döndürme
7. Ölçekleme (Scaling)
8. Ölçekleme Uygulama
2
1/3/2016
2
impress.js API
3
Başlangıç Düzenlemeleri
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sunum Adı</title>
</head>
<body>
<div id="impress">
<!– Slaytlar buraya yerleşecek-->
</div>
<script src="library/js/impress.js"></script>
</body>
</html> 4
1/3/2016
3
5
Positions (Konumlar)
6
1/3/2016
4
� Sonsuz koordinat üzerinde bulunan slaydın (step) yatay konumunu belirler.
7
� Sonsuz koordinat üzerinde bulunan slaydın (step) düşey konumunu belirler.
8
1/3/2016
5
� Sonsuz koordinat üzerinde bulunan slaydın (step) 3. boyuttaki ileri-geri konumunu belirler.
9
� Slaydın 0-360 derece arasında saat yönünde dönebilmesine olanak sağlar
10
1/3/2016
6
� Sunumdaki farklı slaytların diğerlerine bağlı olarak ölçeklenmesine olanak sağlar. Varsayılan (default) değer 1 olup üst sınırı yokltur.
11
� data-width
� data-height
12
1/3/2016
7
Transitions (Geçişler)
13
� impress.js kullanılarak hazırlanan sunumlarda slayda karşılık gelmektedir.
� Step ile tanımlanmış bir slayda doğrudan erişim için "id" gereklidir. "#/id" ile erişim sağlanabilir.
14
1/3/2016
8
� Step-slide ile tanımlanmış bir slayda "#/step-2" ile erişim sağlanabilir.
15
� Tamsayı değer alır.
� Bir slayttan diğer slayta geçiş için gerekli süreyi kontrol eder.
16
1/3/2016
9
impress.js Uygulamalar
17
Ortak CSS – stil.css
18
1/3/2016
10
Ortak CSS – stil.css
19
Konumlandırma
20
1/3/2016
11
Konumlandırma
21
Konumlandırma
22
1/3/2016
12
Perspektif
23
Perspektif
24
1/3/2016
13
Perspektif
25
rotate-x
26
1/3/2016
14
rotate-x
27
rotate-x
28
1/3/2016
15
rotate-y
29
rotate-y
30
1/3/2016
16
rotate-y
31
rotate-z
32
1/3/2016
17
rotate-z
33
rotate-z
34
1/3/2016
18
Ölçekleme - Scale
35
Ölçekleme - Scale
36
1/3/2016
19
Ölçekleme - Scale
37
Ölçekleme - Scale
38
1/3/2016
20
Ölçekleme - Scale
39
Ölçekleme - Scale
40
1/3/2016
21
Ölçekleme Uygulama
41
Ölçekleme Uygulama
42
1/3/2016
22
Ölçekleme Uygulama
43
Ölçekleme Uygulama
44
1/3/2016
23
Ölçekleme Uygulama
45
impress.js Framework
Sorular?
