Çarşamba 25 Ocak 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. Arayüz
  3. CSS Scroll Snap Points ‘e Giriş
 CSS Scroll Snap Points ‘e Giriş
Arayüz CSS

CSS Scroll Snap Points ‘e Giriş

Yazar : Bilal UÇAR 25 Eylül 2017 0 Comment

İçindekiler

  • Kaydırma noktaları olmadan kaydırma (Scrolling without scroll snap points)

  • Kaydırma noktaları ile kaydırma (Scrolling with scroll snap points)

  • Browser support (Tarayıcı desteği)

  • Kod örneği

CSS Scroll Snap Modülü, bir web sayfasındaki kaydırma üzerinde bize biraz kontrol olanağı sağlayan bir web standardıdır; böylece kullanıcıların, herhangi bir sayfanın belirli bir yerine kaydırmasını sağlayabiliriz.

Kaydırma, bir web sitesinde en çok uygulanan işlemlerden biridir. Tarayıcılar, yıllar geçtikçe, kullanıcıların çevik parmak kuvvetlerine uyacak şekilde kaydırma performanslarını geliştirdiler. Ve geliştiriciler kaydırmayı yaratıcı bir şekilde daha iyi veya kullanıma hazır bir kullanıcı deneyimi elde etmek için kullandı.

Bununla birlikte, kodlama ve kaydırma arasındaki korelasyona gelindiğinde, sadece JavaScript‘in bu kod üzerinde herhangi bir kontrol hakkı var gibi görünüyordu. Bu çok uzun bir süre oldu, ancak Scroll Snap Points ile CSS yakalamaya başladı.

Kaydırma noktaları olmadan kaydırma (Scrolling without scroll snap points)

Tipik olarak, özellikle telefonlarda çok yavaş ilerlemez. Kaydırma işlemi ne kadar çabuk olursa, kaydırma işlemini durdurduğunuzda ekranın neresinde olacağınıza nazaran daha az kontrole sahip olursunuz.

Örneğin, aşağıdaki demoda kullanıcı kaydırmayı bıraktığında görebilirsiniz; yalnızca görüntünün yaklaşık yarısı ekranın alt kısmında görünürdür. Bununla birlikte, çoğu kullanıcı son resmi tamamen görmeyi tercih eder.

Kaydırma noktaları ile kaydırma (Scrolling with scroll snap points)

İşte CSS kaydırma noktalarını getiriyoruz. Adı açıklayıcı değildir; kaydırma yaparken öğeleri yerine oturtmamızı sağlayan bir CSS standartıdır.

Bu standardı oluşturan beş CSS özelliği vardır:

1. scroll-snap-type
2. scroll-snap-points-x
3. scroll-snap-points-y
4. scroll-snap-coordinate
5. scroll-snap-destination

Browser support (Tarayıcı desteği)

Tarayıcıların ilgili özellikleri için -webkit ve -ms ön ekleri gerekir. Bu makaleyi yazarken, Chrome ve Opera’da CSS scroll snap desteklenmiyor.

Son dört özelliğin yakın gelecekte değişebilir. Bunun yerine, yeni özellikler scroll-snap-align, scroll-snap-margin ve scroll-snap-padding oluşturulabilir.

Kod örneği

Aşağıda, dikey yönde kaydırma ve içinde bazı resimler bulunan tipik bir kaydırma kapsayıcısı için örnek bir kod parçası yer almaktadır. Bu yazının başında bulabileceğiniz demoyu çıkarır.

Şimdi, snap points to the scroll ekleyelim:

Aşağıda, CSS ek bileşen noktaları eklendiğinde çıktıların nasıl göründüğünü görebilirsiniz. Alt resim yalnızca kısmen görünürken kaydırma işlemi durduğunda dikkat edin, tam ekran resmi kaydırma çubuğu üstteki bir noktaya oturduktan sonra görünür.

Bu makalede CSS ‘te kaydırma işlemlerinin kontrolünü almanızı sağlayacak CSS Scroll Snap Points ‘e giriş yaptık. Siz de düşüncelerinizi yorum yaparak Mutfağa katkıda bulunabilirsiniz.

Etiketler: css kaydırma noktaları css scroll snap module css scrolling scroll snap points
Ö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.