1
00:00:00,330 --> 00:00:01,500
Tekrar hoşgeldiniz.

2
00:00:01,500 --> 00:00:06,510
Bu yüzden Jay kraliçesini başlangıçta tanıttığımızda, select öğeleri olay dinleyicileri üzerinde manipüle etmek

3
00:00:06,630 --> 00:00:08,820
gibi şeyleri yapmamıza yardımcı olduğunu belirtti.

4
00:00:08,930 --> 00:00:11,990
Ayrıca efektler ve animasyonlar için yardımcı olduğunu belirtti.

5
00:00:12,180 --> 00:00:16,800
Bu yüzden bu videoda bazı efektler üzerine hızlı bir önizleme

6
00:00:16,800 --> 00:00:22,000
yapacağım, özellikle efektleri ve slaytları solan etkilerin iki geniş kategorisini göstereceğim.

7
00:00:22,250 --> 00:00:26,220
Bu yüzden efekt kategorisinde Jay Corey rıhtımında bulunuyorum.

8
00:00:26,280 --> 00:00:31,650
solmaya efektler göstererek başlayacağım, bu yüzden başlamak için solmaya bakacağım.

9
00:00:31,650 --> 00:00:36,010
Efektlerle ilgisi olan epeyce yöntemin olduğunu görebilirsiniz ve

10
00:00:36,570 --> 00:00:41,900
Ne fadeout yaparsınız, bir dolar işareti veya bir dizi öğe içeren bir öğeyi seçersiniz

11
00:00:41,910 --> 00:00:48,480
ve bu öğeyi fade out olarak adlandırırsanız ve bu öğenin tam opaklıktan tam şeffaflığa veya sıfır opaklığa kadar

12
00:00:48,480 --> 00:00:49,470
canlandırdığı anlamına gelir.

13
00:00:49,500 --> 00:00:56,130
Bu nedenle temelde bir öğeyi yok eder ve yavaş ya da hızlı ya da çok yavaş olmasını isterseniz

14
00:00:56,220 --> 00:00:57,380
bir süre sağlayabilirsiniz.

15
00:00:57,510 --> 00:00:59,690
Birkaç milisaniye sağlayabilirsiniz.

16
00:00:59,700 --> 00:01:05,520
400 milisaniyedir ve sonunda yalnızca bir dakika içinde gösterileceğim bir geri arama sağlayabilirsiniz.

17
00:01:05,520 --> 00:01:06,630
Varsayılan değer

18
00:01:06,780 --> 00:01:13,740
Bu yüzden, bu etki çalışma demosunu göstermek için yeni bir dosya hazırlayacağım ve son demo

19
00:01:13,740 --> 00:01:18,660
sayfasından yapımımızı kopyalayacağım ve bu projede J Querrey efektleri kullanılacaktır.

20
00:01:18,960 --> 00:01:24,480
Bu yüzden kurulumu yaptık ve burada bu içeriğin hepsinden kurtulacağım

21
00:01:24,480 --> 00:01:27,000
ve sonra birkaç div'a ekleyeceğim.

22
00:01:27,120 --> 00:01:33,240
Haydi üç divs yapalım ve bu div'leri kullanacağız ve onları sarmalayıp animasyon haline getireceğiz ve

23
00:01:33,240 --> 00:01:34,340
yukarıdan aşağıya kaydıracağız.

24
00:01:34,450 --> 00:01:43,620
onlara bu filmin içeriğinde bazı şeyler vereceğim, bunlar gelecek olanı silecek değil.

25
00:01:43,620 --> 00:01:45,470
Ve ben de

26
00:01:45,900 --> 00:01:48,300
Sana yalvarıyorum lütfen.

27
00:01:48,660 --> 00:01:52,380
Ve son olarak, Yardımı yardım etmesini söyleyen bir yardım alacağız.

28
00:01:52,720 --> 00:01:55,790
Bu div'ler solup gitmemek için çaresizdir.

