-
Benim adım Lucas.
Google Web Designer'da
-
mühendisim.
-
Bu videoda, önceki videolarda
açıklanan medya kurallarını kullanarak
-
duyarlı dokümanlar oluşturma konusunu
daha ayrıntılı bir şekilde ele alacağız.
-
Bu videoda, animasyonların ve medya
kurallarının nasıl birleştirileceğini göstereceğiz.
-
Görüntü alanı dar
olduğunda dikey,
-
görüntü alanı geniş
olduğunda yatay
-
bir düzeni olan basit bir
dokümanla başlayalım.
-
Şimdi bu dokümanı
genişleteceğim. Böylece,
-
yatay düzende ve
yeterli yüksekliğe sahip
-
tek bir resim yerine,
başlangıçta birleşik olan
-
ama daha sonra bir
animasyonla
-
birbirinden ayrılan iki resmi oluyor.
-
Web Designer, animasyonları
göstermek için CSS3
-
animasyon kareleri
kullandığından, bu animasyonu
-
medya kuralları ile
kodlayabilirsiniz.
-
Başlamak için ana
içeriğe geçeceğim.
-
Sonra, bu resmi
kopyalayıp yapıştıracağım.
-
Ardından, yeni resimde, farklı
bir öğeye işaret edeceğim.
-
Bunu da doğrudan öğenin
yolunu değiştirerek yapıyorum.
-
Bunu ayrıca varsayılan
olarak gizleyeceğim.
-
Şimdi tekrar medya
kurallarına dönüyor
-
ve yüksekliğe bir ayrılma
noktası ekliyorum.
-
Yüksekliğin üst aralığını düzenlemekte
olduğumuzu görebiliyoruz.
-
Dolayısıyla, şimdi bu iki
resmin her biri için bir
-
animasyon karesi ekleyeceğim.
-
Hareket Ettirme aracıyla bunları
dikey olarak hareket ettireceğim.
-
İşte bu şekilde.
-
Son olarak, ikinci resmin
görünürlüğünü ayarlayıp
-
yine görünür
hale getireceğim.
-
Şimdi animasyonu önizlemek
için ileri geri oynatabilirim.
-
Görüntü alanının boyutu
değişse bile
-
iki resim birlikte ortalanmış
şekilde kaldığından
-
bu animasyon duyarlıdır.
-
Ancak, görüntü alanının
boyutunu bu medya kuralından
-
başka medya kuralına getirirsem
animasyon kaybolur.
-
Bunu zaman çizelgesinde
görebilirsiniz.
-
Sağ alttaki medya kuralında
olmadığım zaman tüm
-
tüm kanallar boş oluyor.
-
Şimdi, bu resmin şeffaflığının
yavaşça 0'dan 1'e çıktığı bir
-
varsayılan animasyonum
olmasını istediğimi düşünelim.
-
Bunu yapmak için
ana kurallarda,
-
bir animasyon karesi ekleyeceğim.
-
Temel şeffaflığı 0
olarak ayarlayacağım.
-
Animasyon karesinde de
şeffaflığı 1 yapacağım.
-
Böylece, ana içerikte
resmin belirdiğini görüyoruz.
-
Medya kurallarına
geri dönersek
-
her bir medya kuralında
aynı belirme
-
animasyonunun
gerçekleştiğini görürüz.
-
Burada bir tane var.
-
Bu ikincisi.
-
Bu da üçüncüsü.
-
Bunun tek istisnası sağ
alttaki medya kuralıdır.
-
Burada, bir geçersiz
kılma animasyonu tanımladım.
-
Tek düzeltmemiz gereken,
ilk resmin temel şeffaflığı
-
için tekrar 0 değerini
tanımlamak
-
olacaktır.
-
Şimdi, değeri
tekrar 1 yapıyoruz.
-
Şimdi animasyonun eski
haline döndüğünü görebiliriz.
-
Medya kuralını geçersiz
kılan bir animasyon
-
olup olmadığını zaman
çizelgesinde vurgulanan
-
animasyon etiketinden
her zaman anlayabilirsiniz.
-
Bu etiketi tıklarsanız
geçersiz kılma animasyonunu
-
kaldırmak ve varsa onun yerine
temel animasyonu kullanmak
-
için kullanabileceğiniz
bir pop-up görürsünüz.
-
Animasyonların medya
kurallarıyla birleştirilmesi
-
konusunda söylemek
istediklerim bu kadar.
-
İzlediğiniz için teşekkürler.
