girişParalaks kaydırma örnekleri. Paralaks efektli evrensel açılış sayfası
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 dış görünüş 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 sitesi seçimi hazırladık ve bu efekti kullanan en başarılı açılış sayfalarının örneklerini tanımanızı öneririz. 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
Newcastle acentesi Shout Digital tarafından lüks bir kaçamak ve balayı şirketi olan seyahat acentesi Exsus için 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.
Farkındalık yaratmak için yola çıktık hedef kitle Bir kredi birliğinin avantajları (ve bankaların dezavantajları) hakkında pazarlamacılar, bir kredi birliğinin nasıl çalıştığını, kuruluşun ofislerinin nerede bulunacağını ve çok daha fazlasını erişilebilir ve ilginç bir biçimde açıklayan harika bir açılış sayfası oluşturdular. 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 sunmak için değil, aynı zamanda canlandırmak ve belirli bir hikayeye 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 sitenin ana sayfasında bu daireler paralaks etkisi yardımıyla oynanmaktadır. Daireler ile hareket eder farklı hız derinlik ve boyut katar. 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 bir 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, tek sayfalık bir web sitesi oluşturmaya karar verdik. dikey kaydırma ve paralaks ".
31. La Moulade
Gezinme çubuğu, hızlı ve kolay bir şekilde gezinmenizi sağlar. istenilen alan sayfalar
Giderek artan sayıda açılış sayfası, animasyonları tetiklemek için kaydırma çubuğu konumunu kullanıyor ve ses efektleri, Fransız ajansı La Moulade'nin oluşturulması, sayfadaki konumunuzun çok sıra dışı bir göstergesiyle öne çıkıyor. En üste yerleştirilir ve sitenin herhangi bir bölümüne de 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. Krizin üstesinden gelmek için seçeneklerden biri, dergi makalelerinin ve hikayelerinin yeni bir sunum biçimini geliştiren Amerikan gazetesi The New York Times tarafından önerildi - web tasarımı alanındaki en son gelişmeler kullanılarak oluşturulan tek sayfalık bir site ve Atilla Futaki'nin çizimleriyle süslenmiştir.
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
Hangi eski bilgisayar oyunlarını hatırlarsanız, ana karakterçeşitli iki boyutlu zindanlardan veya ormanlardan geçerek, yapay bir paralaks etkisinin ne olduğu hakkında bir fikriniz olur. Gerçekçilik eklemek için (eğer bunu iki boyutlu bir oyunda konuşabilirsek), 1982'de Moon Patrol oyununun geliştiricisi ve ardından Nintendo ve Konami gibi büyük devler, arka plan katmanını kahramanın hareketlerinden daha yavaş bir hızda hareket ettirmeye başladı. . Böylece gerçek hareketin doğasında var olan "derinlik" etkisi simüle edildi.
Moon Patrol, paralaksın ilk bilgisayar tabanlı uygulamasıdır:
Araba kullanırken, yakındaki ve uzaktaki nesneler farklı görüş açılarından geldikleri için görsel olarak farklı hızlarda hareket ederler. Buna paralaks etkisi denir.
Göreceli basitliğine rağmen, paralaks, herhangi bir hareketli resmi çok daha etkili ve daha güzel hale getirir, sanki üçüncü bir boyut ekler gibi ve bu nedenle web tasarımında uygulanması sadece bir zaman meselesiydi. Kullanıcı web sitesine göz attığında ne yapar? İçinden geçiyor (kaydırıyor) - yani, bazılarını yapıyor paralaks için kullanılabilecek hareket.
Bu olağanüstü etkiyi kullanan ilk şirket Nike oldu - biraz ağırlığa rağmen, spor şirketi o zaman herkesi yeniliğiyle şaşırttı. Paralaks kullanılarak orada yaratıldığı için ağırdı. javascript.
gibi teknolojilerin ortaya çıkmasıyla CSS3 ve HTML5, hantal kodlarla sayfayı aşırı yüklemeden paralaks yapmak neredeyse hiç zorlanmadan mümkün oldu. En sık kullanılan eklentiler jQuery ve CSS... Sayfadaki öğeler katmanlara bölünmüştür ve sonuncusu kaydırma kaymasına istenen yanıta zaten maruz kalmaktadır.
Sayfa kaydırma farklı yönlerde düzenlenebildiğinden, paralaks kaydırma siteleri birkaç türe ayrılabilir.
Paralaks kaydırma sitelerinin türleri
1. Dikey paralaks kaydırma
Paralaksın X ekseni boyunca hareket ettirilerek elde edildiği en popüler site türü.Bu yöntem PC ve Mac kullanıcıları için sezgiseldir, ancak dikey paralaks biraz derinlik vermesine ve sayfayı "canlandırmasına" rağmen bunu yapmaz. aynı ölçüde ve yatay. Niye ya? Bir kişinin hareket etmeye alışık olduğu düzlemi düşünün ve nesnelere olan mesafeleri tahmin etmeye yardımcı olmak için ne tür bir paralaks daha güçlü bir şekilde gelişmeliydi? Bu yüzden
2. Yatay paralaks kaydırma
üç boyutlu modeller kullanmadan sitede tam teşekküllü bir 3D efekti oluşturmanıza olanak tanır. Böyle bir önceden ayarlanmış tasarımın mükemmel bir örneği yine Nintendo'dan - ana içeriğin en yakın düzlemde hareket etmediğine dikkat edin. En yakın çekim, kaydırma hızından çok daha hızlı hareket eden ve "ekran dışı" bir efekt ekleyen küçük öğelerin bulunduğu bir katmana aittir. Ancak, siteyi yatay olarak çevirmenin PC'lerde değil tabletlerde daha kolay olduğu unutulmamalıdır. ama herkes değil mobil tarayıcı karmaşık jQuery kodunu çekebilecektir, bu nedenle mobil platformlar için paralaks olmadan basitleştirilmiş bir sürüm yapılması önerilir.
3. İki boyutlu paralaks
Bu efekti uygulamak daha da kolaydır ve aynı zamanda herhangi bir kaydırma ve çevirme olmadan bile çalışacaktır. Nasıl? Diğerlerinin yanı sıra, görsel korteksimizin başka bir "böcek"i daha vardır: daha bulanık nesneler bizim tarafımızdan "odak dışı" olarak algılanır ve bu nedenle izleyiciye daha uzak veya daha yakın olarak algılanır. Bunu bilerek ve bazı öğelere, örneğin arka plana bulanıklık uygulayarak, tek ekranlı bir web sitesinde bile üç boyutluluk yanılsaması yaratabilirsiniz.
Paralaksın nasıl simüle edileceğine dair bir örnek:
Ancak teori yeter, örneklerle bakalım neymiş.
Paralaks tek sayfalık sayfaların en iyi örnekleri
1. "Laurentiis'ten gelen yol"
Laurentiis'in Hollanda'da geliştirilmesine yönelik sosyal proje sitesi, paralaks etkisinin diğer dikkat çekici içeriklere nasıl yerleştirilebileceğinin en iyi örneğidir. Yatay olarak değişen çeşitli katmanların yanı sıra, diğer görüntülerle karmaşık bir ilişki içinde değişen basit hareketli öğeler (kelebekler), grafikler, renk desenleri de bulabilirsiniz. Tasarımcıların sunduğu çeşitli yaratıcı içgörülere göz atın.
2. Lipton alkolsüz içecekler
Dikkati en önemli şeye çekmek için paralaksı ölçülü olarak nasıl kullanabileceğinize dair güzel bir örnek. Bu açılış sayfasının üst kısmında, paralaks yerine bir animasyon slaydı kullanılır, ardından sayfanın geri kalanından biraz daha hızlı hareket eden resim yazısı görünür - bu, ana değer önerisidir. Son olarak, çeşitli Lipton çay kokteyllerini sergileyen yatay bir paralaks atlıkarınca görüyorsunuz.
3. Stüdyo Muhterem Tasarım
Etkileşimli tasarım stüdyosu, bizi bilgisayar paralaksının kökenlerine - sekiz bitlik oyunlar çağında - geri götürüyor. Bu durumda, paralaks, belirli bir özelliğe dayanan hevesli tasarımcılarda olduğu gibi “battaniyeyi kendi üzerine çekmez”. Numara - etki sadece diğer unsurları hayata geçirir. Ancak, iyi bir tasarım stüdyosu başka türlü olamaz.
4. Art of Flight filminin internet sitesi
Bu sitenin tasarımı, bizim paralaks kaydırma sınıflandırmamıza tam olarak uymuyor, çünkü hareket ettikçe keskin bir dönüş yapıyor - bu spor filminin kahramanlarının düşünülemez hünerleriyle neredeyse aynı. Ve buna izin verilmediğini kim söyledi?
5. Spotify Açılış Sayfası
Halihazırda çok sayıda taklitçi bulan bir tasarımın mükemmel bir örneği. Paralaks, farklı hızlarda hareket eden tam genişlikteki kızaklarla elde edilir. Şık ve etkili.
6. Etkileşimli kartvizit iutopi
Bir web stüdyosu kartviziti için nefes kesici özel efektlerden daha iyi ne olabilir? Iutopi stüdyosu, sizi güzel yaratıklarla ve farklı paralaks açılarında hareket eden çeşitli unsurlarla dolu bir çizgi film okyanusuna çekiyor.
7. Sosyal hizmet Hashtago
Ve bu örnekte, dikey ve iki boyutlu paralaks başarıyla birleştirilmiştir - arka plan hareket etmez ve ziyaretçiler için önemli bilgiler içeren hareketli ön plana odaklanmayı en üst düzeye çıkarmak için odaktan çıkar.
Sonuç olarak, diyelim ki - hangi çekici etkiyi kullanırsanız kullanın, tek sayfalık bir açılış sayfasının ana amacını unutmayın - dönüşüm getirmek. Kullanıcı istenen eylemi gerçekleştirmezse, etkileşimli çabalarınız değersizdir. Ancak canlı efektler, insanların sitenizi ve markanızı hatırlamasını sağlar ve bu daha sonra çok faydalı olabilir - farklı bir paralaks açısında.
| 29.09.2014
İyi günler, sevgili okuyucular! 10 yerden oluşan bugünkü reytingimiz sıra dışı sitelere ayrılmıştır. Bu TOP-10 listesindeki sitelerin ortak bir yanı var - paralaks etkisi.
Özellikle henüz ne olduğunun farkında olmayanlar için şimdiden ivme kazanmaya başlayan ve web tasarım alanında giderek daha popüler hale gelen bu etkiden kısaca bahsedeceğiz.
Bu nedenle, paralaks etkisi veya paralaks kaydırma, arka planda perspektifteki nesnelerin ön plandaki nesnelerden daha yavaş hareket ettiği özel bir tekniktir. Bu nedenle, bir 3D efekti yaratılır, üç boyutlu bir boşluk hissi ortaya çıkar. Paralaks kaydırma, tek sayfalık bir siteye lezzet katmanın, bilgi grafiklerini renklendirmenin, bir hikaye anlatmanın veya bir portföy sergilemenin harika bir yoludur. Ve modern tasarımcıların bazı eserlerine güvenle sanat eseri denilebilir ... Ancak, yüz kez duymaktan bir kez görmek daha iyidir - TOP-10 sitelerimize göz atın ve kendiniz bir göz atın!
Not: bazı paralaks kaydırma siteleri, çeşitli efektler nedeniyle kaynak yoğun olabilir, bu nedenle belirli bilgisayarlarda ve taşınabilir cihazlarda "yavaşlamak" mümkündür.
Al ve Git
Derecelendirmemizde onuncu sırada, resmi süslemek ve canlandırmak için paralaks efektinin kullanıldığı Grab & Go sitesi yer alıyor. İmleci hareket ettirirken arka planda aynı anda hareket eden evleri ve ağaçları görebilirsiniz. Katılıyorum, bu lezzet nedeniyle sitenin ziyaretçi tarafından daha iyi hatırlanma şansı var.
DijitalEller
9. sırada yer alan DigitalHands ayrıca güzel bir şekilde öne çıkması ve ziyaretçiler tarafından hatırlanması için paralaks kullanır. Fare imlecini hareket ettirin ve özel efektin keyfini çıkarın.
Madwell
New York merkezli yaratıcı ajans Madwell, paralaks etkisini ustaca kullanarak portföyünü sitenin ana sayfasında sergiliyor. 3D hissi, tüm kaydırma süresi boyunca kullanıcıyı terk etmez.
Oakley
Herhangi bir ürünün doğru bir sunuma ihtiyacı vardır. Oakley mağazası, Airbrake MX gözlüklerinin faydalarını sergilemek için paralaks kaydırmayı kullanır. Ürünler sadece kaydırma kullanılarak her yönden görüntülenebildiği ve incelenebildiği için oldukça etkileyici ve bilgilendirici çıktı.
Paranızı Önemli Hale Getirin
Çok az insan kişisel finansı umursamıyor. Derecelendirmemizde 6. sırada yer alan Paranı Önemli Yap sitesi, erişilebilir bir biçimde izleyicilere kredi birliğinin avantajlarını gözler önüne sermekte ve bankaların dezavantajlarından bahsetmektedir. Burada, bankaların müşteri yatırımlarından ne kadar kar elde ettiğini gösteren bir hesap makinesi kullanabilir ve posta koduyla kredi kooperatiflerinin şubelerini bulabilirsiniz.
Uzay iğnesi
Seattle'ı 184 metreden keşfetmek ister misiniz? Space Needle web sitesi sizi şehrin en tanınmış simgesi olan ve İngilizce "uzay iğnesi" anlamına gelen Space Needle Tower'da sanal bir tura çıkaracak. 184 m yüksekliğinde, 42 m genişliğinde ve 9.550 ton ağırlığında olan bu kule, 320 km/s rüzgar hızına sahip kasırgalara ve 9,1 puana kadar depremlere dayanabiliyor. Ayrıca kulede 25 adet paratoner bulunmaktadır. Space Needle'ın ayırt edici bir özelliği, 159 metre yükseklikte bir gözlem güvertesi, bir SkyCity restoranı ve bir hediyelik eşya dükkanıdır. Zirvesinden Seattle şehir merkezini, Rainier Dağı'nı, Cascade Dağları'nı, Eliot Körfezi'ni ve çevresindeki adaları görebilirsiniz.
Peugeot Hybrid4 - Çizgi Roman
En büyük Fransız otomobil üreticisi Peugeot, Hybrid4 hibrit tahrik sistemini oldukça sıra dışı bir şekilde sundu. Gözlerimizin önünde heyecan verici bir çizgi roman açılır (bu arada, otomatik oynatmaya ayarlanabilir), burada ana karakterin görevi gizli verileri almak ve başını belaya sokmadan bırakmaktır. Operasyonu başarıyla tamamlamak için Peugeot Hybrid4 teknolojisini taklit eden dört farklı sürüş modu arasında geçiş yapmak zorunda kalıyor. maksimum verimlilik ve dinamizm (Spor), dört tekerlekten çekiş ve maksimum çekiş (4WD), performans ve ekonomi arasındaki denge (Otomatik), sessiz çalışma (ZEV).
The Walking Dead
Böylece The Walking Dead projesine giden TOP siteler listemizde üçüncü sıraya geliyoruz. İlk etapta pek çok The Walking Dead hayranını kendine çeken sitede HTML5, CSS3, JavaScript ve tabii ki paralaks efekti kullanılmış. Geliştiriciler, tüm bu teknolojilerin birlikte ve tüm platformlarda çalışmasını sağlayarak harika bir iş çıkardılar. Siteye girip gezinmeye başlayan kullanıcı, aktörlerden nasıl zombi yapılacağına dair komik bir hikaye görür.
Sony'nin “Be Moved” kampanyasının bir parçası olan benzersiz ve tekrarı olmayan bir proje, hacmi, dinamikleri ve en ince ayrıntısına kadar ince düşünülmesiyle etkiliyor. Muhtemelen Sony'den daha iyi bir ürün sunumu yoktur. Kelimeler gereksiz - sadece aşağı kaydırın ve keyfini çıkarın!
Düz vs. gerçekçilik
Ve son olarak Flat vs. sitesinin aldığı sıralamamızda ilk sıraya yerleştik. Gerçekçilik, inTacto interaktif ajansının beynidir. Muhteşem grafiklere (ve müzik eşliğinde!) sahip bu Yeni Yıl projesi, gerçekçi ve düz olmak üzere iki tür tasarımın temsilcileri arasında bir çatışmanın olduğu ilginç bir arka plana sahip dövüş türünün mini bir oyunudur. 2013'ün sonlarında - 2014'ün başlarında ana bayrama odaklanan yaratıcılar kaybetmedi: piyasaya sürüldükten sonra, bu etkileyici çalışma anında bir sansasyon yarattı ve bloglarda ve haberlerde popüler bir tartışma konusu haline geldi.
Site geliştiricileri, paralaks kaydırma ve HTML5 oyununu birleştirmeyi başardı. "Siteyi baştan sona kaydırırken her şeyin sorunsuz ve gecikme olmadan gerçekleşmesini sağlamak istedik. Bunu yapmak için arka planda verileri güncellememize izin veren AJAX kullandık ”diye açıkladı ajansın yaratıcı direktörü Alejandro Lazos. Proje, 2013'ün sonunda, Yeni Yıl'dan önce izleyicilere sunuldu. Kaydırmayı döndürmeye hazır olun, çok fazla eğlence sizi bekliyor!
Optik algının fiziğini tanımlamak anlamsızdır - kişinin portreden bakışı, bu portreye çeşitli uzamsal noktalardan bakan izleyicinin konumuna bağlı olarak hareket eder. Bunu erişilebilir kelimelerle net bir açıklama yapmaya çalışın. Aynı hikaye paralaks için de geçerlidir - optik bir yanılsamanın özelliklerini açıklamak hiçbir şeyi açıklamayacaktır, ama deneyelim. Etki, izleyicinin konumundan öznel olarak algılanan daha uzak bir koordinat referansına göre asimetrik yer değiştirmesi ile karakterize edilen yakındaki bir nesnenin uzamsal konumunda bir değişiklik olarak ifade edilir. Bunun gibi bir şey! Üçüncü göz, çakraları temizledikten ve aurayı geri yükledikten sonra, aralarında gergin bir şekilde sigara içiyor.
Sırayla anlayalım - bir kez anlamak, yüz kez karanlıkta kalmaktan daha iyidir.
Hayatta ve bir satış açılış sayfasında paralaks
Hiçbir şey örneklerle açıklanamaz, ancak her şey gösterilebilir. Kendinizi hareket halindeki bir arabada hayal edin. Yol kenarındaki önemli noktalar - kilometrelik sütunlar, ağaçlar, binalar - yan camın arkasında titreşiyor. Her biri araçtan farklı bir uzaklıkta bulunur ve bu nedenle farklı hızlarda görüş alanınızdan kaybolur. Yola yakın nesneler görsel olarak daha hızlı hareket eder ve uzaktaki nesneler daha yavaş hareket eder. Aynı zamanda, ufuk çizgisinde bulunan orman pratik olarak hareket etmez. Her şeye, paralaks fiziğinin açıklamasında buna bir son verebilirsiniz.
Sitenin tasarımıyla ilgili olarak (örneğin, bir satış açılış sayfası), her şey tamamen aynı görünüyor. Sadece hacim yoluyla gerçekleştirilir grafik görselleştirme- gölgeler, boyutlar, görünürlük. Görsel olarak kullanıcıya daha yakın yerleştirilmiş öğeler, uzakta bulunanlardan daha hızlı hareket eder. Bu, her biri ayrı özelliklere sahip üst üste binen grafik yapı katmanları ile elde edilir. Efekt iki şekilde uygulanır.
- Paralaks hareketi, fare imlecini hareket ettirerek başlatılır. Bu durumda, arka planda gömülü grafik nesneleri"dans etmeye" başlayın - hacimsel arka plan çeşitliliği ekleyerek programlanmış hareketleri gerçekleştirmek için.
- Paralaks etkisi, bir site sayfasının dikey olarak kaydırılması sırasında meydana gelir. Bu durumda, her yeni açılış ekranına geçerken ortaya çıkan grafikleri tanıtma uygulaması. Görselleştirme, sürecin mekanik monotonluğunu aydınlatır ve geçişlerin eksiksizliğini vurgular.
Paralaks site konseptini destekler
Açılış sayfasına paralaks etkisinin eklenmesi, bir kaynağın görsel çekiciliğini artırmanın ve onu bir dizi rakip İnternet teklifinden ayırt etmenin bir yoludur. Diğer tarafta, yazılım çözümü sayfa yükleme sürelerini yavaşlatır, kaprisli bir şekilde etkileşime girer mobil platformlar ve sonuç olarak, web sitesi tanıtımına olumsuz yanıt verir. Kim ne derse desin, aramada sıralama, satış sayfasının önemli bir yönüdür.
Yine de aceleci sonuçlara varmayalım, ancak web sitenizde uygulanan tasarım çözümünün konseptine bakalım. Paralaks kendi başına bir son değil, kaynağın üslup ana hatlarına organik olarak uyması gereken bir eklemedir. Yalnızca bu ilke tarafından yönlendirilirseniz, açılış sayfasında paralaks gerekip gerekmediğini veya uygulanmasının ziyaretçileri rahatsız edip etmeyeceğini, yapının dengesini bozup bozmayacağına ve tüm resmin genel algısını bozup bozmayacağına karar verebilirsiniz.
HTML5'in (World Wide Web'de içerik yapılandırmak ve sunmak için yeni bir standart) ve CSS3'ün (nesnelerin görünümünü açıklamak için geliştirilmiş bir dil sürümü) ortaya çıkması ve yaygın olarak kullanılmasıyla, daha ilginç ve akılda kalıcı tasarımlar oluşturmak mümkün hale geldi. istisnasız herkes için öğeler, elbette dahil olmak üzere İnternet sayfaları ve açılış sayfaları.
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, paralaks kaydırma etkisinin 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. "
Sony'den paralaks kaydırma: Böyle bir şey görmediniz!
Muhtemelen dünyadaki hiç kimse ürünlerini Sony'nin yaptığı gibi nasıl sunacağını bilmiyor. Sunulan 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ın ve mühendislerin işbirliği her zaman bir deneydir, ancak yalnızca bu durumda yarın ileriye doğru bir adım atacağınızı umabilirsiniz."
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ı lüks görünüyor ve her türlü etkileşimli öğe ve animasyonlu çizimlerle dolu.
Büyük resim ağırlığı, geliştiriciler için en büyük sorun olarak ortaya çıktı
Newcastle acentesi Shout Digital tarafından lüks bir kaçamak ve balayı şirketi olan seyahat acentesi Exsus için tasarlanan bu çarpıcı mikrosite, bu konunun bir başka harika örneğidir. Retro tarzı animasyonları anında dikkatinizi çeker ve jeneriğin sonuna kadar asla bırakmaz.
Sizi Kaliforniya sahilindeki tüm ünlü yerlere götüren 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.
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 formata yenilikçi bir tane 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ı, bir kuruluşun ofislerinin nerede bulunacağını açıklayan erişilebilir ve ilginç bir biçimde inanılmaz bir iniş yarattılar. , ve daha fazlası. Ayrıca bankaların yatırımlarınızdan elde edeceği karı hesaplayacak bir hesap makinesi bulunmaktadır.
Açılış sayfası size mevcut tüm bisiklet türlerini gösterecektir.
Çinli bilgeler, "Sen ne yersen osun" derler. Tasarımcılar ve büyük bisiklet severler Romain Bourdieux ve Thomas Pomarelle için bu ünlü bilgelik kulağa "Sürdüğünüz şeysiniz" gibi geliyor. Ortaklaşa yazılan web siteleri, yalnızca modaya uygun paralaks kaydırma efektiyle değil, aynı zamanda harika bir mizah anlayışı ve birinci sınıf illüstrasyonlarla sizi şaşırtacak.
Geliştiriciler, öyle görünüyor ki, tek bir bisiklet türünü kaçırmadılar ve her ziyaretçinin bir tane satın almaya ve milyonlarca dolarlık alt kültüre katılmaya istekli olacağı şekilde onlara öğretmeye çalıştılar.
Evde rahat koltuğunuzda otururken arabayı deneyebilirsiniz.
Bu site sayesinde Lexus serisinden yeni bir modeli evinizden çıkmadan deneyebilirsiniz. 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, arabanın ve işlevsel özelliklerinin görsel bir görüntüsüdür. İkincisi, bu, hiçbir modern projenin onsuz yapamayacağı etkileşimli bir andır: Bizim durumumuzda, kullanıcıların otomobilin iç ve gövdesinin rengini seçmelerine izin veriyoruz. Videoyu 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."
Ayakkabılarımda Yaşam (İngilizce'den - başka birinin gözünden), ana hedefi HIV pozitif 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.
Ü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, mükemmel çizimler ve etkileyici animasyonlar eşliğinde şiir okuyan 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ı.
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.
İ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."
Bu kaynağın ana özelliği, sayfalarının her birinin kendi kaydırma mekanizmasına sahip olmasıdır. Her biri! Bu, paralaks kaydırma fikrinin uygulanmasına yönelik çok eğlenceli ve çok başarılı bir yaklaşımdır, bu da bu teknolojinin ustaca bilgi sunum biçimleri icat etmenize izin verdiğini kanıtlamaktadır.
Burada paralaks kaydırma, arsa için olduğu kadar eğlence için de çalışmıyor.
Bu çevrimiçi bilgi grafiği, paralaks kaydırmayı yalnızca bilgileri daha verimli sunmak için değil, aynı zamanda canlandırmak ve belirli bir hikayeye sığdırmak için kullanan Frank Chimero tarafından geliştirilmiştir. akrobasi!
Temiz su eksikliğinin küresel sorunu hakkında bilgi edinin!
Animasyon stüdyosu Nice & Ciddi, gezegenin temiz su eksikliği konusunda halkı bilinçlendirmek için paralaks kaydırma kullanarak bu açılış sayfasını tasarladı. Suyu nereye harcıyoruz? Nereden kurtarabiliriz? Nasıl yapılır? Bu problemle ilgili her şeyi öğreneceksiniz. Her son damla.
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.
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.
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 olayla ilgili güzel bir suluboya paralaks web sitesi de evinize neşeli bir ruh hali getirebilir.
Moda markası Von Dutch, kurucusunun inanılmaz hayat hikayesini web sitesinin sayfalarından anlatıyor. Kuşkusuz trend olmak için yeni çıkmış paralaks kaydırma efekti 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.
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.
Yeni teknolojilerin yeni bir şekilde sunulması gerekiyor, değil mi?
Otomobil devi Peugeot (Peugeot) tarafından görevlendirilen çevrimiçi çizgi roman, şirketin aynı anda iki görevi yerine getirmesine izin veriyor: ilk olarak, Peugeot Hybrid4'ün yeni mekanizmasını hedef kitlenin dikkatine oldukça etkili bir şekilde sunuyor ve ikincisi çalışıyor. Hem ürünün hem de şirketin imajı üzerine: Formatları cesurca deneyen ve özgünlüğünü unutmayan Peugeot'ya katılmak artık daha da prestijli hale gelecek.
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 sitenin ana sayfasında bu daireler paralaks etkisi yardımıyla oynanmaktadır. Daireler farklı hızlarda hareket eder ve bu da derinlik ve hacim ekler. Sonuç, özlü, ancak çok geniş ve şık bir ifadedir.
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, hafif bir paralaks etkisine sahiptir, ancak kurgu ile yürütülür. Sayfayı aşağı kaydırırken, farklı animasyonlardan oluşan bir zincir başlatırsınız: soldan sağa giden bir bisiklet veya köpekbalığını kovalayan bir 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.
Yaratıcı ajans Shape, açılış sayfasında oldukça özlü bir biçimde, faaliyetlerinin ana aşamaları hakkında konuşuyor. Animasyonlar netlik katar ve paralaks kaydırma ile birlikte hepsinin güzel bir görsel etkisi vardır.
Tanınmış bir Japon şirketi, Mario Kart oyunlarının yeni serisini hedef kitleye tanıtmak için, paralaks kaydırma efektini kullanarak oyunu dünya çapında kısa bir yolculuk 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.
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ştirme, paralaks efektiyle birleştiğinde, bir 3D efekti ve yakında monitörden su sıçraması hissi yaratır.
Paralaks 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.
Ü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 paralaks efekti, etkileşimli videolar, röportajlar ve benzersiz fotoğrafların kullanılması 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.
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ından başka bir şey değil. 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.
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.
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, 3 kez Olimpiyat ve 2 kez Dünya Bisiklet Şampiyonu Jason Kenny için bu harika açılış sayfasını tasarladı. Ajansın kurucu ortağı Ben Steers şunları söylüyor: "Referans şartlarına dayanarak, dikey kaydırma ve paralaks etkisi olan tek sayfalık bir site oluşturmaya karar verdik."
Gezinme çubuğu, sayfanın istediğiniz alanına hızlı ve kolay bir şekilde gitmenizi sağlar.
Animasyonları ve ses efektlerini tetiklemek için kaydırma çubuğunun konumunu kullanan, giderek artan sayıda açılış sayfası arasında, Fransız ajansı La Moulade'nin oluşturulması, sayfadaki konumunuzu oldukça sıra dışı bir şekilde göstermesiyle öne çıkıyor. En üste yerleştirilir ve sitenin herhangi bir bölümüne de erişmenizi sağlar.
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. “Planımız, dizinin hayranlarının takdir edeceği ve üzerinde çalışacağı The Walking Dead dünyasına uygun bir web sitesi oluşturmaktı. Hedeflerimize ulaşmak için HTML5, CSS3, JavaScript/jQuery, Web Audio/HTML5 Audio ve tabii ki paralaks kaydırma gibi yeni geliştirmeleri kullanmamız gerekiyordu. En büyük zorluk, tüm bu teknolojilerin birlikte çalışmasını ve her türlü platformda kullanılabilir olmasını sağlamaktı."
Bu, çevrimiçi gazeteciliğin geleceği olabilir mi?
İnsanların gazete ve dergi okumakla yüklenmediği bir çağda, pek çok gazeteci izleyicinin dikkatini basılı söze nasıl çekeceğini merak ediyor? Krizin üstesinden gelmek için seçeneklerden biri, dergi makalelerinin ve hikayelerinin yeni bir sunum biçimini geliştiren Amerikan gazetesi The New York Times tarafından önerildi - web tasarımı alanındaki en son gelişmeler kullanılarak oluşturulan tek sayfalık bir site ve Atilla Futaki'nin çizimleriyle süslenmiştir.
Sayfayı kaydırmaya başladığınızda, çizimler hareket edecek ve sizi açıklanan eylemin içine çekecektir.
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 infografik de tam olarak bu sorunu gözler önüne seriyor ancak paralaks kaydırma etkisi ile dikkatleri üzerine ç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 en büyük tazminat ödemelerinin neler olduğunu sizinle paylaşacak. 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 burada kilit unsur olduğundan, biz esas olarak “skrollr” animasyon kitaplıklarını kullandık. Her elemanı elle çizdik ve CSS3 desteği ile son rötuşları ekledik."
Sonsuz kaydırma ve paralaks efektinin mükemmel oyunu
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 ilginizi çeken alana hızlı bir şekilde geçmenizi sağlayacak ve eğer sonuna kadar kaydırırsanız sitede, kaydırma çubuğunun otomatik olarak yukarı çıktığını fark edeceksiniz ve siteyi en baştan kaydırmaya devam edeceksiniz.
Bu açılış sayfasını oluşturmak için geliştiriciler, ziyaretçilerin sayfadaki olayları "kaydırabildiği" skrollr.js eklentisini kullandı. Bu, yüksek modelleme hızına izin vererek geçişleri yumuşatmak ve güçlü bir kullanıcı arayüzü oluşturmak için daha fazla zaman sağlar. Animasyonlar oluşturmak için CSS 3D teknolojisi kullanılmıştır.
Çö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.