29
00:01:56,040 --> 00:01:58,210
Maalesef bugün ne şanslı günleri değil.

30
00:01:58,410 --> 00:02:00,230
Ve onlarla savaşacağız.

31
00:02:00,240 --> 00:02:05,280
Bu yüzden daha net hale getirmek için hayatımıza biraz stil katacağım, böylece

32
00:02:05,280 --> 00:02:06,720
renklerinin solup gidebileceğini göreceksiniz.

33
00:02:07,110 --> 00:02:10,900
Ve ayrıca, yukarı ve aşağı kaydıracak bir genişlik ve yüksekliğe sahipler.

34
00:02:10,950 --> 00:02:20,200
Bu yüzden tüm div'leri seçip 100 piksellik ve 100 piksel yüksekliğinde ve

35
00:02:20,220 --> 00:02:28,150
bir renk tonlamalı renk verecek ve bunları kaydedeceğim ve bunu açacağız.

36
00:02:28,860 --> 00:02:30,420
Üç div var.

37
00:02:30,420 --> 00:02:32,570
Ancak onlarla aynı çizgide olmasını isterim.

38
00:02:32,880 --> 00:02:36,900
Dolayısıyla bunu yapmanın bir yolu şamandıranın kalmış olmasıdır.

39
00:02:37,020 --> 00:02:39,880
Şimdi hepsi aynı çizgide ama birbirlerine kan döküyorlar.

40
00:02:40,200 --> 00:02:43,020
Bunu düzeltmek için bir marj ekleyebiliriz.

41
00:02:43,020 --> 00:02:46,850
Dolayısıyla, her iki tarafta 20 piksel bir kenar boşluğu yapacağız.

42
00:02:46,860 --> 00:02:51,930
Şimdi üç kareden oluşuyor ve her birinin içinde bir metin var ve bunları

43
00:02:51,930 --> 00:02:56,740
şekillendirmeye gerçekten ihtiyaç duymuyoruz, çünkü tek yapacağımız bunların onlara nasıl sığacaklarını göstermektir.

44
00:02:57,060 --> 00:03:03,060
Bu yüzden buraya bir düğme ekleyeceğiz ve bu düğme sadece beni tıklatacak.

45
00:03:03,270 --> 00:03:08,000
Ve bu butona tıkladığımızda, animasyonlarımızın çalışması ne olacak.

46
00:03:08,220 --> 00:03:12,760
Bu yüzden tıklayın ve bu üç öğe başlamak için solmaya gerekir.

47
00:03:13,320 --> 00:03:19,350
Dolayısıyla, solmaya devam etmek yinelemek, bir unsuru tam donukluktan veya herhangi bir opaklıktan alacaktır. Şu anda

48
00:03:19,650 --> 00:03:22,500
bulunduğu ve tam şeffaflık noktasına gölgelendiği anlamına gelir.

49
00:03:22,500 --> 00:03:29,730
Bu yüzden, bu nokta seçilemiyor gibi görünür ve isteğe bağlı bir hız dizgisi sunabiliriz, o kadar yavaş

50
00:03:29,730 --> 00:03:33,370
veya hızlı veya birkaç milisaniyelik bir süre verilebilir.

51
00:03:33,390 --> 00:03:34,490
Şimdi sana göstermeme izin ver.

52
00:03:34,740 --> 00:03:39,870
Aslında bunu ayrı bir dosyada yapacağım, böylece bir javascript dosyası oluşturup kaydedeceğim.

53
00:03:40,250 --> 00:03:45,000
Bunu, yalnızca uyanık alarmımı bağlayan ve yanımı düzgün

54
00:03:47,940 --> 00:03:52,470
şekilde birleştiren dehayı etkileyen bir sesle etkiler.

55
00:03:52,470 --> 00:03:54,020
Sadece bir betik etiketi ekleyin.

