Burada biraz ileri atlıyoruz. Bu oldukça kapsamlı bir ekran video kaydı dizisi, ancak yaklaşık 40 saat ve tabii ki bu gerçek proje aslında birkaç yüze benziyor. Bu durumda, ileriye doğru sıçrama, iki sayfalık yayılmayı biraz biçimlendirmekti. Başlangıçta bu değişimlerin üzerinden geçiyoruz.
Sol ve sağ sayfaların bir paylaşılan ve bir farklı sınıf adı vardır. Bu, web tasarımında birçok farklı senaryoda bulduğum çok yaygın. Bu durumda, sayfalar aynı degradeyi ve aynı boyutu paylaşır. Ancak CSS3 skew()dönüşümü uyguladığımızda farklılık gösterirler . Bu bize bir tür "açık kitap" etkisi veriyor. Tüm bu efektler CSS ile oluşturulduğundan, güzel bir şekilde ölçeklenirler (bir görüntünün neredeyse kesinlikle olmayacağı şekilde).
Yerinde akıllıca eşit yüksekliklerde bir çözümümüz vardı, ancak maalesef zekice açık kitap çarpık kitaplarımız yüzünden bu kırılıyor. Bunun yerine, sadece JavaScript'i kullanıyoruz.
Öncelikle, JavaScript'e bakarken, çocuğu olmayan "harfleri" gizleyecek bir satır yazıyoruz. Örneğin, "Z" ile başlayan hiçbir seçici yok, ancak kapsamlı olması için yayınlanan bir sayfamız var. Bunları ultra kullanışlı jQuery :has()seçici ile keşfederiz (ve sonra gizleriz) .
Eşit yükseklikler için, iki sütunu da ölçüyoruz, hangisinin en yüksek olduğuna karar veriyoruz ve sonra ikisini de en uzun olana ayarlıyoruz. @ Font-face yüklemesinin biraz zaman alması ve yükseklikleri etkilemesi nedeniyle düzgün çalışması için biraz hilekar bir setTimeout kullanmalıyız. Nihayetinde bir tür yazı tipi yükleyici geri araması kullanabiliriz. (Ya da bu aşırı olabilir).
Sonra tek almanak sayfalarına geçiyoruz. Hemen şimdi kamyonla yolculuk! Bu tür şeyleri pek çok kez yaptık, şimdi daha hızlı hareket etmemiz şaşırtıcı değil. Esasen bu şablonu, tek bir blog gönderisini veya genel bir sayfayı veya bunun gibi herhangi bir şeyi şekillendirdiğimiz şekilde şekillendiriyoruz.
Kırıntılar için "siyah çubuk" kullanıyoruz ve bu tasarım modelini site-bölüm gezinme için tekrar tekrar kullanacağımız bir şey olarak pekiştiriyoruz.