CSS ve jQuery ile Sosyal Medya Paylaş Buton Barı 174

CSS ve jQuery ile Sosyal Medya Paylaş Buton Barı

Uzun zamandır yazı giremiyorum sitenin kapanmasına kadar giden bir süreç oldu ama bu kadar emeğin boşa gitmemesi amacıyla geri döndüm. Hem başlangıç olması amacıyla hemde yararlı olacağını düşündüğüm bir css örneği paylaşmak istedim.

Bu yazıda css ve jquery yardımıyla sayfada aşağıya inildiğinde ortaya çıkan yukarı çıkıldığında kaybolan bir sosyal medya paylaş buton barı örneği paylaşacağım.


Başlayalım

Aşağıda gördüğünüz kodlar örneğin full html kodlarıdır. jQuery kaynak dosyasıda en aşağıda çağırılmıştır.

Stil Ayarlarını Yapalım

Asıl işi jQuery ile yapacağımızdan dolayı bu işlemde çok ekstra bir iş yapmadık. CSS ile yaptığımız sadece nesneyi transform ile kontrol etmek ve geçiş efekti eklemek. Çalışma mantığınıda şöyle anlatayım; başlangıçta .so-sticky-share class’ına ekranın en altında y ekseninde eksi vererek bar’ın görüntülenmesini engelledik. jQuery ile scroll’u aşağıya indirdiğimizde eklenecek .so-classname class’ınada y ekseninde eksi verdiğimiz transform değerini sıfırlayarak bar’ı meydana çıkaracağız.

 jQuery Ayarlarını Yapalım

Burada yaptığımız işlemde oldukça basit kısaca anlatmak gerekirse sayfa’da aşağıya indiğimiz anda .so-sticky-share class’ına .so-classname class’ı eklemek ve yukarı çıkıldığında da eklediğimiz bu class’ın silinmesi.

Uckan

1995 doğumlu, balıkesirde yaşayan Fenerbahçeli kendi halinde bir yazar..

Bir Cevap Yaz