56
00:03:54,480 --> 00:03:56,450
Kaynak efektlerle eşittir.

57
00:03:56,560 --> 00:03:57,320
Evet.

58
00:03:57,690 --> 00:04:01,030
Ve eğer yenilersek bağlı alarmı alacağız.

59
00:04:01,350 --> 00:04:04,380
Bu yüzden burada yapmak istediğimiz şey, bu şeylerin ortaya çıkması pahasına.

60
00:04:04,380 --> 00:04:10,040
Dolayısıyla cihazı böyle seçmeliyiz ve sönmemeliyiz.

61
00:04:10,380 --> 00:04:13,290
Ve sonra bir hız sağlayabilir ya da öyle bırakabiliriz.

62
00:04:13,290 --> 00:04:20,630
Ve yapmak ya da yenilemek istediğimiz tek şey buysa ve sayfa yüklemesi esnasında parlamaz hale geldiğini görebilirsiniz.

63
00:04:20,640 --> 00:04:23,740
O halde bunu düğmeyi tıkladığımızda gerçekleştirelim.

64
00:04:24,090 --> 00:04:34,800
düğme noktası yapmak isteyeceğiz, ya tıklamayı yapabiliriz, yoksa hızlı bir şekilde nokta yazıp sonra geri arama işlevini kabul edeceğiz.

65
00:04:36,300 --> 00:04:38,480
Dolayısıyla, bir dolar işareti

66
00:04:38,640 --> 00:04:47,770
Bu yüzden tıkladığımızda tüm div'leri silecek ve şimdi yenilecek olacak ve tıklarsam

67
00:04:48,490 --> 00:04:50,870
hepsinin kaybolduğunu görebilirsiniz.

68
00:04:50,980 --> 00:04:56,060
Bahsettiğim gibi burada bir sayı verebiliriz, burada tam saniye olan 1000 gibi bir şey.

69
00:04:56,260 --> 00:05:02,370
Yenilersem, tıkladığımda göreceksin, yok olacakları için tam saniye sürer.

70
00:05:02,620 --> 00:05:09,580
Kaybolmama ile ilgili önemli bir nokta da, sayfayı incelersem ve öğelere baktığımda div

71
00:05:09,580 --> 00:05:12,400
hala hala yurdun ekibinde olduğudur.

72
00:05:12,430 --> 00:05:15,760
Onları görmüyoruz çünkü görüntüleri hiçbir şey yapılmadı.

73
00:05:15,760 --> 00:05:18,730
Dolayısıyla bunları silmemekte veya sayfadan kaldırmamaktadır.

74
00:05:18,910 --> 00:05:20,010
Sadece onları saklıyorlar.

75
00:05:20,170 --> 00:05:22,890
Ve bu kesinlikle önemli bir ayrım.

76
00:05:22,990 --> 00:05:28,960
Diyelim ki, div'ler solduktan sonra sadece bir mesaj basmak istedim, böylece onları solacaktım

77
00:05:28,960 --> 00:05:35,150
ve daha sonra, günlüğünü iptal ettikçe tamamlanan solmaya benzer bir şey yaptım diyelim.

78
00:05:35,680 --> 00:05:39,590
Ve ben bunu yaparsam, konsolu açıp olayların gerçekleşeceğini izleyeceğim.

79
00:05:39,730 --> 00:05:45,800
Bu yüzden, buraya tıkladığım zaman, solmaya başlamadan önce Faid'i tamamladım.

80
00:05:46,090 --> 00:05:51,490
Peki, burada ne olur div'ları seçtiğimizden ve solmaya başlayacağız, ancak tam bir saniye sürüyor.

81
00:05:52,060 --> 00:05:56,280
Ve javascript, bir sonraki satıra geçmeden önce o saniyenin bitmesini beklemiyor.

82
00:05:56,350 --> 00:06:02,310
Hemen bu satıra taşındı ve Faid tamamlandı ve sonra fade out tamamladı yazdırır.

