Jquery parallax örnekleri. Basit Paralaks Etki Tekniği
, Zamanında kaplumbağalar. veya orijinal oyun Ay devriyesi . Bu oyunlarda, bir kaçınca zamanında paralaks tekniği gözlenir. arka plan katmanları Farklı dokularla, üç boyutlu alanın etkisini yaratan farklı hızlarda hareket eder.
Web geliştirme makalesindeki retro oyunlar hakkında neden konuşmaya başladım? En basit cevap "çünkü havalı oldukları için" olabilir, ancak hayır. Pararallax kaydırma, web tasarım dünyasına giren bir sınıf tasarım konseptidir. Nike, bu tekniği, orijinal nike daha iyi dünyalarını geliştirmek için Weiden ve Kennedy Pazarlama Devler'i işe aldıklarında, bu tekniği büyük başarı ile kullanan ilk kişi arasındaydı. Site Nike Better World Site, o zamandan itibaren güncellendi ve yeni biriyle değiştirildi, ancak, Nike'den ilk paralaks tasarımına benzer bir başka site var - Spor içecekleri ile ilgili spor içecekleri hakkındaki siteler.
Muhtemelen, site sayfasının bu sayfadaki birkaç farklı öğeyi aşağıda kaydırmanın farklı hızlarda hareket ettiğini fark ettiniz. Resimdeki sayfada görüntülenen sayfayı yukarıdan alalım. Sayfa aşağı kaydırıldığında, arka plandaki mavi noktaların (biraz bulanık olanlar) kaydırma çubuğu ile aynı hızda hareket ettiğini göreceksiniz. Ayrıca, daha fazla odaklanmış ve ön planda yatan, biraz hareket eden bir grup mavi nokta olduğunu göreceksiniz. daha fazla hızkaydırma çubuğundan daha. Bu noktaları daha hızlı text "0 Şeker | 0 kalori | Doğal olarak tatlandırılmış "ve" Ürünler "sayfasının ana başlığı. Ve son olarak, ürünün kendisinin görüntüleri, hem küçük hem de arka planda ufuk ve büyük, odaklanmış ve ön planda yatan. Ürünlerin arka plan görüntüleri metin olarak aynı hızda hareket ederken, ön plandaki ürün görüntüleri bu metinden daha hızlı hareket eder. Hepsi ve bir paralaks kaydırmanın ideal bir gösterimidir, farklı görüntü katmanları birbirine bindirildiğinde ve herkes sayfayı kaydırırken farklı hızlarda hareket eder, üç boyutlu bir efekti oluşturur.
Paralaks kaydırma, sayfanın dikey kaydırma ile sınırlı değildir veya düz bir çizgide kaydırılır. Nintendo'nun bu ifadeyi onaylayan ideal bir örneği gösterme hakkını vereceğiz. Kahramanlarımızın genellikle, yukarıdaki Web sitesinde gördüğümüz gibi, kahramanlarımızın genel olarak soldan sağa sağa sağdan sağa doğru hareket edemedikleri gibi, Nintendo'nun ilk oyunlarını hatırlayın. Markiokart'a gidin ve orada görebileceğimiz bazı havalı şeyler hakkında konuşalım.
İlk fark edeceğiniz ilk şey, sayfanın kaydırılması yönüdür - dikey değildir, ancak yukarıda belirtildiği gibi, ancak aslında yatay olarak. Tabii ki, havalı, ama aynı zamanda yeni bir kavram değil. Ayrıca, Dinozor Yoshi ve kabukları ile arka plandaki Mario ve Luigi ile paralaks etkisini fark edeceksiniz ve kaydırırken farklı hızlarda kaydırılan ana içerik. Ancak sayfalara ulaşır alır almaz ve #Attack, yer değiştirmenin yörüngesi tamamen yatay olmaktan vazgeçecektir. Aynısı #Rediscover ve #snes sayfaları arasındaki geçiş için de geçerlidir. Görüntüler sadece bunların tutulması değil farklı hız Yer değiştirmeleri, ancak genel yönü yataydan dikeyden değiştirin.
Ayrıca, sitenizdeki paralaks etkisinin kullanımının yalnızca yapay bir 3D efekti yaratma olasılığı ile sınırlandırılmaması gerektiğine dikkat etmektedir. Alman Web Design Studio WebSeitenFactory web sitesinin web sitesi, Pararallax'u farklı yörüngelerdeki simgelerin hareketi gibi, sitenin hareketi gibi farklı efektler ekleyebileceğinizin bir örneğidir, bu da site kaydırma olarak arttıkları ve azalması.
Paralaks kaydırma, çok fazla içerik olmadığı siteyi canlandırmaya da yardımcı olabilir. Ya tüm siteniz bir misyon bildiriminden veya hakkımızın bir bölümünden oluşursa, artı iletişim bilgilerinin bulunduğu? Büyük olasılıkla, bir sayfa yapabilirsiniz ve belirli koşullar altında iyi bir sayfaya sahip olacaksınız, ancak ziyaretçiler tarafından hatırlanacak mı? Muhtemelen değil. Peki ya ona biraz paralaks eklerseniz, ilkbahar / yazdaki insanlar nasıl yaptı?
İlk izlenimim "Ah, bu site güzel görünüyor." Fakat atmaya başladığımda, izlenim hemen "vay, bu site havalı!". Basit bir paralaks etkisi eklemek, sadece kötü ve unutulmaz olmayanlar arasındaki farkı yapar.
Pararallax kaydırma, manşonda tutulabilen iyi bir numaradır. Ve her zaman karmaşık bir multistanik site veya basit bir tek sayfalık kartvizit sitesi yapıp yapmadığınızdan bağımsız olarak uygulanabilir.
Paralakslı Sitelerin Örnekleri
Bazıları çok havalı, tanıdıklarım:Herkese merhaba. Bugün size basit bir paralaks efekti oluşturmak için küçük bir komut dosyasını söyleyeceğim.
Makale kısa olacak, ancak bilgilendirici olacaktır, böylece 15 dakika sonra Lunding'e Pararallax ekleyebilirsiniz. Uzun zamandır siteye bu ilginç etkiyi eklemek istediniz, sonra da okuyun ...
Sitede paralaks etkisi nedir
İlk önce sana sahip olduklarını söyleyelim. Bu nedenle, web tasarımındaki Paraludex efekti, arka plan görüntüsünün üstünde olan öğelerden daha yavaş hareket ettiği bir alımdır. Daha fazla deneyimli için, paralaks'ın farenin imlecine etkisini "bağlamayacağımızdan" bir rezervasyon yapın. Ve sadece paralaks arka plan oluşturun. Hadi devam edelim.
Sitede paralaks etkisi nasıl yapılır
Peki, jquery kütüphanesini bağladığımız ilk şey. Her zamanki gibi, kafa etiketleri arasında:
Şimdi, komut dosyasını basit paralaks kaydırmayı indirmeniz gerekir. Derhal sıkıştırılmış bir versiyonu kullanmanızı tavsiye ederim. ek ayarlar Komut dosyasının içinde gerek yok:
Şimdi, pararallax efektimizi kazanmak için HTML sayfasına kayıt olmanız gerektiğini çözelim.
Smartlanding.
Açılış sayfası oluşturma
Veri-parallax \u003d "Kaydırma"
Veri-image-src \u003d "Picture / bg.png yolunu"
Lütfen resmin IMG etiketini kullanarak başlığa girmediğini ve doğrudan paralaksı uygulamak istediğimiz kabın içindeki özelliğe ayarlandığına dikkat edin.
Bunda, prensip olarak, bitirebilir, ama birkaç kelime:
- Paralaks'ın uygulanması gerektiği dalışta başka hiçbir unsur yoksa, ona bir yükseklik sormak gerekir, aksi takdirde hiçbir şey görmeyeceksiniz.
- Kullanım durumunda değil uyarlanabilir TasarımGörüntünün genişliğini ve yüksekliğini, doğal ortamı ve naturalheight özelliklerini kullanarak doğrudan HTML'ye ayarlayabilirsiniz.
- Görüntüleri veri konum özniteliğini kullanarak taşıyabilirsiniz. Bu, CSS'de analog bir arka plandır.
Yukarıda belirtilen resmi proje sayfasında bulabileceğiniz seçeneklerin geri kalanında.
Paralaks'ın etkisi çok ilginç bir tekniktir. Kaydırırken, arka plan görüntüsü içeriğinden daha yavaş hareket eder ve sonuç 3B alanın yanılsamasıdır. Bu derste basit göstereceğiz ve etkili yöntem Harika bir etki al.
İşaretleme
Bu teknik, arka plan görüntüsünün hareket etmesinin hızını kontrol etmeye dayanır. "Veri tipi" ve "veri hızı" özellikleri içeren iki bölüm içeren HTML işaretleme oluşturun. Öznitelikler atamak biraz sonra ortaya çıkacak:
Etiketler
Şartnameye uygun olarak, veri ile başlayan herhangi bir özellik, özel verilerin depolanması olarak işlenecektir. Ek olarak, şablonu etkilemezler.
Arka plan görüntülerini kaydırma hızını kontrol etmemiz gerektiğinden, anahtar parametreleri için veri tipi \u003d "arka plan" ve veri hızını kullanacağız \u003d "10".
Sonra etiket ekle
Etiket arka planını aşağı kaydıracağız
CSS.
JQuery Magic'e taşınmadan önce her öğe için arka plan resimleri ekleyin
#Home (arka plan: URL (home.jpg)% 50 0 tekrar düzeltildi; min-yükseklik: 1000px;) #bout (arka plan: URL (Hakkında (Hakkında)% 50 0 Yinelenen Min Yüksekliği: 1000px;)
Ve gösterim sayfamızın geri kalanının dinlenmesi için stilleri tanımlarız.
#Home (Arka Plan: URL (Home-bg.jpg)% 50 0 Tekrar Sabitleme; Min Yüksekliği: 1000px; Yükseklik: 1000px; Marj: 0 Otomatik; Genişlik:% 100; Maksimum Genişlik: 1920PX; Konum: Göreceli;) #Home Madde (Yükseklik: 458px; Konum: Mutlak; Metin Hizalama: Merkez; Üst: 150px; Genişlik: 100%;) #bout (Arka Plan: URL (yaklaşık-BG.JPG)% 50 0 Tekrar Sabit; Min Yüksekliği : 1000px; Yükseklik: 1000px; Marj: 0 Otomatik; Genişlik:% 100; MAX-Genişlik: 1920PX; Konum: Göreceli; -Webkit-Box-Shadow: 0 50px RGBA (0,0,0,0,0,8) Kutu gölge: 0 0 0 0 50px RGBA (0,0,0,0,0,8);) #bout makale (yükseklik: 458px; pozisyon: mutlak; metin-hizala: merkezi; üst: 150px; genişlik: 100%; )
Sihirli kod
JQuery kullanın. Standart Document.Ready () yöntemiyle başlayalım, sayfa yükü ve manipülasyon için hazır olması için güvende olmak.
$ (belge) .Ready (işlev () ());
Şimdi dikkat etmeniz gerekiyor. Buradaki ilk şey gerçekleşiyor - tüm unsurlarda yineleme
$ (belge) .Ready (işlev () ($ ("(" bölüm "). Her (işlev () (function () (var $ bgobj \u003d $ (buna); // bir nesneyi atamak));));
Function.Each (), kaydırma başlangıcında adlandırılan başka bir işlevi ekleyin .Scroll ().
$ (Pencere) .scroll (işlev () (
Kullanıcının sayfayı ne kadar kaydırdığını belirlemeniz gerekir ve ardından ortaya çıkan değeri veri hız özniteliğinde tanımlanan değerle bölün.
Var ypos \u003d - ($ window.scrolltop () / $ bgobj.data ("hız"));
$ window.scrolltop () - Geçerli kaydırma değerini yukarıdan alıyoruz. $ bgobj.data ("hız"), İşaretleme'deki veri hız özniteliğini belirtir. Ypos - kaydırmak için kullanılan son değer. Bununla birlikte, arka plan, kullanıcının kaydırılmasına göre ters yönde kaydırıldığı için negatif bir değer kullanılır.
Örneğimizde, veri hız özniteliği 10'dur. Tarayıcı penceresinin 57px tarafından kaydırıldığını varsayalım. Bu, 57px'in 10 \u003d 5.7px'e bölündüğü anlamına gelir.
// var koordinasyonun konumunu topla \u003d "% 50" + ypos + "px"; // Shift $ bgobj.css arka plan ((backgroundpozisyon: koordineler));
Şimdi tüm verileri tek bir değerde toplamanız gerekir. Yatay statik konum konumunu kaydetmek için, xpozisyon özelliği için% 50 değeri kullanıyoruz. Ardından yozisyon özelliğinin değeri olarak YPP'yi ekleyin ve ardından arka planın koordinatlarını atayın.
Son formda, kod şöyle görünecektir:
$ (Belge) .Ready (işlev () ("bölüm". Her (işlev () (function () (var $ bgobj \u003d $ (this); // $ (pencere) .scroll (işlev () (function () (var ydpos \u003d - ($) window.scrolltop () / $ bgobj.data ("hız")); // arka plan koordinatlarının değerini bir araya getirin VAR Coords \u003d "% 50" + ypos + "px"; // Shift $ bgobj.css (( Backgroundpozisyon: koordineler));));));));
IE için fiksatör.
Bir nokta kalır: Eski IE sürümleri Etiketleri geri çekemez
// IE belgesi için öğeleri oluşturun. CreateEnment ("Makale"); belge. CreateEnement ("bölüm");
Ek olarak, CSS sıfırlama dosyasını kullanıyoruz, böylece tüm tarayıcılar eşit olarak görüntülenir.
Paralaks(Paralaks, Yunan. değişim, Alternatif) - Bu, gözlemcinin konumuna bağlı olarak, uzaktan arka plana göre nesnenin görünür konumunda bir değişikliktir. Öncelikli, bu terim astronomi ve jeodesy içinde doğal fenomenler için kullanıldı. Örneğin, suyun suya yansıyacağı ve doğada pararallarca olduğunda yazıya göre güneşin böyle bir kayması.
Web Tasarımında Pararallaks-Etkisi veya Pararallax Kaydırma - Gelecekteki arka plan görüntüsü, ön planın unsurlarından daha yavaş hareket ettiğinde özel bir tekniktir. Bu teknoloji, gerçekten muhteşem ve serin göründüğü için hala daha sık uygulanır.
Üç boyutlu alanın bu etkisi, birbirlerine üst üste binen ve kaydırırken hareket eden birkaç katmanla elde edilir. Çeşitli hız. Bu teknolojiyle, sadece yapay üç boyutlu bir etki yaratabilir, onu simgelere, resimlere ve sayfanın diğer öğelerine uygulayabilirsiniz.
Pararallax etkisinin dezavantajları
Ana eksi paralaks- Bunlar sitenin performansı ile ilgili sorunlardır. Tüm güzel ve şık görünüyor, ancak paralaks'ın etkisinin yaratıldığı yardımı ile JavaScript / JQuery'nin kullanımı, sayfayı büyük ölçüde alır ve yükleme hızını önemli ölçüde azaltır. Bunun nedeni, karmaşık hesaplamalara dayandığından: JavaScript, her pikselin konumunu ekranda kontrol etmek zorundadır. Bazı durumlarda, durum aynı zamanda Crossbluster ve Platform ile ilgili sorunlar ile de karmaşıktır. Birçok geliştirici, paralaks etkisini, sayfanın maksimum iki unsuruna ilişkin olarak kullanmanızı önerir.
Alternatif çözüm
CSS 3'ün ortaya çıkmasıyla, görev biraz basitleştirilmiştir. Bununla birlikte, kaynak kanıtı açısından çok daha ekonomik olacak çok benzer bir etki yaratabilirsiniz. Öz, sitenin içeriğinin bir sayfada yayınlandığı ve alt kısımlardaki hareketi CSS 3 geçiş yöntemi ile gerçekleşmesidir. Bu aynı pararallax, fakat biraz ayrım ile: Gerçek şu ki, sadece CSS 3'ü kullanarak farklı hızlarda hareket etmek için hareket etmenin imkansız olması, imkansızdır. Ek olarak, bu standart tüm modern tarayıcılar tarafından desteklenmiyor. Bu nedenle burada zorluklar var.
Çıktı
Paralaks'ın etkisi, ancak popüler olmasına rağmen, ancak herkes yukarıdaki sorunlardan dolayı bir site oluştururken kullanmak için acelesi değildir. Görünüşe göre, teknolojilerin ortaya çıkan zorlukların üstesinden gelebilmesi için zamana ihtiyacınız olurken. Bu arada, bu seçenek tek sayfalık sitelerde kullanılabilir: bu nedenle kullanıcıyı doğru bir şekilde hatırlanacak ve kullanabilir.
JavaScript'te pararallax.
- jquery.- Paralaks kaydırma - paralaksın fare tekerleğinin hareketine etkisini bağlayan eklentiyi
- ScrollDeck.- Paralaks efekti oluşturmak için eklenti
- jparallax- Sayfanın elemanlarını, fareye göre hareket eden kesinlikle konumlandırılmış katmanlara dönüştürür.
| 29.09.2014
İyi günler, sevgili okuyucularK! 10 yerden oluşan günümüzün derecelendirmesi sıradan sitelere adanmıştır. Bu ilk 10 listedeki siteler, bir ortak özelliğe sahiptir - paralaks'ın etkisi.
Özellikle ne olduğunu bilmeyenler için, bu etkiyi yoğun bir şekilde kazanmaya başlamaya başlayan ve web tasarımı alanında giderek daha popüler hale gelen bu etkiyi kısaca anlatacağız.
Bu nedenle, paralaks etkisi veya pararallax kaydırma, arka plandaki nesnelerin ön plandaki nesnelerden daha yavaş hareket ettiği özel bir tekniktir. Bundan dolayı, 3D efekti oluşturulur, üç boyutlu bir alan hissi görünür. Paralaks Kaydırma - harika yol Bir sayfalık siteye bir vurgu ekleyin, infographics'i canlandırın, geçmişi söyleyin veya bir portföyü gösterin. Ve modern tasarımcıların bazı eserleri, sanat eserlerine tam güven olarak adlandırılabilir ... Ancak, bir kereden fazla görmekten daha iyidir - yüzlerce kez daha fazla duymaktan daha iyidir - ilk 10 sitemizi görün ve bir göz atın!
Not: Paralaks kaydırmalı bazı siteler, çeşitli etkiler nedeniyle beceriklidir, bu nedenle belirli bilgisayarlarda ve taşınabilir cihazlarda "işkence" dışlamaz.
Kapmak ve git.
Derecelendirmemizdeki onuncu yer, paralaks etkisinin dekorasyon olarak kullanıldığı ve resmi canlandırdığı kapma ve GO sahasını kaplar. İmleci hareket ettirirken, aynı zamanda evde ve arka plandaki ağaçların evde ve ağaçların nasıl hareket ettiğini gözlemleyebilirsiniz. Katılıyorum, bu kuru üzümün pahasına, sitenin ziyaretçiye daha iyi hatırlanması için bir şansı var.
Dijital eller.
DigitalHands web sitesinde 9. sırayı işgal eden paralaks etkisi de güzel bir şekilde durmak ve ziyaretçileri hatırlamak için kullanılır. Fare imlecini hareket ettirin ve özel bir efektin tadını çıkarın.
Madwell.
New York Creative Agency Madwell, portföyünü açıklar. ana Sayfa Site, paralaks etkisi kullanarak ustaca. 3D'nin hissi, kaydırma sırasında kullanıcıyı bırakmaz.
Oakley.
Herhangi bir ürünün doğru fikrine ihtiyacı var. Oakley Pararallax Scrolling web sitesinin web sitesinde, Airbrake MX'in avantajlarını göstermek için kullanılır. Çok etkileyici ve bilgilendirici oldu, çünkü ürünler sadece kaydırmayı kullanarak tüm taraflardan değerlendirilebilir ve keşfedilebiliyor.
Paranızı yapmak
Birkaç kişi kişisel finansmana önem vermez. Web sitesi, derecelendirmemizin 6. yerini alan para konusunuzu, uygun fiyatlı bir formda, izleyiciyi Kredi Birliği'nin avantajlarını ortaya çıkarır ve bankaların eksileri hakkında bilgi verir. Burada, bankaların müşteri yatırımları nedeniyle bankaları nasıl aldığını gösteren hesap makinesini kullanabilir ve ayrıca posta endeksindeki kredi kooperatiflerinin dallarını bulabilirsiniz.
Uzay iğnesi
Seattle'ı 184 metre yükseklikten keşfetmek ister misiniz? Uzay İğnesi Web Sitesi, Şehrin en tanınabilir mekanları boyunca sanal bir yürüyüş gönderir - ingilizce olan "Kozmik İğne" anlamına gelen uzay iğnesi. Bu kule yüksekliği 184 m, 42 m genişliğindedir ve 9.550 ton ağırlığında, rüzgar hızındaki kasırgalara dayanır ve 9.1 puana kadar depremler. Buna ek olarak, Kule'nin 25 yundandı. Ayırt edici bir özellik Space Nidle, 159 metre yükseklikte, Skycity Restaurant ve Hediyelik Eşya dükkanında bir genel bakış sitesidir. Onun köşesinden Seattle, Rainier Volcano, Cascade Dağları, Eliot Körfezi ve çevresindeki adaların merkezini görebilirsiniz.
Peugeot Hybrid4 - Grafik Roman
En büyük Fransız otomobil üreticisi Peugeot, hibrit tahrik sistemi hibrit4'ü oldukça olağanüstüdür. Gözlerimizden önce, ana karakterin görevinin gizli veri elde etmek ve terk etmek, belaya girmeden, bu şekilde (bu arada, otomatik çoğaltmaya konulabilir) ortaya çıkan bir komik açılır. İşlemi başarılı bir şekilde gerçekleştirmek için, Peugeot Hybrid4 teknolojisi - maksimum performans ve dinamizm (spor), tam sürüş modu ve maksimum itme (4WD), performans ve tasarruf arasındaki denge (Otomatik) arasındaki dört farklı hareket modu arasında geçiş yapmak zorunda kalır. , sessiz çalışma (ZEV).
The Walking Dead.
Böylece, yürüyen ölü projeye giden en iyi siteler listemizde üçüncü sıraya yaklaştık. Hangi "Yürüyen Ölü" serisinin sayısız hayranıyla ilgilenen bir site oluştururken, HTML5, CSS3, JavaScript ve tabii ki, paralaks etkisi kullanılır. Geliştiriciler, tüm bu teknolojileri birlikte ve tüm platformlarda zorlamak için harika bir iş çıkardı. Siteye gidin ve kaydırmaya başlayın, kullanıcı zombilerin aktörler nasıl yaptıkları hakkında komik bir hikaye görür.
Benzersiz ve benzersiz bir proje, Sony'nin bir kısmı "taşındı" kampanyası hacmi, dinamikleri ve düşüncesiyle en küçük detaylara etkileyici. Ürünlerin Sony'den en iyi sunumu muhtemelen bulamaz. Kelimeler gereksizdir - sadece aşağı kaydırın ve tadını çıkarın!
Düz vs. Gerçekçilik
Ve nihayet, bizim derecelendirmenin ilk yerine sahaya ulaştı. Gerçekçilik - inakto interaktif ajansının beyni. Bu Yeni Yılın Muhteşem Grafiklerle (ve Müzikal Eşlik!) Projesi, iki tür tasarım temsilcilerinin muhalefetinin gerçekçi ve düz olduğu, ilginç bir tarih öncesi ile savaşmanın mini oyun türüdür. 2013 yılının sonundaki ana Holwiver'a odaklanan - 2014 yılı başlangıcında, yaratıcılar kaybetmediler: çıkıştan sonra, bu etkileyici iş anında Furore'a neden oldu ve Bloglar ve Haberlerde popüler bir tartışma konusu oldu.
Site geliştiricileri, paralaks kaydırmayı ve oyunu HTML5'te birleştirmeyi başardı. "Sitenin başından sonuna kadar baştan sona kaydırılması sırasında tüm eylemler sorunsuz ve gecikmeden gerçekleşecek şekilde yapmak istedik. Bunu yapmak için, Alejandro Lazos Ajansı'nın yaratıcı direktörlüğünü açıkladı. Proje, yeni yıldan önce 2013 yılı sonunda izleyiciler tarafından temsil edildi. Kaydırmayı çevirmeye hazır olun, çok büyüleyici bekliyorsunuz!
