Denemek için 4 Modern Arkaplan Hileler
Görünüşe göre, bir tasarımın bir parçası olarak, arka planlar gölgelerde yaşar; Ancak, bu tamamen doğru değil. CSS'nin dünya fetihine doğru ilk adımlarını atmaya başladığı zamanlarda, arka plan zaten web sitesinin ana dekoratif unsurunun rolünü üstlenmişti.
Günümüzde durum büyük ölçüde değişmedi. Çoğu durumda, genel temaya önemli bir katkı sağlayan birincil görsel itici güç olarak hizmet eder.
Geleneksel olarak, fotoğraflar ve videolar bir zemin için ilk tercihtir. Gerçek şu ki, onlar sadece aşırı kalabalık kahraman bölümleri: diğer her web sitesi, görüntü tabanlı veya film tabanlı zemin ile çevrimiçi izleyicileri selamlıyor. Ve bu da Web'i (ve özellikle arayüzünüzü) oldukça benzer şekilde kullanıcı deneyimi ile sonuçlanan bir hale getirir.
Tek yolu, yepyeni teknikleri kullanarak ve CSS3, HTML5 ve JavaScript ile oynayarak yeni çözümler bulmaktır. Aslında, bu seçenekler için fark edilebilir bir eğilim var. Günümüzde güneşin yerini kazanmak için yarışmaya katılan en az dört farklı modern dinamik geçmiş var.
Onlara bakalım:
Parçacık Animasyonu
Parçacık animasyon şu anda en popüler seçimlerden biridir. Web sitelerinin yükleri bu zarif kozmosdan ilham alan çözümü başarıyla kabul etti. Düz düz renk tuval, illüstrasyon, vektör çizimleri ve hatta fotoğraflarla birlikte iyi çalışır.
Ayrıca, animasyon değişir. Yıldızlı gökyüzünü ya da yıldız yağmurunu taklit etmek için tüm sayfa boyunca dağılmış, ya da ince çizgilerle daireler bağlayabileceğiniz takımyıldızı temalı bir çözüm olan düzensiz bir şekilde hareket eden noktalardan oluşan bir demet olabilir. Ve hepsi bu değil; bazen fare vurgulu olayları tarafından tetiklenen etkilerle eşleştirilir: bu durumda, parçacıkları uzaklaştırabilir, onlardan swirls oluşturabilir, imleci iz olarak ekleyebilirsiniz, vb.
Huub tipik parçacık animasyonunun bir örneğidir. Karanlık bir renklendirmeyle ve arkasına yerleştirilmiş bir haritayla mükemmel bir şekilde uyum sağlayan düzgün hareket eden bir dizi kümeye sahiptir. Biraz eğlenmek için fare imlecini kullan.
İpucu: Eğer Huub'un dinamik başlık arka planına sahip olmak istiyorsanız, o zaman Dominic Kolbe tarafından yaratılan projeye bir göz atmalısınız. fare paralaksı demosu . Neredeyse aynı görünüyor. Ama hemen bir çözüme ihtiyaç duyarsanız, o zaman Vincent Garreau tarafından hazırlanan JavaScript kütüphanesi Particles.js aradığın şey.
Parçacıkların dalgaları
Önceki örnekte ise, HTML5 ve CSS3 ile akıllı manipülasyonlar ve JavaScript sihirlerinin bir tutamı ile etki elde edilebilirken, bu bir Three.js kütüphanesi ile ustaca bir deneydir. Kemerli formları ve yumuşak dalgalanma benzeri hareketleriyle, küçük gelgitlerden birini kolayca hatırlatır. Solunum tuvali hissi yaratır. Fare imlecini farklı yönlerde döndürerek, hem yatay hem de dikey olarak keşfedebilirsiniz.
StuurMen basit, rafine edilmiş "hoş geldiniz" bölümüne sahiptir. Minimal, temiz ve zarif. İçerik, göze çarpmayan bir şekilde görüş alanına girerken, titreşimli arka plan proje için doğru bir ruh hali yaratır.
İpucu: Burada bulabilirsiniz ThreeJS tarafından özgün bir senaryo ve Deathfang'ın başarılı bir şekilde uyarlaması üç.js tuvali - parçacıklar - dalgalar .
Fare vurgulu paralaks
Katmanlı paralaks bir başka büyüyen eğilimdir. Parçacık animasyonu ile birlikte, donuk bir statik arka planı ince bir 3D hissi olan bir kompozisyona dönüştürebilir. En önemli şey, favori görüntü seçiminizi atlatmak zorunda kalmamanızdır, sadece biraz paraşüt kullanmak için paralaks kullanın.
Başlığı, logoyu, gerçeküstü sahneyi veya çizimi canlandırmak istediğinizde oldukça faydalıdır. Çeşitli soyut animasyonlar için de uygundur. Standart fare hover olayı tarafından tetiklenen, sadece başka bir boyut eklemek değil, aynı zamanda kullanıcıların çevre ile oynamak için izin verir.
Kişisel portföy Alexandre Rochet olağanüstü bir sıçrama sayfasına sahip. Bu davranış sadece göze çarpmakla kalmaz, aynı zamanda fare vurgulu paralaks da harfleri değiştirir.
İpucu: Paralaks oluşturmak için çok sayıda kütüphane ve uygulanabilir kod parçacıkları vardır. En popülerlerden biri Matthew Wagerfield tarafından oluşturulan bir eklentidir. Parallax.js . Ancak, pratikte görmeniz gerekiyorsa, özellikle tipografiye uygulanmışsa, o zaman Frontnerd'ın kalemini kullanarak bir kalemle çalışabilirsiniz. Fare üzerinde 3D paralaks .
WebGL deneyleri
WebGL deneyleri, elbette, sofistike sertleştirilmiş geliştiriciler ve cömert bir bütçeye sahip müşteriler için bir çeşittir. Parlak, huşu uyandıran ve biraz tuhaf olabilirler. Her kuruşuna değer. Bununla birlikte, merhemde her zaman bir sinek vardır. Büyük güçle büyük sorumluluk gelir ve WebGL ile, tükettiği kaynak miktarını ve tam tarayıcı uyumluluğunu asla unutmamalısınız.
Solarin Unutulmaz ve akıl almaz bir kullanıcı deneyimi ile ilgili. Çok sayıda heyecan verici ve yenilikçi özellikten dolayı zengin bir 3D WebGL denemesidir. Üstbilgi arka planı, fare imlecine karşılık veren ve muazzam bir izlenim yaratan büyük bir fütüristik küredir.
İpucu: MediaMonks'taki dehaları yapan şeyleri taklit etmek karmaşık olsa da, Web'de her zaman size düşünce için yiyecek verecek bir başlangıç noktası bulabilirsiniz. Yi hesaba kat WebGL API'sı ve Yoichi Kobayashi'den gelen ve bu proje için bir proje geliştiren “Sarmal küre” .
Sonuç
Görüntülerin ve videoların kullanımı, arka planı güzelleştirmek için zamanla kanıtlanmış ve daha az acı verici bir yol olmasına rağmen, istenen sonucu elde edebilecek başka umut verici ve deneysel seçenekler de vardır. Banallıklardan uzak durmak zordur ve hatta para gerektirir, ancak bu tedbirler haklı ve oldukça mantıklıdır.
Basit ama zarif bir parçacık animasyonu ya da dikkat çekici bir WebGL denemesi olsun, yeni bir yaşamı arayüzün ana detayına enjekte ederek, web sitenize bir başlangıç başlatın.