Web Tasarımında İtici Etkiyi Gösteren 8 Parçacık

Tuval ile yapılan deneyler, bu günlerde kasabanın konuşması. Sadece popüler web geliştirici oyun alanlarındaki konseptler olarak değil, aynı zamanda gerçek hayattaki projeler için çözümler olarak da görülebilirler. Çeşitlilik kuşkusuz şaşırtıcı: Popüler eklentilere dayalı ilkel parçacık animasyonlarından, modern ve kendini kanıtlamış araçların bir karışımı olan türünün tek örneği fikirlere kadar.

Bugün dikkatinizi itici etkiye çekiyoruz. İtici bir davranışı olsa da kesinlikle çekici bir doğası vardır. Kullanıcıları çeşitli yönlere iterek veya bazı durumlarda her şeyi havaya uçurarak sahnenin ayrıntılarıyla oynamaya teşvik etmek, anında ana eğlence haline gelir. Kullanıcı deneyimini keyifli ve heyecanlı hale getirir.

Eşsiz trendi kendiniz görebilmeniz için kod parçacıkları içeren ilham verici demolardan oluşan bir koleksiyonu keşfedelim.

İtici Hatlar

İlk bakışta, bu demo bir dizi gitar telini andırıyor. İmlecinizi üzerlerine getirin ve sihri göreceksiniz. Çizgiler bükülmeye ve deforme olmaya başlar, küçük bir küre oluşturur.

Sağdaki seçenekler paneli, efekti kontrol etmenizi sağlar. Fare aralığının yarıçapını ayarlayabilir, satır sayısını ekleyebilir veya azaltabilir veya dizeler arasındaki mesafeyi değiştirebilirsiniz. Fiziği not edin. İyi düşünülmüş ve özenle yeniden üretilmiştir.

Daniel Velasquez'in Kalem Kovucu Çizgilerine Bakın

30.000 Parçacık

İtici etki, çizgiler yerine binlerce noktaya uygulandığında tek kelimeyle harika görünüyor. Justin Windle bunu pratikte kanıtlıyor. CodePen'deki ikonik ve çılgınca popüler projesi, 30.000 küçük parçacığın rahatça oturduğu bir panele sahiptir.

Yoğun bir yüzey oluşturmak için birbirine sıkıca sarılırlar. Fare imlecini üzerine getirin ve noktaların sizden nasıl uzaklaştığını göreceksiniz. Görünümden kaybolmasalar da, fare menzili tarafından geri tutulurlar. Bu nedenle, noktaların kenarlığı oluşturduğu nispeten büyük, içi boş bir daire görebilirsiniz.

Justin Windle'ın kaleminden 30.000 Parçacık'ı görün

Etkileşimli Parçacıklar

Basit dikdörtgen çerçeve yaratıcılığınıza ilham vermiyorsa, Tamino Martinius'un Etkileşimli Parçacıklar projesinde yaptığı gibi tüm bu noktaları her zaman karakterlerde toplayabilirsiniz.

Demosu, her harfin yüzlerce noktadan oluşturulduğu bir kelime içeriyor. Bir şeyleri renklendirmek için fare imlecinizle onları havaya uçurun. Deneyin parametrelerini değiştirebileceğiniz ve tercihlerinize göre ayarlayabileceğiniz küçük bir kontrol merkezi var.

Tamino Martinius'un Kalem Etkileşimli Parçacık Logosuna Bakın

Parçacıklara Metin

Louis Hoebregts'in Metinden Parçacıklara projesinde yaptığı gibi, önceki iki kavramı bazı canlı bükülmelerle zenginleştirmek için renk ve boyutla oynayalım.

Tamino Martinius'un çözümünün aksine, burada noktalar farklı renklerin yanı sıra farklı yarıçaplara da sahiptir. Ayrıca, girişi kullanarak metni ayarlayarak değiştirebilirsiniz. Fare imleci, kalabalığı dağıtan ve oyun alanında küçük bir rahatsızlığa yol açan yumuşak ve nazik bir davranışa sahiptir. Bu gerçekten göze hoş gelen bir demo.

Louis Hoebregts'in Kalem Metnini Parçacıklara Bakın

Toplar ve Yerçekimi

İtici etki, olağanüstü sonuçlar elde etmek için diğer fizik tabanlı çözümlerle kolayca birleştirilebilir. Topları ve Yerçekimini düşünün.

Projenin adı her şeyi söylüyor. Yerçekimi ve itici etki, konseptin kalbinde yer alır ve deneyimi merak uyandırır.

