Web Tasarımında Parçacık Animasyonunun 10 Güzel Örneği

Web'i kasıp kavuran parçacık animasyonları, birkaç yıl önce kendilerine oldukça büyük bir yer açmayı başardı. Yüksek teknoloji ürünü bir havaya ve geometrik dekora sahip tasarımlara yönelik büyük akım takıntısı, onları günümüzün en çok aranan çözümlerinden biri haline getiriyor.

Kural olarak, örneğin JetUp Digital'deki gibi kahraman bölümlerinde parçacık animasyonu görülebilir.

Gördüğünüz gibi, ilk izlenime belirli bir baharat eklemenin zarif bir yolu, aynı zamanda web sitesini kalabalığın arasından incelikle ve göze çarpmayan bir şekilde ayırıyor.

Bu efekti yeniden oluşturmak için ilk adımınız parçacıklar.js olmalıdır.

Oradaki parçacık animasyonlarının çoğunun kalbi ve ruhu olan Vincent Garreau'nun hafif bir eklentisidir. Dahası, orijinal durumunda, web'de en çok kopyalanan çözümlerden biridir – belki de yazarın örneğindeki kadar yüksek yoğunlukta olmasa da.

Genellikle geliştiriciler daha düzenli, mütevazı ve sakin varyantları tercih eder. Örneğin, Romswell Roswell Parian Paucar'ın Tuval Parçacıklarına bakın. Çekici ve dinamik bir estetikle sonuçlanan parçacıkların ve paralaksın bir kombinasyonudur.

Ancak bu, yaklaşımın sadece bu tür bir gerçekleştirme ile sınırlı olduğu anlamına gelmez. Dean Wagman'ın uzaydaki Parçacıklarını, Robin Selmer'in yalnızca CSS parçacık sistemini ve tabii ki, Alex Safayan'ın bir kod biriminde ustaca yeniden üretilen ve sunulan itme efektini düşünün. Robin Selmer'in konsepti, izlemesi keyifli bir parça olsa da; diğer ikisi, kullanıcının etkileşimini gerektirir ve bu her zaman heyecan vericidir.

Etkilemek için Parçacık Animasyonunu Kullanma

Zaman geçtikçe teknik olgunlaştı. Tuvalin her tarafına dağılmış küçük beyaz noktaların kaotik karmaşasından, büyük potansiyele sahip bir araca dönüştü. Olağanüstü bir şey değil, yine de belli bir wow faktörü var. Ayrıca, yüksek teknoloji, geometrik ve iş benzeri estetiğe mükemmel bir şekilde katkıda bulunur - doğal olarak onları tamamlar.

Önerme şudur: parçacık animasyonu etkilemeli. Ve geliştiriciler, kalın ve ince boyunca bu varsayıma bağlı kalırlar ve bundan en iyi şekilde yararlanırlar. Bu çözümün gerçek hayranları tarafından oluşturulan bazı olağanüstü kod parçacıklarını ele alalım.

Justin Windle tarafından 30.000 Parçacık

Burada başlık kendisi için konuşur. Gemide 30.000 parçacıkla görkemli bir şey bekliyorsunuz. Ve Justin Windle kesinlikle beklentilerimizi karşıladı. Onun konsepti inanılmaz. Oyun oynamak için farenizi kullanın. Fizik sadece olağanüstü. Parçacık animasyonunun bu versiyonu, bu kadar anıtsal bir ölçekte olmasa da geliştiriciler arasında oldukça popülerdir.

Suda Balık, Alex Safayan

Alex Safayan hemen hemen aynı çözümü buldu, ancak bu durumda parçacıklar giderek büyüyor. Fare imleci ayrıca ince bir dalgalanma efektiyle bir iz oluşturarak noktaları uzaklaştırır. Animasyonun davranışı, su yüzeyine yakın olduğunda balık hareketini andırıyor. Fiziğe dikkat edin: noktalar arasındaki etkileşim iyi düşünülmüş.

PLANKTON – Parçacık ömrü, Marco Dell'Anna

2017 yılının en yürekli projesi ödülünü alan Plankton, kesinlikle dikkatleri üzerine çekiyor. Proje sadece fikirle değil, aynı zamanda gerçekleştirme ile de büyüleniyor. Buraya bir eldiven gibi uyan ince renklendirmeden inanılmaz derecede doğal görünen muhteşem davranışa kadar, Marco Dell'Anna ayrıntılara dikkat ediyor.

STARDUST, Marco Dell'Anna

