Dikey paralaks kaydırma.

Her yıl web tasarımında farklı trendlerin ortaya çıktığını ve kaybolduğunu görüyoruz. Ve bazen bir süre sonra belirli bir "çip" her yerde tekrar kullanılmaya başlar.

2012'de birçok yabancı site, oyunlardan ödünç alınan çok ilginç bir etki kullandı - paralaks kaydırma. Genel olarak, 3D modasının zamanıydı, bu yüzden web sitelerini üç boyutlu, çok katmanlı hale getirmeye çalıştılar.

Bir veya iki yıl sonra, paralaks bir şekilde unutuldu ve kullanımının canlı örnekleri olan bu siteler, diğer görsel teknikleri seçerek yeniden tasarımdan kurtuldu. Bugün bu etki yeniden canlanmakta ve tekrar konuşulmaktadır.

Ne olduğunu, nerede ve nasıl uygulanacağını da hatırlayalım ve ayrıca birkaç tane düşünelim. çarpıcı örnekler paralaks kullanarak.

Paralaks kaydırma - ne canavar?

Web sitelerinde paralaks etkisini tanımak çok kolaydır - derinlik hissi yaratmak için farklı hızlarda hareket ediyor gibi görünen birkaç arka plan kullanılır (yapay bir 3D efekti yaratır). Bu teknik "eski moda" oyunlarda tamamen kullanıldı ve web tasarımında da ilginç bir trend.

Terim, "değişim" anlamına gelen Yunanca "Parallaxis" kelimesinden gelir. Bugün, bu trend web tasarımı dünyasında yeniden şekilleniyor.

Paralaks kaydırma, standart, dikey veya yatay olabilir ve yön değiştirebilir.

Bu, harika görünen çok ilginç bir tasarım konseptidir, ancak aynı zamanda çok fazla özenli çalışma gerektirir. Yalnızca uygulama üzerinde düşünmek değil, aynı zamanda optimizasyon üzerinde de iyi çalışmak gerekir - aksi takdirde mobil cihazlar veya büyük ekranlar katmanlar yavaşlayabilir ve yalnızca süslemekle kalmaz, aynı zamanda yaratıcılığınızı da bozar.

Paralaks kullanırken, genellikle bu tür sitelerde bulunan büyük bir hata yapmamaya çalışın - ana katmana çok yüksek bir hareket hızı verilir ve bunun sonucunda kullanıcı normalde bilgileri veya fotoğrafları göremez. Direksiyonu biraz çevirdi - ve fotoğraf ya da metin çoktan aşağı indi, geri döndürmeye çalıştı - her şey gizlendi. Mesela. Optimizasyon aşamasında, katmanların kaydırma hızına dikkat edin, ana katman ideal olarak kaydırma çubuğuyla aynı hızda hareket etmelidir. Ancak dekorasyona hizmet eden diğer unsurlarla güvenle oynayabilirsiniz.

Nereye başvurulur?

Paralaks kaydırma, içeriği az olan sitelerde harika görünür. Bu, tek sayfalık web siteleri, kartvizit siteleri için ideal bir çözümdür.

Diyelim ki elinizde sadece firma hakkında kısa bir bilgi, kontaklar ve birkaç fotoğraf var. Bu tür içeriğe sahip basit bir site sıkıcı ve ilgi çekici görünmeyecektir. Ama buraya eklersen olağandışı etkiler paralaks gibi - bu kaynak kullanıcılar tarafından uzun süre hatırlanacak!

Aslında şu anda insanların dikkatini çekmek çok zor. Birçok site flash efektleri, ses katmanları ve diğer olağandışı "hileler" ile doludur. Herkes elinden geldiğince öne çıkmaya çalışıyor - bu yüzden tasarımcılar tekrar paralaksa dönmeye başladı.

Bu efekt aynı zamanda bir ürün veya ürün serisi sunan tek sayfalık sayfalar için de çok uygundur. Konsept üzerinde düşündükten sonra gerçekten benzersiz bir şey yapabilirsiniz.

birkaç örnek

Şimdi teoriden pratiğe geçelim ve paralaks kaydırma kullanan birkaç siteyi ele alalım. Belki bu koleksiyonda ilham bulacaksınız veya bazı orijinal fikirler bulacaksınız.

Senden önce - paralaksa ek olarak bir başkasını kullanan orijinal ayakkabı kataloğu.Birlikte, bu teknikler özel bir atmosfer yaratır.

Gördüğünüz gibi sayfa aynı hızda hareket ediyor ve geometrik şekiller- Öte yandan, biraz daha yavaş.

Burada yine paralaks sesle el ele gider ve tüm hikayeyi anlatmaya yardımcı olur. 3D efektine ek olarak, burada diğer moda trendlerini görüyoruz - siyah beyaz renkler, serbest çizimler, el yazısı yazı tipleri. Tekerleği çeviremeyecek kadar tembelseniz, otomatik kaydırmayı açın ve keyfini çıkarın.

Milano'ya hoş geldiniz! İtalyan sanatının dünyasına dalın!

