Paralaks Kaydırma Efekti Oluşturmak için 10 CSS ve JavaScript Parçacığı

Paralaks tasarımı ve web'de nasıl çalıştığı hakkında çok fazla kafa karışıklığı var. Genel olarak konuşursak, paralaks tasarımı, bir sayfada derinlik yanılsaması yaratmak için hareketi kullanır.

Bu, kullanıcının kaydırması boyunca hareket eden arka plan değişiklikleri veya yarı sabit konum öğeleriyle ilgili olabilir. Web sitelerinden birçok örnek inceledik ancak ilgili teknikler hakkında ayrıntılı bilgi vermedik.

Bu koleksiyon için, paralaks düzenleri oluşturmak için en sevdiğim CSS ve JavaScript snippet'lerini seçtim. Tüm örnekler ücretsiz kaynak kodu sunar, böylece snippet'lerle oynayabilir ve hatta bunları kendi projelerinizde kullanabilirsiniz.

1. Büyük Düşüş , CJ Gammon

Bu paralaks örneği, şimdiye kadar bulduğum en benzersiz arayüzlerden biri. Sayfada sonsuz bir şekilde akıyor gibi görünen bir şelale hareketli grafiği oluşturmak için özel bir komut dosyası kullanır. JavaScript aracılığıyla kontrol edilen tuval öğeleri üzerine inşa edilmiştir, bu nedenle oldukça teknik bir kurulumdur.

Çoğunlukla bu, modern web geliştirmede nelerin mümkün olduğunun bir kanıtıdır. Tuval öğesini öğrenmek, tasarımınız üzerinde size çok fazla kontrol sağlar.

CJ Gammon'dan Kalemi Gör Büyük Düşüş

2. Sebastian Schepis'ten CSS Kaydırma Paralaksı

İşte sabit bir arka plan ve üstte daha büyük sayfalar ile daha pratik bir paralaks efekti. Kaydırdığınızda, her sayfa bölümü arka planın üzerinde görünür. Bu, derinlik yanılsaması yaratır ve mükemmel bir paralaks tasarımının kilit unsurlarından biridir.

Geliştirici Sebastian Schepis bu sayfa için yalnızca CSS kullandı ve bu oldukça basit bir konsept. Bence herkes bunu kolaylıkla klonlayabilir, arka plan tasarımının büyük ölçüde geliştirilebileceğinden bahsetmiyorum bile.

Sebastian Schepis'in Kalem CSS Kaydırma Paralaks Etkisini Görün

3. Renan Breno'dan Basit Görüntü Etiketi Paralaksı

Büyük tam ekran arka plan resimleriyle birlikte genellikle paralaks tasarımları bulacaksınız. Bunların hepsi, arka plan için genellikle belirli bir paralaks “kaydırma hızına” sahip oldukları şirket sitelerinde ve yeni başlayanlarda çok yaygındır.

Buradaki fark, sayfayı ne kadar hızlı kaydırdığınız veya resim yerleşiminin ne kadar büyük olduğu değil. Bunun yerine, siz kaydırırken görüntünün sayfanın arka planında ne kadar hızlı hareket ettiğini görürsünüz. Bu, ince bir paralaks etkisidir, ancak bu düzen, farklı animasyon hızlarını çalışırken görmek için mükemmel bir şablondur.

Renan Breno'nun Kalem Basit Görüntü Etiketi Paralaksını görün

4. Paralaks ve Sabit Görüntü Arka Planları

Sabit görüntü arka planları, sayfaları bölmek ve içerik bölümlerini eşit olarak bölmek için iyi çalışır. Kaydırırken, tek tek sayfa bölümlerinin arka plan resimlerinden daha yüksek olduğunu hissedebilirsiniz. Bunların hepsi, kaydırma sırasında paralaks etkisine hayat vermek için tasarım gereğidir.

İçerik alanları biraz ince göründüğü için tam olarak bu düzeni kullanmazdım. Ancak bu stili beğendiyseniz, her sayfa bölümünü web sitenizle alakalı farklı bir resimle noktalamanızı tavsiye ederim.

Chaobu tarafından kalem #Maincode Hackdays bakın

5. Paulo Cunha'dan CSS Paralaksı

Bu paralaks örneği, paralaks etkilerinin nasıl çalıştığına dair benzersiz bir örnektir. Tüm sayfa içeriği, kaydırma sırasında içeriğin altında kaybolan büyük bir kahraman resminin altında bulunur. Bu aynı zamanda, görüntünün yerinde sabit kalması yerine sayfanın görüntü üzerinde hareket ediyormuş gibi görünmesini sağlamak için sabit görüntü konumunu kullanır.