83
00:06:02,470 --> 00:06:08,230
Dolayısıyla, fade bittikten hemen sonra kodun olmasını istiyorsak, burada bir geri bildirim

84
00:06:08,680 --> 00:06:11,390
gönderdikten sonra bunun olmasını garantilemek istiyoruz.

85
00:06:11,440 --> 00:06:16,860
Ve bu yüzden bu geri arama bittiğinde fadeout'un içinde otomatik olarak çağrılır.

86
00:06:17,020 --> 00:06:20,830
Bu yüzden sürekli günlük kaydını alıp kurtaracağım.

87
00:06:21,300 --> 00:06:29,530
Yenilersem ve şimdi fade out'u tıklarsam ve o zaman her biri için 3 Fade tamamlanmış konsol

88
00:06:29,540 --> 00:06:31,650
nokta günlüğünü elde ederiz.

89
00:06:31,690 --> 00:06:37,390
Konsolos'ta bir dize yazdırmaktan ziyade daha yaygın bir senaryo, elemanları silip

90
00:06:37,390 --> 00:06:39,220
süpürdükten sonra kaldırmaktır.

91
00:06:39,220 --> 00:06:42,580
Dolayısıyla sadece gizli olduklarını, aslında gitmediğini belirttim.

92
00:06:42,660 --> 00:06:47,350
Onları silmek istersek, yavaş yavaş solmamak istediğimiz bir öğenin yanındaki çöp kutusu

93
00:06:47,350 --> 00:06:51,940
üzerine tıkladığımızda güzel bir animasyon yapmak için yapacağımız yapılacaklar listesi gibi.

94
00:06:52,060 --> 00:06:55,620
Fakat sonra da sayfayı DOM'dan tamamen silin.

95
00:06:55,810 --> 00:07:02,320
Bu nedenle, remove adlı bir yöntem kullanmamız gerekiyor ve sadece fadeout bittikten sonra onu kaldırmak istiyoruz.

96
00:07:03,340 --> 00:07:09,460
Dolayısıyla bunun gibi görünen bu kaldırma işlemini yapacaktır.

97
00:07:10,010 --> 00:07:13,930
Ve bu, yapacak fadeout bitene kadar bekleyecek.

98
00:07:13,990 --> 00:07:17,050
Ve her div için Remove yöntemini çalıştırır.

99
00:07:17,050 --> 00:07:20,430
Tazeleyin ve tıklayın bana tıklayın.

100
00:07:21,100 --> 00:07:26,650
Kaybolup giderler ve öğelere giderek vücudumuzun sadece bir düğmesi olduğunu ve tüm

101
00:07:26,650 --> 00:07:29,850
div'lerin tamamen tükenmiş bir etiketinin olduğunu görebilirsiniz.

102
00:07:30,100 --> 00:07:36,520
Ve eğer bu satırı yorumlayıp yenileyersem burada nereden üç divs başladıklarını görebilir ve

103
00:07:36,520 --> 00:07:39,130
butona tıklarsam ve hepsi olur.

104
00:07:39,160 --> 00:07:42,910
Kaybolup kaybolurlar ve daha sonra hiçbiri görüntülenmez.

105
00:07:42,910 --> 00:07:51,340
Kodumu yanlış yere koyarsam ve Remove yöntemini burada çalıştırsam, tüm divs dot'ları

106
00:07:51,430 --> 00:07:52,850
aynen kaldırdım.

107
00:07:52,900 --> 00:07:57,080
Gerçekte ne olur ki, emrin garantisi yoktur.

108
00:07:57,280 --> 00:07:59,210
Ve bu tam bir saniye sürecektir.

109
00:07:59,410 --> 00:08:01,800
Ve bu kod bu saniyenin bitmesini beklemiyor.

110
00:08:01,930 --> 00:08:06,410
Dolayısıyla solmaya ve daha sonra hemen çıkartmaya başlayacak.