Burada alışılmadık bir çözüm daha görüyoruz - siteyi görüntülemek için tekerleği döndürmenize gerek yok, ancak dolguyu fare düğmesiyle dışarı sürükleyin. Ayrıca, sayfa hem yanlara hem de aşağı doğru uzayabilir.

Aşağıdaki listeyi de inceleyebilirsiniz, sitenin kendisi size doğru yeri gösterecektir.

Yedek parça ve diğer donanımları bu kadar özgün bir şekilde sunabilir misiniz? Bu, ürün son derece spesifik ve dar bir insan grubuna yönelik olsa bile, paralaksın bir ürün web sitesini akılda kalıcı ve ilginç hale getirmeye nasıl yardımcı olabileceğinin bir örneğidir.

Ve işte restoranın web sitesinin ilginç bir versiyonu. Çok az metin içeriği var ve tasarımcı, farklı bir katmanda bulunan ve farklı bir hızda hareket eden parlak fotoğraflarla birleştirmek için ustaca bir çözüm buldu. Oldukça taze ve orijinal.

Burada, hem arka planda videoyu hem de farklı boyutlardaki fotoğrafları kullandığımız harika 3D efektler ve hatta "kullanıcının burnunun önünde" gibi görünen öğelerin bulanıklığını görüyoruz. Ve tabii ki katmanların farklı hareket hızları.

Paralaksa standart olmayan bir yaklaşımın çarpıcı bir örneği. Aşağı kayan metinle birlikte kendi kendine hareket eden bir arka plan; Sağda oluşturulan 3D modeller; kaydırırken arka plan renklerini değiştirmek - tüm bunlar siteyi gerçekten unutulmaz kılıyor.

HTML5'in (World Wide Web'de içerik yapılandırmak ve sunmak için yeni bir standart) ve CSS3'ün (tanımlama dilinin geliştirilmiş bir versiyonu) ortaya çıkması ve yaygın olarak kullanılmasıyla görünüm nesneler), elbette açılış sayfaları da dahil olmak üzere, istisnasız tüm İnternet sayfaları için daha ilginç ve akılda kalıcı tasarım öğeleri oluşturmak mümkün hale geldi.

Paralaks kaydırma (İngilizce paralaks kaydırmadan - web tasarımında: perspektifteki arka plan görüntüleri ön plandaki öğelerden daha yavaş hareket ettiğinde, öncelikle bilgisayar grafiklerinde kullanılan özel bir teknik) - bu gelişmiş teknolojilerden biridir modern web tasarımı... Ancak aşırı kullanımı sitenin kullanılabilirliğini azaltabilir ve dönüşüm oranlarında düşüşe neden olabilir.

Bugün sizin için benzersiz bir paralaks alanı seçimi hazırladık ve en başarılı örnekleri tanımanızı tavsiye ediyoruz. açılış sayfaları bu etkiyi kullanarak. Bazıları sanat eseri gibi görünürken, bazıları olağanüstü formatlarıyla şaşırtıyor, ancak hepsi dikkatinizi hak ediyor. Şimdi örneklerle paralaks ve ne olduğuna bir göz atalım.

1. Düz tasarım ve Gerçekçilik

Hangi taraftasın?

Microsoft, Google ve Apple gibi devlerin de yardımıyla (düz tasarım) göz açıp kapayıncaya kadar sezonun hiti ve yüzlerce haber kaynağı ve blogda tartışma konusu oldu. Web tasarımı alanında bir tür atılım olarak algılandı ve büyük olasılıkla gerçekten öyleydi. Etkileşimli ajans bozulmadan, müşterilerinin dikkatini sanal tasarımın geliştirilmesindeki bu oldukça sıra dışı aşamaya çekmeye karar verdi ve interaktif bir yolculuk hazırladı ve ona “Düz tasarım ve gerçekçilik” adını verdi. Bütün bunlar, elbette, yeni bir etkinin yardımı olmadan yaratıldı.

Ajansın yaratıcı direktörü Alejandro Lazos, en zorlu şeyin bir HTML5 oyununu paralaks kaydırma ile birleştirmek olduğunu açıklıyor.

"Kullanıcıların durmadan baştan sona hareket edebilmeleri için tüm eylemin sürekli olmasını istedik. Bunu yapmak için, url üzerinden veri aktarımını ve arka planda verileri güncellemeyi mümkün kılan ve kullanıcıya gecikmeden uygun sayfayı sağlayan ajax teknolojisini kullandık. "

2. Sony

Böyle bir şey görmediniz!

Muhtemelen dünyadaki hiç kimse ürünlerini Sony'nin yaptığı gibi nasıl sunacağını bilmiyor. Bu açılış sayfası, Sony'nin "Taşıyın" kampanyasının bir parçasıdır ve hakkında şunları söylerler:

"Bize bir şekilde kobay deniyordu, çünkü tanıttığımız tüm yenilikler rakip şirketler tarafından hemen benimsendi. Bizi incitmek istediler ama biz bunu iltifat olarak aldık. Sanatçılar ve mühendislerin işbirliği her zaman bir deneydir, ancak ancak o zaman yarın ileriye doğru bir adım atacağınızı umabilirsiniz."

3. Kosta Kahvesi

