Salı 21 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 (Paralaks) Web Tasarımı Nedir?
 Parallax (Paralaks) Web Tasarımı Nedir?
CSS HTML5 Tasarım

Parallax (Paralaks) Web Tasarımı Nedir?

Yazar : Hakan Karataş 2 Eylül 2016 2 Comments

İçindekiler

  • Paralaks tasarım web siteler için büyük bir fırsat verir

  • Paralaks web sitesini tasarımının dezavantajları

    • 1. Boy-Coy

    • 2. ISL Review

    • 3. Flash vs HTML

    • 4. Atlantis World’s Fair

    • 5. BeerCamp

    • 6. The Boat

    • 7. Make Your Money Matter

    • 8. Jess & Russ

    • 9. Steven and the Unique Horn

    • 10. Hot Dot

    • 11. Pressels

    • 12. Life of Pi – Movie

    • 13. The Walking Dead

    • 14. Peugeot Hybrid4

    • 15. Seattle Needle

Parallax veya dilimizdeki karşılığı olan paralaks, gözlemcinin yerinin değişmesine bağlı olarak bir cismin gözlenen doğrultusunda meydana gelen değişime denilmektedir. Gerçek konum ile görülen konum arasında fark oluşması şeklinde de anlamlandırılır. Aslında bütün olay bir optik yanılsamada gizlidir. Bu yanılsama kimi zaman alan derinliğini de hissettiren bir efekte dönüşebilmektedir.

baskin-goz1

Paralaks olayını kavramamız açısından bir örnek vermek gerekirse şekilde görüldüğü gibi uzaktaki bir cisme sağ gözümüzle sonrasında sol gözümüzle baktığımızda cismin ellerimizin arasında aynı doğrultuda olmadığı görürüz.

parallax-gif

Paralllax tasarım ile kullanılan web siteleri son zamanların ilgi odağı oldu. Paralaks kaydırma tekniğiyle hızlı nesneleri önde, yavaş nesneleri de arka planda hareketlenmesi sonucu 3 boyutlu bir site tasarımı elde etmek mümkün olmaktadır. Bu hareketlendirme mouse’umuzda bulunan scroll‘un aşağı ve yukarı hareketlenmesi sonucunda farklı hızda nesnelerin kaymasından meydana gelmektedir.

Paralaks kaydırma efektlerinin web sitesine eklenmesini aşağıdaki videodan kolayca görebilirsiniz.

https://webmaster.kitchen/wp-content/uploads/Parallax.mp4

Paralaks tasarım web siteler için büyük bir fırsat verir

Site üzerinde ziyaretçilere rehberlik edecek bir hikaye şeklinde anlatım yaklaşımına sahip olur.

Tüm sayfada ziyaretçileri dolaşmaya teşvik ederek sayfa ziyaretlerinin daha uzun sürmesini sağlar.

Merak uyandırmayı sağlayarak kullanıcı sitede tutar.

Yenilikçi interaktif görünmesiyle web site güvenirliğini güçlendirir.

Sayfa derinliği ve sıradışı animasyonları ile göz zevkine hitap ederek ziyaretçilerde beğeni ve hoşnutluk sağlar.

Ziyaretçileri doğrudan eyleme çağırır.

Paralaks web sitesini tasarımının dezavantajları

Paralaks site tasarımının yukarda belirtildiği gibi bazı avantajları yanı sıra  birkaç dezavantaj olduğu durumlarda vardır. Bu sorunların büyük çoğunluğu paralaks web sitelerinin sadece tek bir uzun sayfadan ibaret olmasından kaynaklı hem SEO açısından zararını hem de yükleme hızını etkilemektedir. İşte paralaks kaydırma tasarımını kullanmanın bazı olumsuz sonuçları şunlardır:

Resimlerin bir tonu ve sayfa üzerindeki diğer bilgilerin yavaş yüklenme süreleri ile ilişkin olarak ziyaretçilerin sayfayı terk etmelerine neden olabilir.

Responsive ve mobil tasarım ile uyumlu değildir.

Web sitesine bağlantı süresi boyunca dahili sayfa yoktur.

Paralaks bir sitede SEO için yapabileceğiniz tek şey sayfanızı SEO açısından güçlü olması için h1 h2 gibi başlık etiketlerinin kullanımına dikkat etmeli ve anahtar kelimelerine yer vermeliyiz.

Aşağıda parallax kullanarak oluşturulmuş tasarım örneklerini bulabilirsiniz.

1. Boy-Coy

parallax1

2. ISL Review

parallax2

3. Flash vs HTML

parallax3

4. Atlantis World’s Fair

Atlantis World's Fair

5. BeerCamp

An awesome party for web folk and classy people. Sunday, March 13 2011, starting at 8:00, at Emo's 603 Red River St. Austin, TX

6. The Boat

parallax6

7. Make Your Money Matter

parallax13

8. Jess & Russ

parallax11

9. Steven and the Unique Horn

parallax12

10. Hot Dot

parallax10

11. Pressels

parallax8

12. Life of Pi – Movie

parallax9

13. The Walking Dead

parallax11

14. Peugeot Hybrid4

parallax12

15. Seattle Needle

parallax14

Etiketler: paralaks tasarım nedir paralaks web tasarım paralax dizayn parallaks parallax parallax nedir parallax scrolling nedir parallax tasarım parallax web tasarım scrolling SEO tasarım yanılsama
Önceki Yazı
Sonraki Yazı

Hakan Karataş

author

Back-End Developer @Webmaster.Kitchen.Ağırlıklı olarak Back-end tarafında bilgi, birikim ve yeni öğrendiğim bilgiler ile mutfakta yer almaktayım. Görüş, düşünce ve tecrübelerinizi bizlerle paylaşabilirsiniz. Yorum alanı ile mutfağa katkıda bulunun.

2 Yorumlar

  • CVIX says:
    22 Şubat 2017 at 14:01

    Çok basit bir parallax effect kod örneği gösterebilir misiniz ? mantığı bir türlü kodlamaya dönüştüremedim.

    Reply
  • Parallax Scrolling Web Tasarımı Nasıl Yapılır? | Webmaster.Kitchen says:
    27 Şubat 2017 at 22:00

    […] Okuma Önerisi: Parallax (Paralaks) web tasarımı nedir? […]

    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.