Yalnızca CSS Yapışkan Altbilgisi Nasıl Oluşturulur
Normalde, JavaScript’e ihtiyacımız var. kaydırma efektleri gerçekleştir web sayfalarındaki farklı kullanıcı eylemleriyle ilgili. Betik işini yapar kaydırma işleminin ne kadar yukarı veya aşağı kaydırıldığını izleme, ve bir eylemi tetikler Bir eşik yüksekliğine ulaşıldığında.
Özellikle kaydırma efektleri için JavaScript kullanmak kötü bir şey değil. Aslında daha karmaşık vakalar var. JavaScript olmadan çözmek imkansız. Ancak var CSS saldırıları Bu komut dosyalarını zaman zaman değiştirebilir.
Bu yazı size ho gösterecekw CSS kullanarak sayfa kaydırmada altbilgi ortaya çıkarma efektleri oluşturmak için. Bunu göstermek için iki kullanım örneği kullanacağız: bir tanesi tüm sayfa için (demo'ya bakınız) ve bir tanesi makaleler gibi bireysel sayfa öğeleri için.
Tam sayfa
Bir altbilgi oluşturmamız gerekiyor. sayfanın altından görünür kullanıcı aşağı kaydırırken. Ayrıca, sayfayı geri kaydırırken altbilginin saklı kal tekrar sayfanın altında.
Bu hedefe ulaşmak için önce bir sabit konumlu altbilgi ekranın altında.
1. Sabit Altbilgi Oluşturma
Haydi biraz içerik ve altbilgi ekle önce sayfaya. HTML etiketlerini kullanıyorum Demomda altbilginin içinde ürkütücü olmayan bir efekt için gösterilen bir yarasa görüntüsü var, ancak istediğiniz herhangi bir görüntüyü seçebilirsiniz. Lorem ipsum dolor amet otur… CSS’ye taşınmak, herhangi bir alanı kaldır etrafında Bazı boyutlar ver ( Uygulamak Renk hem Yı kur Bu şekilde alt kısımda altlık için yeterli alan olacaktır. görünür Ol kullanıcı sayfayı aşağı kaydırdığında. Bu kadar. Tam bir web sayfası için altbilgi ortaya çıkarma efekti yapılır. Aşağıdaki Codepen demosuna göz atın. Bu teknik, ayrı bir HTML öğesi için (altbilgiyle) kullanılabilir. yeterince uzun uygun bir sayfa kaydırma efekti için. Bu yöntem şu anda Chrome ve IE’de çalışmadığı için biraz taklit ediciyken iyi bir geri dönüşe sahip. İlk olarak, bir altbilgi ile uzun bir makale oluşturalım. Anlamsal kodu tanıtmak için seçtim Lorem ipsum dolor amet otur… Aşağıda görebilirsiniz temel stil makale ve altbilgi. Makalem şu anda böyle görünüyor. Elbette diğer temel stil kurallarını da kullanabilirsiniz.. Önceki altbilgi düzeltildi, bu olacak yapışkan ol. Uygulamak Kullanıcı, aşağı veya yukarı kaydırırken altbilginin görünmeye veya kaybolmaya başladığı noktayı belirlediği için değerini zevkinize göre ayarlayabilirsiniz.. Ver makalenin alt marjı için aynı değer, Böylece dipte tam altlığı göstermek için yeterli alan olacaktır.. Şimdi ihtiyacımız var makalenin altındaki bir boşluk Yapışkan altbilginin aşağı ve yukarı doğru kaydığını görebiliriz.. Bunu başarmak için, Sonunda hadi altbilgiyi makalenin arkasına yerleştirin kullanmak İşte bu, kaydırma açıklığı özelliğine sahip tek tek sayfa öğesi yapılır. Aşağıdaki Codepen kalemini inceleyin. Her iki kullanım durumunu da Github sayfamızda bulabilirsiniz.. ve anlambilim için. ancak,
Altbilgiyi görene kadar kaydırmaya devam et
ile etiketle kenar boşluklarını 0'a ayarlamak, ve yeterince uzun özel yükseklik ekleme kaydırmayı başlatmak için (sayfanızdaki gövde içeriği kaydırmaya neden olacak kadar uzunsa, bir yükseklik vermeniz gerekmez).Genişlik ve yükseklik) altbilgiye ve pozisyonunu düzelt Ekranın altına pozisyon: sabit; ve alt: 0; özellikleri. body font-family: Crimson Text; yazı tipi boyutu: 13pt; marj: 0; altbilgi genişlik:% 100; yükseklik: 200px; pozisyon: sabit; alt: 0; arka plan rengi: # DD5632;
2. Altbilgiyi Gizle
Z-endeksi: -1 altbilgiye hükmetmek diğer tüm öğelerin arkasına yerleştirin sayfada. ve beyaz etiketler altbilgiyi ört. vücut, html background-color: #fff; altbilgi genişlik:% 100; yükseklik: 200px; pozisyon: sabit; alt: 0; arka plan rengi: # DD5632; z-endeksi: -1;
3. Alt Kenar Boşluğunu Ayarlayın
kenar dipli arasında etiket altbilginin yüksekliğine eşit (benim örneğimde 200px). vücut yükseklik: 1000px; marj: 0; marj-alt: 200 piksel;
Bireysel Sayfa Öğeleri
1. Uzun Bir Makale Yaratın
ve .
Madde 1
makale genişlik: 500px; background-color: # FEF9F3; dolgu maddesi: 20px 40px; article> footer yükseklik: 100 piksel; arkaplan rengi: # FE0178; vücut font-ailesi: karabatak garamond;
2. altbilgi yapışkan olun
pozisyon: Yapışkan altbilgiye hükmettiği için, makalenin sınırları içinde hareket eder, ancak yine de pozisyonunu koru kullanıcı yukarı ve aşağı kaydırma yaparken ekranda. makale> altbilgi yükseklik: 100px; arkaplan rengi: # FE0178; pozisyon: -webkit-yapışkan; pozisyon: yapışkan; alt: 80 piksel;
bottom: 80px kural altbilginin konumunu düzeltir Makalenin altındaki 80px. makale genişlik: 500px; background-color: # FEF9F3; dolgu maddesi: 20px 40px; marj-alt: 80 piksel;
3. Kısmen Saydam Bir Arka Plan Ekleyin
arka plan rengi makalenin bir doğrusal gradyan arka plan görüntüsü, makalenin üstünden altbilginin üstüne arka plan rengiyle renkli Eşyanın kalan kısmı ve alt kısmı şeffaf yapıldı. makale genişlik: 500px; dolgu maddesi: 20px 40px; arka plan görüntüsü: doğrusal gradyan (aşağıya doğru, # FEF9F3 calc (100% - 120px), şeffaf 0); marj-alt: 80 piksel;
hesaplanan (% 100 -120px) CSS işlevi hesaplar makalenin tam yüksekliği eksi altbilgi. Örneğime göre 120px (yükseklik için 100px) + Dolgu için 20px).
4. Altlığı Geri Yerleştirin
z dizini: -1 CSS kuralı. makale> altbilgi yükseklik: 100px; arkaplan rengi: # FE0178; pozisyon: -webkit-yapışkan; pozisyon: yapışkan; alt: 80 piksel; z-endeksi: -1;
