Sitenizde Katmanlı Paralaks Etkisi Nasıl Oluşturulur

Sep 10, 2025
Nasıl Yapılır
layered parallax effect
(Resim Kredi: www.beargrylls.com)

Paralaks hareket, farklı hızlarda hareketli katmanlar kavramı, animasyonda yıllardır kullanılmıştır. BEAR GRYLLS'in resmi web sitesi (favorilerimizden biri paralaks kaydırma siteleri ), etkiyi yeni ve ilginç yönlerde alır. Arka plan dağlar, solmaya başlarken, tamamen opak olurlar ve sayfanın arka planında, 'macera' metnin dağın arkasında yer alıyor.

Daha ilham verici hareket efektleri için, rehberimizi en iyisine göz atın CSS animasyonları ve nasıl kodlanır .

Ayı GRYLLS site tasarımı, İngiltere'nin yaratıcı pazarlama ajansının eseridir. Karakol ve 16 ila 55 yaş arası ve dünya çapında 7 milyondan fazla takipçisi olan bir hedef kitle ile, ellerinde ciddi bir görevi gördüler.

"Web sitesinin ana özelliği ana sayfaydı; ziyaretçilerin tam anlamıyla ekrana atlamasını ve maceralarındaki ayıya katılmalarını istedik," Fooker Chris Wilcock ve Yaratıcı Direktör Dan Williams'ı açıklar. "Bunu başarmak için, bazı akıllı geçişler, düzenlenmiş videolarla, dramatik görüntüler ve sitedeki genel dille birleştiğinde kullandık."

Siteyi harekete geçirmek www.beargrylls.com . Bu yazıda, kendi sitelerinizdeki etkiyi nasıl yeniden yaratacağınızı açıklayacağız. La başlamak Eğitim dosyalarını indirme .

01. Ölçekleme etkisini yaratın

Tüm animasyonlu içeriğin çalışmalarına izin verecek yapı nispeten basittir. Bir sarmalayıcı her şeyi tutar ve herhangi bir taşma içeriğini gizler. Daha sonra üstte esasen üç kat div etiketi vardır. 

 & lt; div class = "sarmalayıcı" & gt;
& lt; div sınıf = "POS metni" & gt; & lt; / div & gt;
& lt; div sınıf = "pos mountain1" & gt; / div & gt;
& lt; div class = "pos mountain2" & gt; / div & gt;
& lt; / div & gt;

02. CSS'yi başlatın

Tasarımı yapmak için, arka plan gradyan görüntüsü vücuda eklenecek ve ekranın boyutunu dolduracak şekilde ayarlanacaktır. Sarıcı tüm katmanları tutar ve içeriğin taşması gizlenir, böylece ölçeklendirme etkileri uygulanabilir. 

 vücut {
Marj: 0;
Dolgu: 0;
Yükseklik:% 100;
Arka plan: URL (IMG / BG.JPG)
merkez merkezi;
Arka plan boyutu: Kapak;
}
.wrapper {
Genişlik: 100vw;
Yükseklik: 100vh;
Konum: Göreceli;
Taşma: Gizli;
}

03. Her katmanı yerleştirin