Graphite Digital, şirketin ürünlerini en anlamlı şekilde temsil eden illüstrasyonları seçti

Bu etkileyici tek sayfalık sayfa, Brighton'ın Graphite Digital ajansının beynidir. Yakın geçmişte ajans, Costa Coffee ürününü parlak ve ilginç bir şekilde sunmakla görevlendirildi.

Çalışmanın sonucu tüm övgüleri hak ediyor. Açılış sayfası muhteşem görünüyor. Her türlü etkileşimli öğe ve animasyonlu resimlerle doludur.

4. Otoyol Bir

Büyük resim ağırlığı, geliştiriciler için büyük bir sorun haline geldi

Lüks bir tatil ve balayı şirketi olan seyahat acentesi Exsus için Newcastle ajansı Shout Digital tarafından tasarlanan bu çarpıcı mikrosite, bu konunun bir başka harika örneğidir. Retro tarzdaki animasyonları anında dikkatinizi çeker ve jeneriğin sonuna kadar peşini asla bırakmaz.

Tüm ünlü California sahillerini ziyaret etmek için klasik bir 1959 Cadillac Eldorado sürün. İlk bakışta, tüm efektler basit görünüyor, ancak kaydırmaya başladığınızda gerçek sihir önünüzde açılacak.

5. Paranızı Önemli Hale Getirin

Mali durumunuzu Make Your Money Matter'ın önerdiği şekilde yönetin

Birçok insan para ve kişisel finans konusuyla ilgileniyor, bu nedenle New York dijital ajansı Firstborn, bir kredi birliği için sipariş hazırlarken geleneksel bir formata yenilikçi bir format tercih etti.

Hedef kitleyi bir kredi birliğinin faydaları (ve bankaların dezavantajları) hakkında bilinçlendirmek amacıyla pazarlamacılar, bir kredi birliğinin nasıl çalıştığını, nerede bir kredi birliğinin nerede bulunacağını erişilebilir ve ilginç bir şekilde açıklayan harika bir açılış sayfası oluşturdular. organizasyon ofisleri ve çok daha fazlası. Ayrıca bankaların yatırımlarınızdan elde edeceği karı hesaplayacak bir hesap makinesi bulunmaktadır.

6. Döngü

Açılış sayfası size mevcut tüm bisiklet türlerini gösterecektir.

Çinli bilgeler, "Sen ne yersen osun" derler. Tasarımcılar ve bisiklet tutkunları Romain Bourdieux ve Thomas Pomarelle için bu ünlü bilgelik "Sürdüğünüz şeysiniz"dir. Ortak yazarları olan web siteleri, yalnızca yeni moda kaydırma ile değil, aynı zamanda harika bir mizah anlayışı ve birinci sınıf çizimlerle sizi şaşırtacak.

Görünüşe göre geliştiriciler tek bir bisiklet tipini kaçırmadılar ve onları her ziyaretçinin bir tane satın alıp milyonlarca dolarlık alt kültüre katılmaya istekli olacağı şekilde sunmaya çalıştılar.

7. Lexus

Evde rahat koltuğunuzda otururken arabayı deneyebilirsiniz.

Bu site sayesinde deneyebilirsiniz yeni model evinizden ayrılmadan Lexus serisinden. Amaze dijital danışmanlık ajansı tarafından geliştirilen interaktif video, size Lexus IS otomobilinin içi ve dışı hakkında eksiksiz ve yüksek düzeyde görsel bilgiler sağlayacaktır. Varlığın etkisi sağlanır.

Bu sonuca ulaşmak için, pazarlama ekibinin aracı çeşitli manzaraların arka planına karşı yakalaması ve her bir kilit noktada çevredeki görünümü taraması gerekiyordu. HTML5 teknolojisi sayesinde, açılış sayfası hem bilgisayarlarda hem de akıllı telefonlarda çalışır ve otomobil tanıtımını her zamankinden daha başarılı hale getirir.

Amaze Ticari Direktörü Wendy Stonefield şunları söylüyor: “HTML5 kullanmak birkaç hedefe ulaşmamızı sağladı. İlk olarak, otomobilin ve işlevsel özelliklerinin görsel bir gösterimidir. İkincisi, kimsenin onsuz yapamayacağı etkileşimdir. modern proje: bu durumda, kullanıcıların arabanın iç ve gövdesinin rengini seçmelerine izin veriyoruz. Videoları oluştururken, sofistike izleyiciye odaklandık ve bugün var olan teknolojilerle bu mümkün olandan daha fazla hale geldi. Lexus IS'yi gerçekte olduğu gibi gösterdik."

8. Ayakkabılarımdaki Hayat