111
00:08:06,610 --> 00:08:13,150
Böylece bu, solmaya ve neredeyse çıktıktan hemen sonra başlar.

112
00:08:13,780 --> 00:08:16,450
Yani temelde hiçbir solmaz.

113
00:08:16,480 --> 00:08:17,110
İşte bu yüzden J.

114
00:08:17,110 --> 00:08:21,940
Corey, bu geri aramayı sağlar; çünkü bir şeyleri solduktan sonra veya bir şeyi

115
00:08:21,940 --> 00:08:26,810
aşağı kaydırdığımızda veya animasyon ne olursa olsun bir şeyler yapmak istemek çok yaygındır.

116
00:08:26,830 --> 00:08:30,760
Bu beni bir sonraki noktamıza getiriyor; bu da, yapabildiğim diğer animasyonların bir

117
00:08:30,760 --> 00:08:33,790
kısmını göstermek istediğimden, bu yüzden de şeyleri solacak gibi görünüyor.

118
00:08:34,030 --> 00:08:40,920
Öyleyse ekranın başında hiçbiri olmamasını sağlayacak olursam yenileyebilirim.

119
00:08:41,020 --> 00:08:46,780
Div'leri görmüyoruz çünkü şimdi tıkladığımızda soluyoruz, gizli oldukları için gizliyoruz,

120
00:08:46,780 --> 00:08:49,840
onlara solacak ve istediğiniz gibi çalışıyor.

121
00:08:49,840 --> 00:08:55,720
Düğmeye tıklayın ve saniyeler içinde kaybolurlar ve daha sonra bazı kodları çalıştırmak istersek, solma işleminin

122
00:08:55,720 --> 00:09:00,350
bittiğini bildiğimizde bazı kodları yerleştirebiliriz ve eğer geri arama olsaydı diyebiliriz.

123
00:09:00,970 --> 00:09:02,310
Pekala, o da Faden.

124
00:09:02,350 --> 00:09:09,610
GK, Faid toggle ve Faid toggle aynı şekilde çalışan bir daha güzel solmaya yöntem sağlar.

125
00:09:10,660 --> 00:09:16,330
Birkaç milisaniyede bilgi veriyorum ve şu an gösterilip gösterilmiyorsa, içeri girip çıkacak bir

126
00:09:16,330 --> 00:09:18,080
şey olup olmadığını anlayacaktır.

127
00:09:18,310 --> 00:09:25,360
Yenilersem ve Fade geçiş düğmesini tıklarsam hepsini besleyerek başlar ve daha sonra hepsini

128
00:09:25,360 --> 00:09:27,020
silip geri gider.

129
00:09:27,040 --> 00:09:32,500
Temel olarak, sınıf listesini bir sınıf ekleyerek veya Jay Querrey ile geçiş sınıfı kullanarak

130
00:09:32,500 --> 00:09:35,860
solmaya veya solmaya ihtiyaç duyup duymadığınızı kararlaştırmak gibi.

131
00:09:35,860 --> 00:09:43,960
Pekâlâ, göstermek istediğim bir sonraki efekt efektinin solup kayması bu kayan etkiler.

132
00:09:44,320 --> 00:09:49,170
Aşağıda, kaydırma çubuğunun aşağı kaydırılması ve kaydırılması var.

133
00:09:49,240 --> 00:09:55,270
Dolayısıyla slayttan aşağıya başlayacağım ve ne yaptığı, şu anda göstermeyen bir unsurun, bir unsurun

134
00:09:55,270 --> 00:10:00,640
yüksekliğini canlandırdığı Faid gibi bir unsur üzerinde opaklığı canlandırmak yerine geçmesi gerekiyor.

135
00:10:01,090 --> 00:10:03,030
Bu işin nasıl yürüdüğünü size göstereceğim.

136
00:10:03,130 --> 00:10:04,300
Bunu değiştireceğiz.

