Anasayfa » Kodlama » Yalnızca CSS Yapışkan Altbilgisi Nasıl Oluşturulur

    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

    ve
    anlambilim için. ancak,
    de çalışır.

    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.

     

    Altbilgiyi görene kadar kaydırmaya devam et

    Lorem ipsum dolor amet otur…

    CSS’ye taşınmak, herhangi bir alanı kaldır etrafında 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).

    Bazı boyutlar ver (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

    Uygulamak Z-endeksi: -1 altbilgiye hükmetmek diğer tüm öğelerin arkasına yerleştirin sayfada.

    Renk hem 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

    Yı kur kenar dipli arasında etiket altbilginin yüksekliğine eşit (benim örneğimde 200px).

    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.

     vücut yükseklik: 1000px; marj: 0; marj-alt: 200 piksel; 

    Bu kadar. Tam bir web sayfası için altbilgi ortaya çıkarma efekti yapılır. Aşağıdaki Codepen demosuna göz atın.

    Bireysel Sayfa Öğeleri

    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.

    1. Uzun Bir Makale Yaratın

    İlk olarak, bir altbilgi ile uzun bir makale oluşturalım. Anlamsal kodu tanıtmak için seçtim

    ve
    .

     

    Madde 1

    Lorem ipsum dolor amet otur…

    Aşağıda görebilirsiniz temel stil makale ve altbilgi.

     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;  

    Makalem şu anda böyle görünüyor. Elbette diğer temel stil kurallarını da kullanabilirsiniz..

    Altbilgi olan Makale - Temel Stil
    2. altbilgi yapışkan olun

    Önceki altbilgi düzeltildi, bu olacak yapışkan ol. Uygulamak 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.

    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..

     makale genişlik: 500px; background-color: # FEF9F3; dolgu maddesi: 20px 40px; marj-alt: 80 piksel; 
    3. Kısmen Saydam Bir Arka Plan Ekleyin

    Ş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, 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).

    Doğrusal-Degrade Arka Plan Görüntüsü ve Yapışkan Altlığı Olan Makale
    4. Altlığı Geri Yerleştirin

    Sonunda hadi altbilgiyi makalenin arkasına yerleştirin kullanmak 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; 

    İş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..