Ayakkabılarımda Yaşam (İngilizce'den - başka birinin gözünden), temel amacı HIV bulaşmış insanlara karşı korku ve önyargıyı ortadan kaldırmak ve genç nesli HIV ve AIDS hakkında bilinçlendirmek olan iddialı bir projedir. Londra merkezli Traffic ajansı, genç bir kitlenin dikkatini çekecek ve güvenlerini kazanacak bir açılış sayfası tasarlamakla görevlendirildi ve bununla harika bir iş çıkardılar.

Kurumsal yazı tipi Houshka Rounded Medium, sayfanın daha canlı ve daha ilginç görünmesini sağlayan yazı tipi-yüz sözdizimi desteğiyle uygulandı. Sarı kullanımıyla birlikte diğer dekoratif unsurlar, kaynağı estetik olarak hoş hale getirdi.

9. Canavar

Ünlü halk şarkıcısının yeni açılış sayfası şiir okuyor ve onlara inanılmaz görüntülerle eşlik ediyor

Laura Marling'in yeni albümü A Creature I Don "t Know"u tanıtmak için Londra merkezli dijital ajans Studio Juice, şiirlerin enfes çizimler ve etkileyici animasyonlar eşliğinde okunduğu harika bir açılış sayfası geliştirdi.

Böyle bir mucize yaratmak için, animasyonların film müziği ile senkronize edildiği ve hızlarının daha önce belirtilen parametrelerle eşleştiği yeni anlamsal öğeler ve nitelikler kullanıldı.

10. Laboratuvar

Birleşik Krallık'ın önde gelen Alzheimer hastalığı ajansı olan Alzheimer's Research, çalışmalarını ve sonuçlarını eğlenceli ve erişilebilir bir şekilde iletmeye kararlıdır. Bunun için The Lab kaynağı oluşturuldu.

Sayfada, her kullanıcı kurumun laboratuvarlarını ve kliniğini tanıma fırsatı bulur ve kısa bir formda açılır ipuçları ekranda gösterilenleri açıklar. Bunlardan herhangi birine tıklarsanız, daha ayrıntılı bilgi alırsınız. Bilim adamlarının teorilerini nasıl hayata geçirdiğini ve milyonlarca insana nasıl umut verdiğini gösteren en iyi örnek.

11. Beyniniz Neden Infographics İstiyor?

İnfografikler hakkında bilgi grafikleri!

NeoMam Studios, bir bilgi sunma yöntemi olarak infografiklerin ana avantajlarını vurgulayan mükemmel bir paralaks kaydırmalı açılış sayfasına sahipti.

Şirketin yöneticisi Danny Ashton, "Geliştiricilerimizin uygulaması gereken en zor şey paralaks kaydırmadır" diyor. "Mevcut tüm kitaplıkların önemsiz olduğunu düşündüler, bu yüzden onların yerine kendi kitaplıklarını oluşturdular."

12.5 derece

Bu kaynağın ana özelliği, sayfalarının her birinin kendi kaydırma mekanizmasına sahip olmasıdır. Her biri! Bu çok komik ve çok başarılı bir yaklaşım, bu aynı zamanda bu teknolojinin dahiyane bilgi sunma biçimleri yaratmanıza izin verdiğini kanıtlıyor.

13. Atlantis Dünya Fuarı

Burada olağandışı kaydırma, arsa için olduğu kadar eğlence için de işe yaramaz.

Bu çevrimiçi bilgi grafiği, paralaks kaydırmayı yalnızca bilgileri daha verimli bir şekilde sunmak için değil, aynı zamanda canlandırmak ve belirli bir arsaya sığdırmak için kullanan Frank Chimero tarafından geliştirilmiştir. akrobasi!

14. Her son damla

Temiz su eksikliğinin küresel sorunu hakkında bilgi edinin!

Animasyon stüdyosu Nice & Ciddi, bu açılış sayfasını gezegendeki temiz su kıtlığı sorunu hakkında halkı bilinçlendirmek için tasarladı. Suyu nereye harcıyoruz? Nereden kurtarabiliriz? Nasıl yapılır? Bu problemle ilgili her şeyi öğreneceksiniz. Her son damla.

15. Yaşayan Söz

Dijital ajans Tribal, Living Word çeviri bürosunun çevrimiçi temsilini güncellemek ve onu bilgilendirici ve ilginç hale getirmekle görevlendirildi. Sonuca kendiniz hayran olabilirsiniz, ancak hemen İngilizlerin olağandışı bir şey bulmadığını, ancak her şeyi düzgün ve temiz bir şekilde yaptıklarını söyleyelim.

16. Madwell

Paralaks kaydırma, Madwell'in açılış sayfalarına derinlik katıyor

New York merkezli iş geliştirme ajansı Madwell, portföyünü sunmak için bir açılış sayfası kullanıyor. Paralaks kaydırma, düzenledikleri eylemde bir tür zevktir: sonuçta ortaya çıkan 3B efekt, yaratımlarına derinlik katar.

17. Jacksonville Şehir Merkezinde Sanat Yürüyüşü

Jacksonville Downtown Art Walk, Jacksonville, Florida'da geleneksel bir aylık sanat ve kültür etkinliğidir. Festival 15 bloğa yayılıyor ve onlarca galeri, müze ve bardan oluşuyor. Bütün bunlara sokak aktörleri ve müzisyenler eşlik ediyor. Bu etkinlikle ilgili güzel bir web sitesi, evinize neşeli bir hava getirebilir.

18. Von Hollandalı

Moda markası Von Dutch, kurucusunun inanılmaz hayat hikayesini web sitesinin sayfalarından anlatıyor. Kuşkusuz, trend olmak için site için yeni çıkmış bir kaydırma türü kullanıldı. Sayfada gezinirken, resimler ve simgeler yukarı ve aşağı yüzer ve siz yokken birisinin monitörünüze su döktüğü izlenimini verir.

19. Fannabi

Fanabee, müziğe düşkün olanlar için değil, daha çok onu toplayanlar için oluşturulmuş bir açılış sayfasıdır. Bu hizmet ile topladıklarınızın (CD, poster, T-shirt vb.) bir listesini yayınlayabilir ve eksiklerinizi bulabilirsiniz.

20. Peugeot Hibrit4

Yeni teknolojilerin yeni bir şekilde sunulması gerekiyor, değil mi?

Otomotiv devi Peugeot (Peugeot) tarafından görevlendirilen çevrimiçi çizgi roman, şirketin aynı anda iki görevi yerine getirmesine izin veriyor: ilk olarak, hedef kitlenin dikkatine oldukça etkili bir şekilde sunuyor. yeni mekanizma Peugeot Hybrid4 ve ikincisi, hem ürünün hem de şirketin imajı için çalışıyor: Cesurca biçimler deneyen ve bireyselliğini unutmayan Peugeot'ya katılmak artık daha da prestijli hale gelecek.

21. Kültürel Çözümler

Cultural Solutions, adından da anlaşılacağı gibi sanat konularıyla ilgilenen bir danışmanlık ajansıdır. Şirket logosu birbiri üzerine bindirilmiş çok renkli dairelerden oluşmaktadır. bu yüzden üzerinde ana sayfa bu çemberler sitede paralaks etkisi kullanılarak oynanmaktadır. Daireler farklı hızlarda hareket eder ve bu da derinlik ve hacim ekler. Sonuç, özlü, ancak çok geniş ve şık bir ifadedir.

22. jQuery Konferansı

jQuery Conference web sitesinin geliştiricileri asıl şeyi unutmazlar: bilgi içeriği ve gösteriş arasındaki doğru dengeyi korurlar.

jQuery konferansı için özel olarak oluşturulan site, kurgu ile yürütülmektedir. Sayfayı aşağı kaydırdığınızda, jquery'nin paralaks kaydırması, farklı animasyonlar zincirini tetikler: soldan sağa giden bir bisiklet veya bir köpekbalığını kovalayan martı sürüsü. Genel olarak, orijinaldir ve efektlerle aşırı yüklenmez: sonuçta, asıl şey sadece şaşırtmak değil, aynı zamanda duyulmaktır.

23. Şekil

Yaratıcı ajans Shape, açılış sayfasında oldukça özlü bir biçimde, faaliyetlerinin ana aşamaları hakkında konuşuyor. Güzel görseller ve animasyonlar netlik katıyor.

24. Nintendo

Hedef kitleyi tanıtmak yeni seri Tanınmış bir Japon şirketi olan Mario Kart Games, oyunu dünya çapında kısa bir gezi formatında anlatan bir açılış sayfası geliştirdi. Açılış sayfasının tasarımı ve renk şeması, oyunun stilini kopyalar ve yol boyunca çocukluktan tanıdık karakterlerle tanışacaksınız.

25. İçecekleri Etkinleştir

Sadece kapağı sökün ve hareket başlayacak

Activate Drinks şirketi, müstahkem içeceklerin dağıtımıyla uğraşmaktadır ve ürünlerini tanıtmak için her açıdan ilgili bir kaynak geliştirmiştir. Önce şişenin kapağını açıyorsunuz (tabii ki sayfayı kaydırıyorsunuz) ve sonra kendinizi hızlı bir baloncuk kasırgasının içinde buluyorsunuz. Üç seviyeli baloncuk yerleşimi, monitörde bir 3D efekti ve su sıçramasına benzer bir his yaratır.

26. Beyaz Saray'ın Irak Zaman Çizelgesi

Olağandışı kaydırma, yalnızca kampanyanın estetik yönünü geliştirmek için değil, aynı zamanda ABD hükümeti örneğinde, sayfaya anlam ve duygu katmak için de kullanılır. Tüm içeriğin, alttaki resimlerden çok daha hızlı kaydırıldığını fark edebilirsiniz. Bu, okuyucunun dikkatini tam olarak ziyaretçilerin duyguları üzerinde etkisi olan bu çizimler üzerinde tutmak için bilerek yapılır.

27. Dirgen Kapak Hikayeleri

Ünlü müzik sitesi Pitchfork, iddialı Cover Stories projesiyle büyük ses getirdi. İnternet kaynağı, basılı bir parlak derginin bazı özelliklerini elde etti, ancak site için paralaks efektinin uygulanması, etkileşimli videolar, röportajlar ve benzersiz fotoğraflar, onu başka hiçbir şeye benzemez hale getirdi. Hareketli portre fotoğrafları, duygulu metinler ve mükemmel uyumlu bir film müziği - çok anlamlı ve zarif.

28. Soleil Noir 2012 | Biz inanıyoruz...

Soleil Noir'den Fransızlardan büyüleyici minimalizm

Fransızlar tarafından Soleil Noir'den tasarlanan bu ilginç açılış sayfası aslında bir Yeni Yıl kartı. Burada karmaşık bir şey bulamayacaksınız: baş döndürücü paralaks kaydırma, çizimlerde minimalizm, özlü ifadeler - ama bu basitlik büyüleyici.

29. Oakley

Oakley, çarpıcı paralaks kaydırmayı etkileyici fotoğrafçılıkla birleştiriyor

Oakley, ünlü bir gözlük ve gözlük tedarikçisidir ve bu kaynak özellikle yeni Airbrake MX gözlük modelini tanıtmak için geliştirilmiştir. Açılış sayfası, çarpıcı paralaks kaydırmayı ürünü mükemmel şekilde sunan etkileyici fotoğraflarla birleştirir.

30. Jason Kenny OBE

Bisiklet yarışında üç kez Olimpiyat ve iki kez dünya şampiyonu Jason Kenny için açılış sayfası

Bu yılın başlarında, Bristol pazarlama ajansı Fiasco Design bunu harika bir şekilde tasarladı. Açılış sayfasıüç kez Olimpiyat ve iki kez dünya bisiklet şampiyonu Jason Kenny için. Ajansın kurucu ortağı Ben Steers şunları söylüyor: "Referans şartlarına dayanarak, dikey kaydırma ve paralaks içeren tek sayfalık bir site oluşturmaya karar verdik."

31. La Moulade

Gezinme çubuğu, hızlı ve kolay bir şekilde gezinmenizi sağlar. istenilen alan sayfalar

Artan sayı arasında açılış sayfaları animasyonları tetiklemek için kaydırma çubuğunun konumunu kullanma ve ses efektleri, Fransız ajansı La Moulade'nin oluşturulması, sayfadaki konumunuzun çok sıra dışı bir göstergesiyle öne çıkıyor. En üstte bulunur ve sitenin herhangi bir yerine erişmenizi sağlar.

32. Yürüyen Ölü

En zor şey, tüm teknolojilerin başarılarını bir araya getirmektir.

Baş Tasarımcı Gavin Beck, proje üzerinde çalışırken edindiği izlenimlerini “Her şeyden önce bizler de bu gösterinin hayranlarıyız” dedi. - Planlarımız dünyayla eşleşen bir web sitesi oluşturmaktı” Yürüyen ölü”Şovun hayranlarının takdir edeceği ve çalışacağı. Hedeflerimize ulaşmak için HTML5, CSS3, JavaScript / jQuery, Web Audio / HTML5 Audio ve tabii ki paralaks kaydırma gibi yeni geliştirmeler kullandık. En büyük zorluk, tüm bu teknolojilerin birlikte çalışmasını ve her türlü platformda kullanılabilir olmasını sağlamaktı."

33. New York Times: Domates Konservesi Blues

Bu, çevrimiçi gazeteciliğin geleceği olabilir mi?

İnsanların gazete ve dergi okumakla yüklenmediği bir çağda, pek çok gazeteci okurun dikkatini basılı söze nasıl çekeceğini merak ediyor. Bir Amerikan gazetesi, krizi aşmak için seçeneklerden birini sundu. Yeni geliştirilen York Times yeni form Dergi Makalesi ve Öykü Gönderileri, web tasarımındaki en son gelişmeleri içeren ve Atilla Futaki tarafından resimlenen tek sayfalık bir sitedir.

Sayfayı kaydırmaya başladığınızda, çizimler hareket edecek ve sizi açıklanan eylemin içine çekecektir.

34. Sağlık Hizmeti Ödemeleri

Karmaşık bir şey yok gibi görünüyor, ama oldukça eğlenceli görünüyor

İster kamu ister özel sağlık kuruluşu olsun, bu kuruluşların liderleri, artan tazminat ödemeleri hacminden giderek daha fazla endişe duyuyor. Sunulan infografikler tam olarak bu sorunu gözler önüne sermekle birlikte paralaks ile kendine dikkat çekiyor.

Açılış sayfasını aşağı kaydırır kaydırmaz, ekranda bir sağlık uzmanı belirir, koridorda yürürken önüne sedyeyi iter. Bölümden bölüme geçer ve her biri Birleşik Krallık Ulusal Sağlık Sistemi tarihinde belirli bir yılı temsil eder. Pop-up'lar, bu yıllarda maksimum tazminat ödemelerinin ne kadar yapıldığı hakkında bilgi sağlar. Karmaşık bir şey yok gibi görünüyor, ama oldukça eğlenceli görünüyor.

Bu açılış sayfasını geliştiren ajansın bir çalışanı, çalışmayla ilgili izlenimlerini paylaşıyor: "Bu siteyi oluşturmak için HTML5, CSS3 ve JavaScript'te yeni teknolojiler uyguladık. Animasyonlar önemli bir unsur olduğundan, esas olarak “skrollr” animasyon kitaplıklarını kullandık. Her elemanı elle boyadık ve CSS3 desteği ile son rötuşları ekledik."

35. Biz Açıyoruz

mükemmel oyun farklı şekiller kaydırma

Bu kaynak, Norveçli Unfold ajansı tarafından oluşturulmuştur ve sonsuz kaydırma ve paralaks kaydırma gibi efektlerin bir kombinasyonunun bir örneğidir. Sağ üst köşede gizlenmiş olan gezinme çubuğu, sitede nerede olduğunuz hakkında size her zaman bir fikir verecek ve ilgilendiğiniz alana hızlı bir şekilde gitmenizi sağlayacak ve sitenin sonuna kaydırırsanız , kaydırma çubuğunun otomatik olarak yukarı doğru hareket edeceğini fark edeceksiniz ve siteyi baştan aşağı kaydırmaya devam edeceksiniz.

36. Tasarruf Mücadelesi

Bu açılış sayfasını oluşturmak için geliştiriciler, ziyaretçilerin sayfadaki olayları "kaydırabildiği" skrollr.js eklentisini kullandı. Bu, hızlı bir simülasyon hızı sağlar, geçişleri yumuşatmak ve etkili yapı oluşturmak için daha fazla zaman sağlar. Kullanıcı arayüzü... Animasyonlar oluşturmak için CSS 3D teknolojisi kullanıldı.

Stellar.js eklentisi

Stellar.js, kaydırılabilir herhangi bir nesneye paralaks efekti uygulayabileceğiniz bir eklentidir. Bu eklenti artık desteklenmese de, kararlılığı ve uyumluluğu nedeniyle birçok geliştirici tarafından kullanılmaktadır. en son sürümler jQuery.

Bir başka kullanışlı özellik de jQuery kitaplığı olmadan çalışabilme yeteneğidir. Bu nedenle, buna dayalı açılış sayfaları daha hafiftir ve daha hızlı yüklenir.

Çözüm

Dünya durmuyor ve her gün web tasarımı alanında yeni sanat eserleri ortaya çıkıyor. Bu kahramanlar arasında olacak mısın? Bu mükemmel teknolojileri benimserseniz çok kolay. Ancak asıl şeyi unutmayın: herhangi bir gömülü efekt, dönüşümü artırmalıdır! Aksi takdirde, sadece ihtiyacınız yok.

LPgenerator platformu, daha doğrusu görsel düzenleyicimiz, paralaks efektlerini destekler; LP Store açılış sayfalarındaki şablonlarla kendiniz görün

, Kaplumbağalar Zamanda veya orijinal oyun ay devriyesi... Bu oyunlarda, paralaks tekniği, farklı dokulara sahip birkaç arka plan katmanının farklı hızlarda hareket ettiği anda gözlemlenir ve bu da üç boyutlu uzay etkisi yaratır.

Web geliştirme makalesinde neden retro oyunlardan bahsetmeye başladım? En basit cevap "çünkü havalılar" olabilir, ama hayır. Paralaks kaydırma, web tasarımı dünyasına giren harika bir tasarım konseptidir. Nike, orijinal Nike Better World web sitesini tasarlamaları için pazarlama devleri Weiden ve Kennedy'yi işe aldıklarında, bu tekniği büyük bir başarıyla kullanan ilk kişiler arasındaydı. Nike Better World sitesi o zamandan beri güncellendi ve yenisiyle değiştirildi, ancak Nike'ın ilk paralaks tasarımına oldukça benzeyen başka bir site daha var, Activate spor içeceği sitesi.

Sitenin bir sayfasını aşağı kaydırırken, bu sayfadaki birkaç farklı öğenin farklı hızlarda hareket ettiğini muhtemelen fark etmişsinizdir. Örnek olarak yukarıdaki resimde gösterilen sayfayı ele alalım. Sayfayı aşağı kaydırdığınızda, 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 odaklı ve ön planda olan mavi nokta grubunun kaydırma çubuğuna göre biraz daha hızlı hareket ettiğini göreceksiniz. “0 ŞEKER | 0 KALORİ | DOĞAL TATLANMIŞ ”ve“ Ürünler ”sayfasının ana başlığı. Ve son olarak, ürünün kendisinin hem küçük hem de arka planda odaksız, büyük, odakta ve ön planda yatan görüntüleri vardır. Arka plan ürün resimleri metinle aynı hızda hareket ederken, ön plan ürün resimleri metinden daha hızlı hareket eder. Bunların hepsi, farklı görüntü katmanlarının birbiri üzerine bindirildiği ve siz sayfayı kaydırırken farklı hızlarda hareket ederek üç boyutlu bir efekt yaratarak paralaks kaydırmanın mükemmel bir gösterimidir.

Paralaks kaydırma, dikey sayfa kaydırma veya düz çizgi kaydırma ile sınırlı değildir. Nintendo'ya bu iddiayı desteklemek için mükemmel bir örnek verme hakkını verelim. Yukarıdaki Activate web sitesinde gördüğümüz gibi, kahramanlarımızın genellikle ekran boyunca dikey olarak aşağı değil, soldan sağa yatay olarak hareket ettiği ilk Nintendo oyunlarını hatırlayın. MarkioKart Wii'de bir gezintiye çıkın ve orada gördüğümüz bazı harika şeyler hakkında konuşalım.

Fark edeceğiniz ilk şey, sayfanın kaydırma yönüdür - dikey değil, yukarıda belirtildiği gibi, ancak başlangıçta yataydır. Elbette, harika ama aynı zamanda yeni bir konsept değil. Ayrıca arka planda Yoshi'nin dinozoru ve mermileri, ön planda Mario ve Luigi ve siz kaydırdıkça ana içeriğin farklı hızlarda hareket etmesiyle paralaks etkisini fark edeceksiniz. Ancak #vurgular ve #saldırı sayfalarına ulaşır ulaşmaz, yer değiştirme yolu artık tamamen yatay değildir. Aynı şey #rediscover ve #snes sayfaları arasında gezinmek için de geçerlidir. Görüntüler yalnızca farklı yer değiştirme oranlarını korumakla kalmaz, aynı zamanda değişir Genel yön yataydan dikeye.

Ayrıca web sitenizde paralaks efekti kullanmanın sadece yapay bir 3D efekti oluşturmakla sınırlı kalmaması gerektiğini de belirtmekte fayda var. Alman web tasarım stüdyosu Webseitenfactory'nin web sitesi, bir web sitesi sayfasına simgeleri farklı yollar boyunca hareket ettirmek, site kayarken yakınlaştırmak ve uzaklaştırmak gibi çeşitli efektler eklemek için paralaksın nasıl kullanılabileceğinin bir örneğidir.

Paralaks kaydırma, çok fazla içeriği olmayan bir siteyi canlandırmaya da yardımcı olabilir. Ya sitenizin tamamı bir misyon beyanından veya hakkımızda bölümünden ve ayrıca iletişim bilgilerinden oluşuyorsa? Büyük olasılıkla, bunu bir sayfada yapabilirsiniz ve belirli koşullar altında tek sayfalık iyi bir siteye sahip olursunuz, ancak ziyaretçiler tarafından hatırlanacak mı? Muhtemelen değil. Peki ya insanların İlkbahar / Yaz'da yaptığı gibi buna biraz paralaks eklerseniz?

İlk izlenimim “Ah, bu site güzel görünüyor” oldu. Ama kaydırmaya başladığımda, izlenim hemen “Vay canına, bu site harika!” oldu. Basit bir paralaks efekti eklemek, iyi ile akılda kalıcı arasındaki farkı yaratan şeydir.

Paralaks kaydırma, kolunuzu korumak için güzel bir numaradır. Ve ister karmaşık çok sayfalı bir site, isterse tek sayfalık basit bir kartvizit sitesi yapıyor olun, her zaman uygulanabilir.

Paralaks sitelerine örnekler

Herkese merhaba. Bugün size basit bir paralaks efekti oluşturmak için küçük bir betikten bahsedeceğim.

Makale kısa ama bilgilendirici olacak, bu nedenle 15 dakika içinde açılış sayfanıza paralaks ekleyebilirsiniz. Uzun zamandır bu ilginç efekti sitenize eklemek istiyorsanız, okumaya devam edin ...

Bir web sitesinde paralaks etkisi nedir

Önce bunun ne hakkında olduğundan bahsedelim. Dolayısıyla web tasarımında paralaks etkisi, arka plan görüntüsünün üzerindeki öğelerden daha yavaş hareket ettiği bir tekniktir. Daha deneyimli olanlar için, paralaks etkisini fare imlecine "bağlamayacağız" diye bir rezervasyon yapacağım. sadece bir paralaks arka planı oluşturun. Başlayalım.

Bir web sitesinde paralaks etkisi nasıl yapılır

Yani, yaptığımız ilk şey jquery kütüphanesini dahil etmek. Her zamanki gibi, head etiketleri arasında:

Şimdi, Basit Paralaks Kaydırma komut dosyasını bağlamanız gerekiyor. Hemen sıkıştırılmış sürümü şu şekilde kullanmanızı öneririm: ek ayarlar komut dosyasının içinde yapmanız gerekmez:

Şimdi ne yazılması gerektiğini bulalım. html sayfası paralaks efektimizin çalışmasını sağlamak için.

Veri-paralaks = "kaydırma"

Data-image-src = "resme giden yol / bg.png"

Lütfen resmin başlığa img etiketi kullanılarak yerleştirilmediğini, ancak paralaks uygulamak istediğimiz kaptaki öznitelikte doğrudan ayarlandığını unutmayın.

Bu konuda, prensipte bitirebilirsiniz, ancak birkaç kelime daha:

• Dalışta paralaks efektini uygulamak istediğimiz başka bir unsur yoksa, yüksekliğini ayarlamanız gerekir, aksi takdirde hiçbir şey görmezsiniz.
• kullanılmaması durumunda sorumlu tasarım, naturalWidth ve naturalHeight niteliklerini kullanarak görüntünün genişliğini ve yüksekliğini doğrudan html'de ayarlayabilirsiniz.
• Veri konumu özniteliğini kullanarak görüntüleri taşıyabilirsiniz. CSS'deki arka plan konumuna benzer.

Geri kalan seçenekleri, yukarıda belirtilen projenin resmi sayfasından öğrenebilirsiniz.