Aynı efekti uzun kaydırma düzeniyle de kullanabilirsiniz ve benzer bir tasarım stiline sahip olur. Bu, büyük özellikli görsellere sahip tek blog gönderileri veya dikkat çekmek için büyük kahramanlar kullanan açılış sayfaları için en iyi sonucu verir.

Paulo Cunha'nın Kalem CSS Paralaksını görün

6. Katie Rogers'ın Paralaks Tasarımı

İşte örnek bir düğün sayfası için ilginç bir paralaks tasarımı. Görüntülerin birçok farklı içerik alanını paralaks sabit kaydırma ile ayırdığı bölünmüş bir sayfa tasarımına sahiptir. Her şey güzel bir dokunuş olan CSS'de çalışır ve tüm arka plan resimleri sayfada aşağı doğru hareket ederken sabit kalır.

Bu efekt, içerik alanlarında arka planların üzerine düşen büyük kutu gölgelerine sahip olduğundan işe yarar. Doğal olarak bu, sayfaya teorik bir ışık kaynağı ve hiyerarşi vererek derinlik yanılsaması yaratır - tek sayfalık bir düzen için çok güzel bir fikir.

Katie Rogers'ın Kalem Paralaks Tasarımını görün

7. Rich Howell tarafından Kaydırılan Arka Plan-Görüntü Paralaksı

Daha önce, kaydırma hızının arka plan konumu değişim hızına göre nasıl değişebileceğinden bahsetmiştim. Bu örnek, bunun nasıl çalıştığını görmek için mükemmel bir karşılaştırmadır.

Bu örneğin etkilerini görmek için kaydırma çubuğunu kullanmanız gerekeceğini unutmayın. Fare tekerleğini denedim ve herhangi bir fark göremedim, ancak kaydırma çubuğunu hareket ettirdiğinizde sütunlar arasında hız değişimlerini fark edeceksiniz.

Bu hızların hiçbiri paralaks tasarımının yanlış veya hatalı tasvirleri değildir. Bunlar, sayfada hareket oluşturmak için yalnızca farklı yöntemlerdir ve bu küçük örnek, birçok seçeneği görselleştirmenin harika bir yoludur.

Rich Howell'in Kalem Kaydırma Arka Plan-Görüntü Paralaksını görün

8. Saransh Sinha'nın Yıldızlı Paralaks Arka Planı

Bu etki kaydırma ile ilgili olmasa da doğrudan paralaks tasarımı ile ilgilidir. Sayfanın arka planında bir paralaks yıldız animasyonu oluşturmak için saf CSS kullanır. Sayfanın üzerine metin ve hatta bir içerik alanı ekleyebilirsiniz, ancak yıldızlar ilk bakışta hemen derinlik yaratır.

Animasyon CSS üzerinden çalışır, ancak bu snippet Sass ve Compass'ı kullanır, bu nedenle düzenleme yapmadan önce anlamak faydalı olacaktır.

Saransh Sinha'nın CSS'deki Pen Paralaks Yıldızı arka planına bakın

9. Jack Rugile tarafından Tuval Paralaks Skyline

Bazen paralaks tasarımları, kaydırma özellikleriyle birlikte fare hareketini de hedefler. Bu tuval tasarımı, sayfadaki fare hareketine tepki veren sonsuz bir ufuk çizgisi efekti yaratır. Farenizi yeniden konumlandırdıkça görüş açısı değişir. Ancak animasyon aynı kalır ve bu ufuk çizgisinin net bir görsel hiyerarşi ile hareket ettiğini görebilirsiniz.

Doğal olarak, bu oldukça karmaşık bir fikir olduğu için animasyon için JavaScript gerektirir. Ama aynı zamanda birçok web sitesinde bulacağınız bir şey değil, bu yüzden sitenize kopyalayacağınız bir şey de değil. Ama bir paralaks kavramı olarak, bu gerçekten ilginç.

Jack Rugile'nin Kalem Tuval Paralaks Manzarasını Görün

10. Bajjy Xilo'dan Kırık Cam Filtresi

Bu etkiyi daha önce web sitelerinde gördüm, çok tuhaf bir tasarım yarattım. Kırık cam filtre, birçok farklı parçaya bölünmüş bir arka plan görüntüsü yanılsaması verir. Görüntü neredeyse cam bir bölmedeymiş gibi görünüyor ve paramparça oldu, görüntüyü kırdı ve görüntüyü eğriltti.

Bu efekti saf CSS ile çoğaltabilirsiniz ve bu, yapması harika olan ancak fantezi tasarımların ötesinde herhangi bir pratik, gerçek dünya kullanımı olmayabilecek şu zarif efektlerden biridir. Yine de bu, kaydırma sırasındaki paralaks derinliği ve hareketinin etkileyici bir örneğidir.

Bajjy Xilo'nun Pen BrokenGlass css filtresine bakın