Cuma 24 Mart 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. JavaScript
  3. Parallax Kaydırma, StickyStack.js ile Daha Kolay
 Parallax Kaydırma, StickyStack.js ile Daha Kolay
JavaScript

Parallax Kaydırma, StickyStack.js ile Daha Kolay

Yazar : Bilal UÇAR 31 Ağustos 2017 0 Comment

Paralaks efektleri dikkat çeker. Bu efektler, sayfayı aşağı doğru kaydırırken belirli arka planları görmenizi sağlar. Birçok web sitesinde ve WordPress temalarında paralaks kaydırmayı bulacaksınız ve bunlar modern web tasarımının büyük bir parçası.

StickyStack.js eklentisini kullanarak benzersiz bir paralaks stili de oluşturabilirsiniz. JQuery üzerine inşa edilmiş ve aşağıya doğru ilerlerken her ana sayfa bölümünün en üste yapışmasını sağlıyor.

Bu, her sayfanın üst üste “yığıldığı” katmanlı bir web sitesinin illüzyonunu yaratır. Kendi başına kurulması gerçekten harika ve oldukça kolaydır.

Kurmak oldukça kolay olsa da, front end gelişimini biraz anlayabilmek gerekir.

Ana konteynerde önce tek tek sayfa bölümleri oluşturmanız gerekir. Bu şekilde, her şeyi HTML’ye çevrilmiş halde olacak, böylece her şeyi StickyStack jQuery işlevi ile hedefleyebilirsiniz.

Ayrıca üst konteyneri özelleştirebileceğiniz, yığınlaması gereken öğeleri ve o efekti isterseniz olası bir kutu gölgesini seçebileceğiniz birkaç seçenek bulunur.

İşte GitHub sayfasından örnek bir kod parçası:

$('.main-content-wrapper').stickyStack({
  containerElement: '.main-content-wrapper',
  stackingElement: 'section',
  boxShadow: '0 -3px 20px rgba(0, 0, 0, 0.25)'
});

Bu yaklaşık iki yıl içinde güncellenirken, yine de çok güvenilir bir eklentidir. Test ettiğim tüm tarayıcılarda (Chrome, Safari ve Firefox) jQuery’nin tüm sürümlerine destek vererek çalıştı.

Ayrıca, küçültülmüş dosya yalnızca bir eklenti için uygun bir boyut olan 2 KB’dir.

Daha fazla bilgi edinmek için ana repo’yu ziyaret edin ve StickyStack’in neler sunabileceğini görün. Tek sayfalı web sitelerinde veya tam ekran arka planı olan açılış sayfalarında en iyi sonucu verdiğini düşünüyorum.

Bunun canlı bir sitede nasıl göründüğünü görmek istiyorsanız, CodePen’de canlı bir demoyu da kontrol edebilirsiniz.

Bu makalede modern web tasarımın büyük bir parçası olan parallax efektini uygulamanıza yardımcı olan StickyStack.js jQuery eklentisinden bahsettik. Siz de düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.

Etiketler: javascriptte parallax nasıl yapılır parallax efekti parallax javascript parallax örnek
Önceki Yazı
Sonraki Yazı

Bilal UÇAR (Website)

administrator

Front-end Developer @Webmaster.Kitchen. Front-end developer olarak çalışıyorum. Bu konuda öğrendiklerimi sizlerle paylaşmaya çalışıyorum. Siz de yaptığınız çalışmaları, edindiğiniz bilgileri paylaşabilirsiniz. Yorum alanı ile mutfağa katkıda bulunun.

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.