Önceki örneklerden farklı olarak, burada daireyi tutmanız ve diğer daireleri uzaklaştırmak için bir araç olarak kullanmanız gerekiyor. Bu renkli yassı toplara neredeyse vurarak onları hareket etmeye zorlayabilirsiniz. Ek olarak, deneyimi daha da heyecanlı kılan yerçekimi ile savaşmanız gerekiyor.

Marco Dell'Anna'nın kalem topları ve AĞIRLIĞINI görün

Cazibe merkezi

Marco Dell'Anna'nın bu projesi de yerçekimi etrafında inşa edilmiştir. Fare imlecinizle kontrol edebilirsiniz. Parçacıkları taşımak ve konumlarını yeniden düzenlemek için kullanın.

Parçacıkların konumlarını değiştirecek olsalar bile, yine de daireye geri dönmek için çabalayacaklarına dikkat edin. Yani burada, bir mıknatıs rolü oynayan bir fare imleci ve aynı zamanda (en azından geçici olarak) noktaları uzaklaştırmak için bir araç görebilirsiniz.

Kalem Çekicisini Gör – MatterJS, Marco Dell'Anna

etkinleştir

Activate, Gerard Ferrandez tarafından yaratılmış olağanüstü bir kalemdir. Önceki örnekte olduğu gibi, yazar da yerçekimi lehine karar verdi. Bu sefer akıcı davranış ve tabii ki itici etki ile birleşiyor. Sonuç olarak proje, eğlenceli görünümü ve oyuncu doğasıyla bizi kendine çekiyor.

Gerard Ferrandez tarafından kalemin etkinleştirilmesine bakın

Moar Plazma

İtici etki, parçacık animasyonlarına da çok yardımcı olabilir. Onları daha da heyecanlı hale getirebilirsiniz. Moar Plazma'ya bir göz atın.

Burada, fare imlecinin tüm parçacıkları farklı taraflara iterek korkutup kaçırdığı kaotik bir animasyon görebilirsiniz. Sadece demonun tadını çıkarmakla kalmaz, aynı zamanda onunla etkileşime de girebilirsiniz.

John Chin-Jew tarafından kalem Moar Plazma bakın

Karlı Parçacıklar

Karlı Parçacıklar, geleneksel parçacık animasyonunun hız kazandığı bir başka mükemmel örnektir. Kalemin yazarı Nat, iki numara kullandı.

İlk olarak, fare imleci, sahneyi gerçekten büyülü hissettirecek şekilde basit noktaları kar tanelerine dönüştürme gücüne sahiptir. İkinci olarak, belirgin kar tanelerini görebilmeniz için karlı kütleyi hafifçe dağıtan küçük bir itici etki eklenir. Tek kelimeyle harika.

Nat'ın kaleminden Pen partikülleri.js karını görün

kovucular

İtici efektin fayda sağladığı ve sıkıcı bir sahneyi kolayca savurganlığa dönüştürdüğü bir başka alan da metin efektleridir. Bin noktadan oluşan kelimelerin nasıl olağanüstü göründüğünü zaten gördük. Noktaları çizgilere dönüştürmenin ve itici etkiyle her şeyi renklendirmenin zamanı geldi. Düşünmek Bir nokta olarak kovucular.

Proje, sembollerin izleyicilere yönelik kısa, ince çizgilerden oluştuğu bir kelimeye sahiptir. Bu sayede hacimsel yapısını neredeyse hissedebilirsiniz. Fare imlecinizi alın ve metin boyunca sürükleyin; çizgilerin nasıl dans etmeye başladığını göreceksiniz.

Metnin kendisi biraz keskin ve keskin görünse de davranışları pürüzsüz ve göze hoş geliyor. Ayrıca, çizgiler de kendi kendine hareket ediyor, bu yüzden kompozisyonun bazı kısımlarını sallayan hafif bir esinti varmış gibi geliyor. Sonuç olarak, basit metnin gösteriyi yönettiği gerçek bir başyapıtın keyfini çıkarabilirsiniz.

Rein van der Woerd'in kalem kovucularını görün

İtme Yoluyla Çekicilik

İtici etki, kompozisyonun ayrıntılarını uzaklaştırmak için kullanılsa da, yine de tamamen manyetiktir. Gözlerini ondan alamazsın. Oyuncu davranışıyla anında dikkat çekiyor ve kullanıcıları sahneyle etkileşime girmeye teşvik ediyor.

İtici etki, seyirciyi kazanma mücadelesinde yalnız değildir. Benzersiz, dikkat çekici çözümler getiren diğer türdeki animasyonlar ve efektlerle mükemmel bir şekilde işbirliği yapar.