Buradaki muhteşem retro vibe, neon dokunuşlar ve muhteşem renklere bayılıyorum. Gözlerini ondan ayırmak çok zor. Stardust, ilham verici bir başyapıtla sonuçlanan bir tasarım ve kodlama simbiyozudur.

Akimitsu Hamamuro'dan Yerçekimi Noktaları

Akimitsu Hamamuro sizi oyun alanına sözde “yerçekimi noktaları” eklemeye davet ediyor. Noktaların kaotik hareketine izinsiz girerler ve onları bir mıknatıs gibi çekerler. Yörünge merkezi rolü yapmasalar da; yine de parçacıkları kendi yönlerinde hareket etmeye zorlayan odak noktaları oluştururlar.

Nate Wiley tarafından Parçacık Küresi CSS

Küreler, bu günlerde kahraman alanları için oldukça popüler stilistik seçimlerdir. Ve Nate Willey'nin bu trendi ele alışı oldukça etkileyici. Küre, küçük parçacıklar sayesinde kırılgan ve aynı zamanda iyi düşünülmüş davranışı sayesinde sağlam görünüyor. Küreyi parçalama ve yeniden şekillendirme rutini harika.

Parçacık Dalgaları, Kevin Rajaram

Kevin Rajarm parçacık animasyonunun güzelliğini ve zarafetini alıp Three.js'nin muhteşemliği ile geliştirerek hassas ama gerçekten sofistike bir konsept ortaya çıkardı. Muhteşem bir dalga manzarası fütüristik, yapay ve büyüleyici hissettiriyor.

alışılmışın dışında Kullanımlar

Parçacık animasyonunu kullanmanın daha da etkileyici yolları var. Alışılmışın dışında bir yoldan gidelim ve alışılmışın dışında düşünelim: Bu yaklaşım, logolar ve harfler gibi unsurlardan kolaylıkla faydalanabilir.

Tamino Martinius'tan Etkileşimli Parçacık Logosu

Etkileşimli Parçacık Logosu bunun tipik bir örneğidir. Yukarıda yer alan Justin Windle'ın pasajının yeniden tasarlanmış bir çözümü gibi görünüyor. 30.000 nokta olmamasına rağmen, “CODEPEN” kelimesini ustalıkla oluşturan etkileyici sayıda parçacıktan oluşur. Bu, kavramın pratik bir kullanım bulduğu durumlardan biridir.

Louis Hoebregts tarafından parçacıklara metin

Önceki çözümün renkli versiyonu, Louis Hoebregts tarafından bu kalemde mevcuttur. Burada metin, önceki örnekte olduğu gibi aynı etkileşimle zenginleştirilmiş binlerce renkli düz daire tarafından şekillendirilir.

Parçacıklar Marco Dell'Anna tarafından metin yazıyor

Bu dramatik bir giriş olmasa da, büyüleyici bir şey var. Pürüzsüz animasyon yavaş yavaş karakterleri ortaya çıkarır ve ilgimizi ateşler. Konsept, “Stranger Things” introsuna benzer bir şekilde gizemli bir yeteneğe sahip.

SADECE YAPIN, Marco Dell'Anna

Bu Marco Dell'Anna'dan başka bir başyapıt. Bu sefer, parçacık animasyonu ünlü bir Nike logosunun şekillendirilmesinde yer alıyor. Belirsiz ve yarı saydamdan net ve sağlam olana kadar, animasyon yavaş yavaş logoyu ortaya çıkarır ve dikkat çekmeden genel dikkati çeker.

enrico toniato tarafından 404 parçacık metni

Parçacık animasyonunun tek pratik kullanımının kahraman bölümlerini zenginleştirmek olduğunu düşünüyorsanız, Enrico Toniato sizi yanıltır. Hata sayfasındaki tutumu harika. Fikrini takip edin ve 404 sayfasını sıkıcı ve itici görünmekten kurtarmak için harekete geçirilen parçacıkları kullanın.

Dikkat Çekici Bir Etki

Parçacık animasyonu, daha küçük olanın daha iyi olduğu durumlardan biridir. Noktalar ne kadar küçük olursa, elde edilebilecek bir etki o kadar etkileyici olur. Bir yandan, geometri ve fizik söz konusu olduğu için karmaşık ve karmaşık görünüyor. Öte yandan, narin şekiller sayesinde kırılgan ve ince görünüyor. Bu benzersiz füzyon, parçacık animasyonunu olağanüstü ve dikkat çekici hale getirir.