Çarşamba 22 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. CSS
  3. Parallax Scrolling Web Tasarımı Nasıl Yapılır?
 Parallax Scrolling Web Tasarımı Nasıl Yapılır?
CSS HTML5 JavaScript

Parallax Scrolling Web Tasarımı Nasıl Yapılır?

Yazar : Fatih 27 Şubat 2017 1 Comment

İçindekiler

      • [mks_icon icon=”fa-thumbs-up” color=”#ec5743″ type=”fa”] Okuma Önerisi: Parallax (Paralaks) web tasarımı nedir?

      • Bu öğreticide öğreneceğiniz konular:

  • Giriş

  • Adım 1 – Setup

  • Adım 2 – Skrollr.js

      • Section 1

      • Section 2

      • Section 3

      • Section 4

  • Sonuç

Paralaks Web Tasarımı Nedir? yazımızdan yola çıkarak Paralaks Web Tasarımı Nasıl Yapılır? yazımızla bugün sizlerle birlikte olacağız. Orta düzeydeki geliştiricilere yönelik olacaktır. Adım adım öğreticiyi izlemek için yazı sonunda projenin son halinin indirip inceleyebilirsiniz.

[mks_icon icon=”fa-thumbs-up” color=”#ec5743″ type=”fa”] Okuma Önerisi: Parallax (Paralaks) web tasarımı nedir?

Bu öğreticide öğreneceğiniz konular:

  • Paralaks web sitesi için html sayfasını nasıl kurabilirsiniz.
  • Sayfa kaydırılırken farklı hızda arka plan görüntüsünün hareketlendirilmesi.
  • Animasyonların zamanlanmasını ve devam süresini tam olarak nasıl kontrol edileceği.

Giriş

Favori kod editörünüzde index.html, /css/main.css ve /js/_main.js dosyalarını açarak başlayalım. Tüm güncellemelerimizi bu dosyalar üzerinde yapacağız.

Adım 1 – Setup

Index dosyasını şimdi bir tarayıcıda görüntülerseniz, normalde olduğu gibi aşağı doğru kaydırıldığında 4 section görürsünüz ve stil(stylesheet) sayfamızda tanımlanan fixed arka plan görüntüsü görürsünüz. Sonra Skrollr.js‘yi başlatıp parallax scrolling efekti oluşturmaya başlayacağız.

Adım 2 – Skrollr.js

Skrollr.js‘i etkinleştirmek ve tarayıcıda section’ların görüş alanı yüksekliğinin %100 kadar yeniden boyutlandırıldıktan sonra Skrollr’u yenilemek için main.js dosyanıza aşağıdaki satırları ekliyoruz.

Section 1

Skrollr’u harekete geçirmek ve arka plan resmimizi ve içeriğimizi farklı bir hızda taşımak için section’ın içeriklerine veri öznitelikleri(data attributes) eklemek zorundayız. Aşağıdaki satırları kopyalayıp index.html dosyanıza yapıştırın.

Tarayıcıya, arka plan görüntüsü konumunu %50 0px den %50 -100px değiştirilmesi gerektiğini söylüyoruz. Yani scrolling(kaydırma) başlangıcından başlayarak #slayt-1 in bottom(alt)’u tarayıcı görüş alanının top(üst) kısmına gelene kadar 100px yukarıya çıkarıldığı anlamına gelir.

Skrollr’un veri özniteliklerini biraz kafa karıştırıcı olabilir. Skrollr Cheatsheet aşağıdaki resimden göz atabilirsiniz.

Yazı, #slide-1 h2 tarayıcımızın merkezine çarptığında ardından ekranda hızla canlanacak ve sönecek kadar sayfayla birlikte ilerliyor.

data-anchor-target, animasyonunuzun tanımlanan hedef elementle ilişkili olarak başlaması ve bitmesi gerektiğini tam olarak tanımlamanızı sağlayan çok güçlü bir özelliktir.

Section 2

İkinci slayttaki animasyonları etkinleştirmek için aşağıdaki kod satırlarını kopyalayıp yapıştırın.

#slide-1 ve #slide-2 arasındaki fark, ikinci slaydın tüm görüş alanı boyunca kaydırılması lakin birincisi zaten görünür halde yüklenir. Bu nedenle, hem data-top-bottom hem de data-bottom-top tanımlıyoruz.

data-center
değeri aslında top(üst) ve bottom(alt) arasında yarım olduğu için hiçbir şey yapmıyor. Lakin farklı değerlerle deney yaparak data-center‘in tüm animasyonu nasıl etkilediğini görebilirsiniz.

.hsContent ve bu slaydın h2‘si için css dosyamızı biraz değiştireceğiz. Çünkü bu başlığın görünüm alanının altına fixed olmasını istiyoruz. Slide 2 için CSS’nizi şu stillerle güncelleyin.

Section 3

Aşağıdaki kod satırlarını kopyalayıp index.html dosyanıza yapıştırın.

Bu aşamaya kadarki section’ların veri özniteliklerini manuel olarak paralaks master sınıfından değişiklik yaptık.

Yine arka planda sayfanın geri kalanında olduğu gibi aynı hızda animasyon yapılıyor ve bu da işleri güzel tutarlı hale getiriyor. Ayarları istediğiniz gibi ayarlayabilirsiniz.

Section 4

Son slaydımız için kopyalama ve yapıştırma ayarlarını yapalım.

Son slayt için de CSS dosyalarını birazcık değiştireceğiz. Stil sayfanızı aşağıdaki kod satırlarıyla güncelleyin.

Son slayttaki başlık üstten 250px olacak şekilde sabitlenir. .hsContent için skrollr öznitelikleri, #slide-4‘ün üst kısmı tarayıcı penceresinin üst kısmından %25‘e ulaşana kadar görünmez hale getiriliyor.

Aşağıdaki button’a tıklayarak projenin son halini indirip daha düzenli bir şekilde inceleyebilirsiniz.

[mks_button size=”medium” title=”Projeyi İndir” style=”rounded” url=”https://ihatetomatoes.net/demos/simple-parallax-scrolling-tutorial-f1207.zip” target=”_blank” bg_color=”#ec5743″ txt_color=”#FFFFFF” icon=”fa-arrow-down” icon_type=”fa”]

Sonuç

Basit bir animasyon içeren Parallax Scrolling efektli bir web sitesi tasarladık. Parallax Scrolling web sitesi hakkında düşüncelerinizi bizlerle paylaşabilirsiniz. Aşırı kullanılır mı? Hangi projelerde kullanılmalı? vb. yorumlarınızı beklemekteyiz.

Kıymetli zamanınızı bu yazımız için ayırdığınız için çok teşekkür ederiz. Verimli çalışmalar diliyorum. Mutfakta kalın. 😉

Etiketler: paralaks tasarım nedir parallaks parallax parallax scrolling parallax scrolling nasıl yapılır parallax tasarım nasıl yapılır parallax tasarım nedir parallax web tasarım nasıl yapılır yanılmasa web yanılsama
Önceki Yazı
Sonraki Yazı

Fatih

author

1 Yorum

  • CVIX says:
    28 Şubat 2017 at 09:57

    Çok teşekkürler.İyi çalışmalar 😉

    Reply

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.