Bir sonraki kod, her katmanın kesinlikle, birinin yanındaki sargının içinde konumlandırılmasını sağlar. Bunun boyutu, Görüntüler ekranı doldurun, böylece görüntüleri doldurur. 

 .pos {{
Konum: Mutlak;
Üst: 0;
Sol: 0;
Genişlik: 100vw;
Yükseklik: 100vh;
}

04. Metni ekleyin

Metin sınıfı gerçekten sadece sağ görüntüyü ekler ve onu kullanarak yerine getirmeden önce başlangıç ​​konumunu ayarlar. yükseltmek Son adımda eklenecek anahtar kareler. 

 .Text {
Arka plan: URL (IMG / Text.png)
merkez merkezi;
Arka plan boyutu: Kapak;
Dönüştür: Translate3D (0, 30px, 0);
Opaklık: 0;
Animasyon: Moveup 1.8'ler kolaylaştırmak;
Animasyon-Doldurma Modu: İleri;
}

05. İlk dağı canlandırın

İlk dağ, ekrandan daha uzakta ve bu, animasyonlu olacak küçük bir ölçeklendirme alacak. Tüm katmanların opaklığı da düşük bir şekilde belirlenirler. 

 .mountain1 {
Arka plan: URL (img / mountain1.png)
merkez merkezi;
Arka plan boyutu: Kapak;
Dönüştür: skala3d (1.1, 1.1, 1.1);
Opaklık: 0.2;
Animasyon: Ölçekleyici 1S kolaylığı;
Animasyon-Doldurma Modu: İleri;
}

06. Ön plan dağını canlandırın

Ön plan için dağ neredeyse diğer dağla aynıdır - sadece daha çok bir ölçekte bir ölçek yapar. Her iki dağda da 'scaler' anahtar karelerini animasyonlar için paylaşıyor. 

 .mountain2 {
Arka Plan: URL (IMG / Mountain2.png)
merkez merkezi;
Arka plan boyutu: Kapak;
dönüşüm: skala3d (1.3, 1.3, 1.3);
Opaklık: 0.1;
Animasyon: Scaler 1.2S kolaylığı;
Animasyon-Doldurma Modu: İleri;
}

07. Keyframe animasyonu ekleyin

Anahtar kareler şimdi bunu belirten oluşturulur. Hareketin sonu durumunda, bu amaç devleti yerinde tutulacak. Metin taşındı ve dağlar tasarıma sığacak şekilde ölçeklendirilir. 

 @keyframes Moveup {
100% {
Dönüştür: Translate3D (0, 0, 0);
Opaklık: 1;
}
}

@keyframes scaler {
100% {
dönüşüm: skala3d (1, 1, 1);
Opaklık: 1;
}
}

generate CSS

Şimdi büyük bir indirim için CSS oluşturmak için bir bilet alın (Görüntü Kredi: Gelecek)

Bu makale başlangıçta 289'da yayınlandı. Web tasarımcısı - indirimde . Abone olun .

Daha fazla oku:

  • CSS ile SVG'ye animasyon nasıl eklenir
  • Keyifli Web Animasyonları için DOS ve Yapılmayacaklar
  • CSS şekilleri ile nasıl tasarlanır: bir giriş

Nasıl Yapılır - En Popüler Makaleler

Bir yüz maskesi takarken gözlüklerinizi nasıl durdururuz

Nasıl Yapılır Sep 10, 2025

(Resim Kredi: Getty Images) Gözlükleriniz bir yüz maskesi taktığınızda sislenmeye devam ederse, yalnız değil..

JamStack: Bugün daha hızlı, daha verimli web siteleri oluşturun

Nasıl Yapılır Sep 10, 2025

(Görüntü Kredi: Gelecek / Joseph Ford) JamStack, sunucu tarafından istenen minimal yüke sahip web sitelerini olu..

Afinite Tasarımcısı: Efektler ve stilleri nasıl kullanılır?

Nasıl Yapılır Sep 10, 2025

(Resim Kredi: Serif) Kombine vektör ve raster araçları ile, Afinite tasarımcısı Adobe CC'ye uygu..

Otantik bir manga çizgi roman şeridi nasıl oluşturulur

Nasıl Yapılır Sep 10, 2025

Sayfa 1/2: Sayfa 1 Sayfa 1 Sayfa 2 Stil ve bitince manga sa..

Gerçekçi 3D Aydınlatma için 12 İpuçları

Nasıl Yapılır Sep 10, 2025

Aydınlatma herhangi bir şekilde esastır 3d sanat Çalıştığın proje. En temel düzeyde, nesneleri görünü..

Vakfı ile kart tabanlı bir UI oluşturun

Nasıl Yapılır Sep 10, 2025

Kart tabanlı Web sitesi düzeni Web üzerinden çekildi. Pinterest, Twitter, Facebook ve Google tarafından popü..

Ressamın suluboya setlerini nasıl birleştireceğiniz

Nasıl Yapılır Sep 10, 2025

Corel ressamı Suluboya araçları ziyafeti sunar. Her biri bir dizi fırçayla dijital, gerçek ve suluboya alet kat..

Kış ortamı nasıl oluşturulur

Nasıl Yapılır Sep 10, 2025

Kişisel bir görüntü üzerinde çalışmaya başlamadan önce, genellikle bitmiş işlerde ne görmek istediğim hakkında dü..

Kategoriler