Paralaks etkisi web tasarımında nasıl kullanılır?

Paralaks piyasadaki yeni bir ilaç veya ilaç değildir; aslında hiç de yeni değil. Hangisi önce gelirse insanlar ya da aydınlanmanın başlangıcından beri insanlar tarafından kullanılmaktadır. Paralaks etkisini matematiksel olarak tanımlayan denklem, astronomlar ve okyanus gezginleri tarafından mesafeleri ve yönleri hesaplamak için yüzyıllardır kullanılmıştır. Paralaks kaydırma, 1940'lardan beri animasyon ve 1980'lerden beri video oyunlarında kullanılmıştır. Web tasarımı için paralaks tekniklerinin kullanımı nispeten yeni bir entegrasyon ve birçok popüler web sitesi ve organizasyon ile popülerlik kazanıyor. Bu yazı, paralaks efekti ve paralaks kaydırma geçmişini sunacak ve daha sonra bu özelliği kullanan birkaç web sitesini vurgulayacaktır.

Tarihsel arka plan ve paralaks etkisi nasıl çalışır?

Paralaks kelimesi Yunanca paralaks teriminden türetilmiştir, bu da değişiklik anlamına gelir. Bir nesnenin belirli bir mesafeden gözlemlenebilir konumu, görüş noktasına veya izleyicinin konumuna bağlıdır. Perspektif kayması, farklı bakış açılarından ve uzak bir arka plana karşı yakın bir nesne gözlemlendiğinde ortaya çıkar.

Perspektif kaymasının etkisini göstermek için, DC'deki Washington Anıtı'nı örnek olarak alın. Ulusal II. Dünya Savaşı Anıtı'nın sağında, 17. Cadde SW'sinin yanında duruyorsanız ve Washington Anıtı'na bakıyorsanız, ABD Capitol binasının hemen solunda görünüyorsa, buna "Bakış Açısı A" diyeceğiz, aşağıdaki Şekil A'da Google Earth ile gösterildiği gibi.

Şekil A

Şimdi, Washington Anıtı ile yüzleşmeye devam ederken, bakış açımızı 17. Cadde SW tarafındaki Ulusal II. Dünya Savaşı Anıtı girişinin sol tarafındaki kaldırıma kaydırmaya devam edelim. Bakış açımız değişti ve bakış açımız da değişti ve şimdi Washington Anıtı, ABD Capitol binasının sağında gibi görünüyor ( Şekil B - Bakış Noktası B). Bu paralaks etkisi. Ön plandaki nesnelerin, arka plan görünümündeki nesnelere göre farklı hızlarda ve açılarda hareket ettiği görülür.

Paralaks prensibi, A (Bakış Noktası A) ve B (Bakış Noktası B) arasında O nesnesine (Washington Anıtı) göre oluşturulan açı olan paralaks açısı a ile başlayan geometri ve bilinen değişkenlerle daha fazla açıklanabilir ve iki görüş noktası arasındaki taban çizgisi mesafesi D, daha sonra R mesafesi, Şekil C'de gösterilen basit üçgende gösterildiği gibi türetilebilir.

Her insan paralaks etkisini her gün kullanıyor, ancak muhtemelen bunu fark etmemiştiniz, çünkü normalde çalışan iki gözü olan herkesin ayrılmaz bir parçası olmuştur. Normal insan görüşü, nesnelere olan mesafeleri ve aydınlatma hızında tahmin etmek için paralaks kullanır, aslında o kadar hızlı ki, kendiniz için test edene kadar asla tanımazsınız. Ofisinizin veya evinizin konforunda paralaks efektinin yakından bir örneğini almak için, kolunuzu göz hizasında önünüzde tutun ve işaret parmağınızı yukarı doğru çevirin, şimdi alternatif olarak gözlerinizin her ikisini de göz kırpın. Silah uzunluğundaki işaret parmağınızın arka plandaki nesnelere göre nasıl hareket ettiğini gördünüz mü? Bu eylemde paralaks etkisi! Ve bu durumda, taban çizgisi iki gözünüz arasındaki kısa mesafedir. Beyniniz paralaks açısını otomatik olarak ölçer ve yakındaki nesnenin mesafesi için sezgisel bir tahmin verir, bu durumda parmağınızdı, başka bir deyişle bu işteki derinlik algısıdır.

Paralaks gökbilimciler tarafından gök cisimlerinin mesafesini hesaplamak için ve ayrıca yön bulma tekniklerine çok benzeyen mevcut pozisyonu belirlemek için üçgenleme kullanılan nesneler arasındaki mesafeleri belirlemek için denizcilikte gezinme için kullanılmıştır.

Yıldız paralaksı, göksel cisimlerin üçgenleme ile mesafesini bulmak için basitleştirilmiş formülü kullanır, burada d = 1 / p denklemi; Mesafe parseks = Temel AU / Paralaks Açısı Ark saniye, burada 1 AU dünya yörüngesidir ve 1 Ark saniye 3, 26 ışık yılıdır.

Erken paralaks kaydırma

Paralaks kaydırma, arka plan görüntülerinin ön plan görüntülerinden farklı bir hızda hareket etmesini sağlamak için grafik ve animasyonla kullanılan özel bir tekniktir. Paralaks kaydırma ilk olarak 1940'larda çok düzlemli kamera teknikleri kullanılarak karikatür animasyonu için kullanıldı. Paralaks kaydırma efekti, arcade oyunu Moon Patrol ile 1980'lerde 2D video oyunuyla ilk bilgisayar grafiklerini benimsedi ve aynı zamanda yan kaydırma efektini kullanan ilk oyunlardan biri olarak biliniyordu.