137
00:10:04,300 --> 00:10:07,870
Soluklaşmak yerine geçiş yapacağız.

138
00:10:08,650 --> 00:10:11,810
Bunun sebebi, elementlerimizi yenilediğimizde gizlidir.

139
00:10:11,920 --> 00:10:19,000
Bir düğmeye tıkladığımızda slayt aşağı doğru çalıştırırsanız, yüksekliğin animasyonlu olduğunu ve aynı şeyin

140
00:10:19,000 --> 00:10:21,270
slayt için gittiğini göreceksiniz.

141
00:10:21,400 --> 00:10:22,420
Aksini yapar.

142
00:10:22,480 --> 00:10:26,360
Peki ekran üzerinden kurtulursam gösteriyorlar.

143
00:10:26,710 --> 00:10:28,630
Ve şimdi düğmeyi tıklıyorum.

144
00:10:28,630 --> 00:10:33,590
Yükseklikleri hareketlidir ve yukarı doğru slaytlar ve en sonunda Yok olarak ayarlanır.

145
00:10:33,910 --> 00:10:41,540
Ve diğer yöntem, yalnızca ne yapacağınıza karar verdiği Faid geçiş gibi çalışan slayt geçişidir.

146
00:10:41,650 --> 00:10:48,090
Böylece tıklarsam yukarı kayarlar ve şimdi kayarak aşağıya ve yukarıya doğru kayarlar.

147
00:10:48,370 --> 00:10:51,740
Dolayısıyla hepsini slayt aşağı slayt ve geçiş geçiş yapmaktır.

148
00:10:51,760 --> 00:10:54,320
Tıpkı ücretli analog yöntemler gibiydiler.

149
00:10:54,610 --> 00:10:57,580
Ayrıca geçebileceğimiz isteğe bağlı bir geri arama var.

150
00:10:57,790 --> 00:11:04,250
Yani 1 saniyelik bir süre verdiysek aramamızı geri alabilirsem.

151
00:11:04,600 --> 00:11:09,380
Ve ben sadece bir daha yapacağım. bu günlük son slayt yapılır.

152
00:11:09,730 --> 00:11:15,250
Ve bu, yalnızca ikinci slayt tamamlandıktan sonra yazdırılacaktır.

153
00:11:15,250 --> 00:11:16,130
Bu yüzden yenileyiyorum.

154
00:11:16,270 --> 00:11:24,970
Konsola bakalım ve tıklamaya tıkladıklarında bunu yalnızca slayt bittiğinde basılmış olarak

155
00:11:24,970 --> 00:11:25,630
görebilirsiniz.

156
00:11:25,630 --> 00:11:28,380
Aynı şey burada dikkat ediyor.

157
00:11:28,390 --> 00:11:31,330
Bu altıya değişecek.

158
00:11:31,330 --> 00:11:32,630
Oraya gidiyoruz.

159
00:11:33,290 --> 00:11:40,510
Ancak yine de daha yaygın olan bir kalıp, öğeleri kaydırdıktan veya silmek için öğeleri

160
00:11:40,510 --> 00:11:43,670
kaldırmak veya yaptığımız şey onları kaldırmaktır.

161
00:11:43,690 --> 00:11:48,400
Dolayısıyla, onları kaydırmak bir saniye alacak ve sonra sayfadan çıkarılacaktır.

162
00:11:48,460 --> 00:11:53,970
Ve elemanlar sekmesine gidersek, o düğme ve senaryo dışında bedenimiz boş olur.

163
00:11:54,580 --> 00:11:58,810
Umarım bir taş ocağındaki etkilerden bazılarının nasıl çalıştığına dair size iyi bir fikir verirler.

164
00:11:58,810 --> 00:12:02,110
Bunlar çok yaygın soldurma ve kayma.

165
00:12:02,110 --> 00:12:06,190
Ve bir sonraki video'da başlayacağımız liste uygulaması yerine bunları kullanacağız.