Keşke Yapmış Olsaydınız 30 Tek Sayfa Sitesi
Web kullanıcıları çok fazla bilgi ile bombardımana tutulduğunda, web tasarımcıları sürekli içerik sunmak için yeni yollar araştırıyorlar. Tek sayfalık web siteleri, kullanıcılara aynı anda etkili ve güzel olan hızlı, temiz ve basit bir deneyim sunmak için dünyadaki en büyük markalardan bazılarıyla yaygın olarak benimsenmektedir.
Geçtiğimiz birkaç yılda, şık sayfalar ve efektlerle çarpıcı web siteleri oluşturmayı kolaylaştıran HTML5 ve jQuery'nin kullanıma sunulmasıyla tek sayfalık web sitelerine yönelik eğilimi gördük.
Aşağıda, minimalist tasarım ve basit navigasyondan paralaks kaydırmaya kadar her şeyi kapsayan 30 çarpıcı tek sayfalık HTML5 web sitesi bulunmaktadır. Yeni tek sayfalık HTML5 web siteniz için ilham arıyorsanız, aşağıdaki listeye göz atın:
1. Trionn Tasarım
Birkaç ödül kazanan Trionn Design'ın tek sayfalık HTML5 web sitesi, kullanıcıların siteyi gezebilmelerini kolaylaştırmak için paralaks kaydırmayı kullanıyor. Bu duyarlı tasarım, kullanıcıları meşgul etmek için çekici görüntüler kullanır ve aynı zamanda bazı harika CSS efektlerini de içerir.
2. Oakley Airbrake MX
Oakley, yeni Airbrake MX gözlüklerini benzersiz bir şekilde sergilemek için paralaks kaydırma ve harika fotoğrafçılığı birleştiren bu eğlenceli ve göz alıcı yeri yarattı.
3. Sağlığınız için kaydırın
Bu site sadece çarpıcı olmakla kalmaz, aynı zamanda ziyaretçilerin daha fazla meyve yemelerini teşvik etmek için '5 günlük' hakkında da yararlı bilgiler sağlar. Site, parlak, neredeyse video benzeri bir his için zekice paralaks kaydırma kullanmaktadır.
4. Laura Baffari
Grafik tasarımcı Laura Baffari, akıllı telefonlar ve tabletler için yatay kaydırma ve dokunma kaydırması kullanan çarpıcı bir etkileşimli portföy oluşturdu. Siteye girerken, herhangi bir yönde kaydırılabilen çalışmalarını gösteren fayans görürsünüz.
5. Pati ve Felipe
Buradaki tüm romantikler için. Bu, bir düğüne katılımınızı onaylamanın en eşsiz yolu olmalı. Birkaç yıl önce tanışmış bir çiftin güzel bir hikayesi olan bu site, bazı harika animasyonlar ve yaratıcı tipografi ile paralaks kaydırma işlemini kullanıyor.
6. Ian James Cox
Size ilham veren bir başka portföy, serbest dijital tasarımcı Ian James Cox, “Duffy Bold” yazı tipini ve popüler Scroll Path jQuery eklentisini temel alan bir tek sayfalık web sitesi yaratıcı bir etki yarattı.
7. Air Jordan 2012
Ayakkabı uzmanları Nike, Air Jordan 2012 için büyüleyici bir web sitesi hazırladı. Ayakkabıların etrafında inşa edilen site, eğitmenlerin ve montajı yapılan malzemelerin yaratılmasıyla ziyaretçilere paralaks kaydırmayı kullanıyor.
8. Pizza Fırınım
Pizza fanatik Renato, pizza partisi işi için bu çekici siteyi yarattı. Bu site sizi sadece acıktırmakla kalmaz, aynı zamanda sayfa boyunca grafik elemanların kullanımı hoş bir dokunuş katar.
9. Marty.com
Twitter Tasarım Müdürü Martin Ringlein tarafından yaratılan bu tek sayfa tasarımı gerçekten eşsiz. Sunum slayt gösterilerini harekete geçirmek için en alttaki okları kullanın ve 1999'dan bu yana Martin'in neler yaptığını görün. Orijinal bir navigasyon için ilham arıyorsanız, bu siteyi kontrol edin!
10. Akıllı Phood
Akıllı Phood, insanların nasıl yediği hakkında bir araştırma projesidir. Bu renkli HTML5 one-pager'ın 'wow' faktörü veren benzersiz bir kaydırma vardır.
11. numéro10
Bu tek sayfalık web sitesini oluşturmaya ne kadar uğraştığını hayal bile edemiyorum. Paralaks kaydırmayı ve başka hiçbir sitede görmeniz mümkün olmayan inanılmaz geçişleri ve grafik öğelerini kullanır. Sadece nefes kesici!
12. Saucony Kinvara 3
Bir araya gelen ayakkabının tam yolculuğunu sunmak için paralaks kaydırma ve inanılmaz geçişler ve efektler kullanarak mükemmel bir interaktif deneyim.
13. Pi'nin Epik Yolculuğu
Bu tek çağrı cihazı filmin kendisi kadar destansı. Filmin en büyük anlarından bazılarının arkasındaki görüntüleri arkasına alan çarpıcı bir HTML5 paralaks kaydırma sitesi.
14. Yeni Skoda Octavia
Yeni Skoda Octavia'nın özel HTML5 web sitesi, ziyaretçileri sürükleyici bir animasyon deneyimi ile keşfetmeye davet ediyor. Bu çarpıcı tek çağrı cihazı paralaks kaydırmayı ve ilgi çekici bir deneyim yaratan benzersiz bir navigasyon türünü kullanıyor.
15. Her Son Damla
İngiltere'de her gün ortalama insanın ne kadar su tükettiğini derinlemesine inceleyen bilgilendirici bir web sitesi. Site önemli bir konuda konuşmayı kıvılcımlamak için grafik öğeleri ve geçişler kullanmaktadır.
16. Reverend Tehlike
Minecraft'a benzer şekilde, Reverend Danger, ziyaretçiler için eğlenceli bir deneyim yaratmak için bir dizi animasyon ve CSS tekniği kullanıyor. Bu tek çağrı cihazı, ziyaretçilerin görüntüleri “saygıdan tehlikeye” çevirebilecekleri ilginç bir kaydırıcıyı bir araya getirir.
17. Festa Italiana
Festa Italiana, aşağıya doğru ilerlerken hareket eden parlak renkler ve grafik öğeleri kullanan başka bir eğlenceli web sitesidir.
18. Etkinleştir
Susuzluğunuzu bu web sitesinde Activate ile söndürün. Siteyi aşağı kaydırırken tıklanabilir yüzer şişelerle sunulur. Site genelinde bazı mükemmel geçişler ve etkileri vardır.
19. D'Angelico Gitarları
D'Angelico gitarları birçok kişi tarafından benimsendi ve 70'lere kadar popüler kaldı. Şimdi, efsane, yolculuk boyunca sizi almak için ses ve paralaks kaydırmadan harika bir şekilde yararlanan çarpıcı bir HTML5 tek çağrı cihazı ile yeniden doğuyor.
20. İş Sahibinin Durumu 2013
Geleneksel infografik popüler kavramını benzersiz bir şekilde ele alan bu HTML5 tek sayfalık site, 2013 yılında küçük ve orta ölçekli iş başarısı için kritik faktörleri ortaya koyan bir rapordan istatistikleri sunar. İstatistikleri gösteren geçişleri ve efektleri görmek için aşağı kaydırın.
21. Marco Rosella
SVG tarafından desteklenen bir zumlanabilir kullanıcı arayüzü ile HTML5'te harika bir tek sayfalık portföy sitesi.
22. Jules Bassoleil
Jules Bassoleil'in tek sayfalık portföyü, size atlayan grafiklerle inanılmaz derecede mantıklı ve etkili bir navigasyona sahip.
23. Sergio Pedercini
İtalyan web tasarımcısı Sergio Pedercini, portföyünü sergilemek için zarif bir site oluşturdu. Parlak renkler ve zıplayan navigasyon onu çekici ve kullanımı kolay hale getirir.
24. VonDutch
Moda etiketi Von Dutch'ın paralaks kaydırma kullanımı, hikayesine bir hareket duygusu katıyor. Sayfada ilerlerken ve bir sıvı deneyimi sağladığınızda simgeler ve görüntüler bir yere ve dışarı taşınır.
25. CoolApps
Harika bir kayan efekt sağlamak için animasyonu kullanan basit ama çekici bir HTML5 tek çağrı cihazı.
26. Pixelmess
Yatay kaydırma, yaratıcı ajans web sitelerinde oldukça yaygındır ve Pixelmess'in sitesi, özellikle iyi çalışan bir örnektir. Retro yazı tipleri ve resimlerin kombinasyonu, daha ilgi çekici olan eski bir okul video oyunu oynamanızı sağlıyor.
27. Renault Zoe
Renault ziyaretçiler için etkileşimli ve şaşırtıcı bir deneyim yaratmak için paralaks kaydırma, ses ve video kombinasyonunu kullanır.
28. Memur Lei
Bu son zamanlarda gördüğüm en iyi ürün sunum sitelerinden biridir. Özellikle kadınlar için tasarlanmış döner sandalyeler sunmak için paralaks kaydırma site kullanımı.
29. All-N-1 Güzellik Evi
Bu duyarlı HTML5 tek çağrı cihazı, daha etkileşimli hale getirmek için çeşitli etkileşimli öğeleri ve animasyonları içeren bir akış düzenine sahiptir.
30. Kinderfotografie Evi Hermans
Çocuk fotoğrafçısı Evi Hermans bu eğlenceli ve eğlenceli tek sayfalık bir web sitesini yarattı. Sadece fotoğraflar güzel değil, aynı zamanda bu güzel site animasyonlar kullanılarak daha da interaktif hale getiriliyor.
Bu siteleri inşa etmeyi ister misin? Daha iyisini yaptın mı? Yorumlarda bize bildirin.