Paralaks yöntemleri

Kaydırma için kullanılan çeşitli yöntemler vardır.

  • Katmanlar - Yatay veya dikey yönlerde hareket edebilen ve çeşitli hızlarda kaydırma yapabilen birden fazla arka plan ve ön plan katmanları tanımlanır, bazıları otomatik olarak kontrol edilir ve diğerleri kullanıcı etkileşimine bağlıdır ve bir kompozit olarak da ayarlanabilir.
  • Sprite - Düz bir görüntünün üç boyutlu gibi görünebileceği ve konuma bağlı olarak görüntünün yalnızca bir bölümünün görüntülenebileceği tek bir görüntü oluşturmak için birçok görüntüyü veya bitmap'i sahte katmanlara birleştirmek.
  • Tekrarlanan desen manipülasyonu - Birden fazla fayans veya ekran tekrarlanan arka planların üzerinde yüzüyor gibi görünüyor.
  • Raster - Bir görüntüdeki piksel çizgileri, bir çizgi ile bir sonraki çizgi çizme arasında hafif bir gecikmeyle tipik olarak yukarıdan aşağıya doğru düzenlenir ve yenilenir.

Web tasarımında paralaks kaydırma

Birçok web sitesi hem öğretici örneklerde hem de paralaks kaydırmayı kullananları vurgulayan "En İyiler" listelerinde yer almıştır. Yöntemler genellikle paralaks kaydırma efektlerini güçlendirmek için HTML5, CSS3, grafik tasarımı, jQuery ve JavaScript kombinasyonlarını içerir.

Aşağıdaki on örnek, web tasarımında paralaks kaydırma kullanmanın çeşitli yöntemlerini, bazıları yatay, bazıları dikey kaydırma ve bazıları da bir yöntem kombinasyonunu göstermektedir.

etkinleştirme

Etkinleştir web sitesinde, siteyi aşağı kaydırdıkça metin, arka plan ve ön plan görüntülerinin ayrı ve farklı hızlarda kaydırıldığına dikkat edin. Bu, JavaScript aracılığıyla ve her bir içerik katmanı için HTML içinde bir veri hızı niteliği tanımlayarak, bu öğelere farklı oranlarda kaydırma yapma talimatı vererek gerçekleştirilir.

Beatles Rockband

Beatles Rockband sitesinde, farenizi ekranın üstünde gezdirin ve JavaScript ve CSS kullanan imleç hareketine bağlı olarak bulutların sola veya sağa kayacağını fark edin.

Cultural Solutions Türkiye

Cultural Solutions UK sitesi, çeşitli arka plan resimleri ve içeriğinden daha hızlı hareket ederek ön plandaki metin ve görüntülerle yatay ve dikey paralaks kaydırma efektlerinin bir kombinasyonunu kullanır.

Fishy.com

Recife, Brezilya merkezli Fishy.com.br, örneğin Kraft ve Wal-Mart gibi müşteriler için web ve mobil tabanlı iletişime odaklanan ürün ve hizmetleri tanıtmak için sitesinde paralaks kaydırma özelliğini kullanıyor.

Kahraman WordPress Teması

Hero, duyarlı ve minimal bir WordPress portföy temasıdır ve temel özelliklerden biri, anahtar mesajınızı ilgi çekici bir şekilde görüntülemenizi sağlayan paralaks ana sayfa banner'ıdır.

Yeni Zelanda

Yeni Zelanda web sitesi paralaksın tüm gücünü kullanarak tüm gücü kullanıyor ve ülkeyi seyahat fikirleri ve yerel ayarlar için keşfetmenin birçok yolunu sunuyor.

Nike Better World

Nike Better World, PHP ortamında HTML5, jQuery, JavaScript ve JavaScript çoklu dolgular ve CSS3 kullanarak paralaks etkisini web tasarımına dahil eden ilk web sitelerinden biri olarak kabul edilmektedir.

OK Studios

Almanya'nın Hamburg şehrinde bulunan OK Studios, web sitesinde projelerini, tasarımını, teknolojisini, laboratuvarını ve işle ilgili diğer konuları tanıtmak için etkili paralaks kaydırma özelliğini kullanıyor.

QMusic Titanic

Hollanda merkezli web sitesi QMusic Titanic, paralaks kaydırmayı çok etkili bir şekilde kullanıyor ve ziyaretçinin su hattının altından Titanic'in kısa bir tarihine ve kötü niyetli felaketine, Atlantik katındaki nihai keşfe dalmasına izin veriyor. Okyanus.

Soleil Noir

Paris merkezli Soleil Noir Studio, Believe In sayfasında eğlence, moda, iOS, sağlık, flaş, kendiniz, geleceğiniz ve diğer konulara inanmak için on sekiz ilham bölümünü vurgulayan paralaks kaydırma özelliğini kullanıyor.

Gelecekteki makaleler, arka plan görüntüleri, ön plan görüntüleri, bölümler, makaleler, jQuery, CSS3 ve HTML5'in bir kombinasyonunu kullanarak paralaks efektini web tasarımına dahil etmeyi gösterecektir.

© Copyright 2020 | mobilegn.com