Web Tasarımında Blob Tabanlı Hareketli Arka Planlara Saldırı

Hareketli arka planlar, modern web sitelerinin popüler bir özelliğidir. Artık bir trend ya da olağanüstü bir şey değil. Bugünlerde bir kahraman bölgesini süslemenin uygun yollarından sadece biri. Hâlâ tarayıcı uyumluluğuyla ilgili bir sorun olsa da, çözüm kendine bir yer açmayı başardı.

Farklı türde animasyonlar var. Şunlara rastlayabilirsiniz:

• Parçacık animasyonları;
• Kaleydoskopik animasyonlar;
• Soyut 3D animasyonlar;
• Pürüzsüz geometrik animasyonlar ve çok daha fazlası.

Birkaç yıl önce takımyıldızdan ilham alan parçacık animasyonları tüm dünyayı yönetirken, günümüzde blob şeklindeki animasyonlar yaratıcı ekiplerin zihinlerini heyecanlandırıyor. Ne yapabilirsin? Sıvı davranışı karşı konulamaz. Büyük bir düşüşün boşlukta ne kadar düzgün hareket ettiğini gösteren geçiş rutini, çevrimiçi izleyiciyi kolayca kazanır ve web sitenizi lider konuma getirir.

Bu genel teknikten yararlanmak için, size kendi blob şeklindeki animasyonunuzu nasıl oluşturacağınıza dair bir ipucu verecek olağanüstü kod parçacıkları koleksiyonu sunuyoruz. Bunu geleneksel veya yepyeni araçlarla yapabilirsiniz. Şimdi, bir sonraki projeniz için mükemmel eşleşmeyi bulalım.

Uwe Chardon'dan blob animasyonu

Uwe Chardon'ın bu popüler çözümü ele alışı pratik ve ilham verici. Güzel bir turuncu renge ve temiz bir ortama yerleştirilmiş pürüzsüz kenarlara sahip basit, düz bir bloba sahiptir. Sıvı davranışını oldukça iyi taklit etmeyi başardı.

Sonuç, oldukça etkileyici görünen basit bir şekil ve karmaşık davranışın kazanan bir kombinasyonudur.

Uwe Chardon'ın Kalem Blob animasyonu saf CSS'sini görün

Ashton Holgate tarafından Blob

Önceki örnek, düzensiz bir şekle ve nispeten anlamlı biçim değiştirmeye sahip geleneksel bir blob türünü göstermektedir. Bununla birlikte, Ashton Holgate'in bu projesi, neredeyse daire ile sınırlanan ve değişiklikler neredeyse hiç fark edilmeyen daha ilahi bir şekle yapışıyor. Bununla birlikte, aynı zamanda olağanüstü görünüyor.

Dahası, sanatçı metinle oynamış ve balonun alanına çarptığında rengini zıt renge kaydırmaya zorlamıştır.

Ashton Holgate'in Kalem Blob'unu görün

Fabio Ottaviani'den Zıplayan Sıvı Yükleyici

Fabio Ottaviani, blob animasyonlarına özgü aşırı duygusal davranışın eğlenceli doğasını uygulamaya koydu. Balonu küçüktür, ancak sevimli dönüşmesi ve eğlenceli zıplaması ile oldukça etki yaratır.

Kalem projesinin isim plakasında “Loader” yazsa da, arka planın dekoratif bir detayına kolayca dönüştürülebilir. Ve bunu yapmak için bilmeniz gereken tek şey HTML ve CSS, çünkü sanatçı herhangi bir JavaScript büyüsü kullanmaz. Akıllı.

Fabio Ottaviani'nin Kalem Zıplayan Sıvı Yükleyicisine Bakın

Shaw'dan Tuval Blob Testi

Önceki örnekten farklı olarak, bu düşüş tamamen JavaScript tarafından oluşturulmuştur. Bu yüzden heyecan verici bir çözüme dalmaya ve grafiklerle karmaşık bir oyun oynamaya hazır olun. Ayrıca konsept, ilkel görünümü ve genel olarak dingin bir atmosfer yaratan oldukça pürüzsüz ve sakin davranışı ile diğerlerinden farklıdır.

Oldukça evrensel ve tarafsızdır. Böylece sayısız proje için mükemmel bir arka plan animasyonu haline gelebilir.

Shaw'un Kalem Kanvas Blob Testine bakın

Jeffrey tarafından blob

Jeffrey'in bu çözümü, iki eğilimin kazanan bir birleşimidir. Burada, bu günlerde oldukça popüler olan sivilceli bir arka plan ve diğer seçeneklere hakim olan sıvı davranışı bulabilirsiniz.

Kod parçacığı HTML, CSS ve JavaScript ile yapılır. Çeşitli tarayıcılarda ve cihazlarda tutarlı görünüyor. Sanatçı, devasa blob ile etkileşimi gerçek ve yapay olmayan hissettiren temel bir yay algoritması kullanıyor.

Blob, sahnenin yarısını kaplasa da, izleyenleri etkilemediğini unutmayın. Pürüzsüz, sakin davranış, bu göze çarpmayanlığın arkasında duruyor.

Jeffrey'nin Kalem Blob'una bakın

Charlotte Dann tarafından Blob'lar

Düzgün bir izlenim yaratmak için bir damla yeterli değilse, her zaman bir düzine tanesine gidebilirsiniz. Charlotte Dann, dahiyane kod parçacığıyla, genel etkiyi bozmadan ve ziyaretçileri bunaltmadan bunu nasıl yapacağınızı size gösterecek.

Onun kod parçacığı sadece göze hitap ediyor. Birbiriyle etkileşime giren çok sayıda küçük hareketli blob içerir. Her biri küçük bir ışık noktası gibi görünüyor. Birlikte, tüm cephelerde sıcaklık yayan büyük bir damla oluştururlar.

Charlotte Dann'in kalem lekelerini görün

Şimdi düz dünyadan 3 boyutlu dünyaya geçelim.

Georgi Nikoloff tarafından Blob

Georgi Nikoloff'un Blob'u bir örnek. Canlı rengi, yüksek teknoloji ürünü görünümü ve dinamik davranışı ile hemen göze çarpar. Geliştirici, WebGL, GLSL ve gölgelendiricileri kendi avantajına kullanarak ileri teknolojilerden en iyi şekilde yararlanır. Çözüm, tarayıcı uyumluluğuna tabi olsa da ilham verici görünüyor.

Georgi Nikoloff'un kalem bloğuna bakın

Daniel Del Core'un 6. Deneyi

Daniel Del Core, çevrimiçi izleyicilere Simplex gürültüsüyle nasıl oynanacağını ve dikkatli bir şekilde yeniden oluşturulmuş dokularla nasıl çeki düzenleneceğini gösteriyor. Sonuç, şekerden ilham alan, boyaya benzer bir top. Oldukça hızlı hareket etmesine rağmen, o kadar büyüleyici ki, gözlerinizi hemen ondan almak zor.

Daniel Del Core'un Kalem Deneyi #6'ya bakın

Eli Fitch tarafından sahte parçacık blob

Cesur bir kişiliğe ve elastan takıntılı 80'lerden bir pop yıldızının karizmasına sahip olan önceki örneğin aksine, bu, mütevazı tekno geleceğinden bir şey gibi geliyor. Blob, 3D bir görünüm elde etmek için bazı açılardan daha parlak hale gelen küçük parçacıklardan yapılmıştır.

Tahmin edilebileceği gibi, sanatçı bu konsepti ortaya çıkarmak için Three.js büyüsünü ve prosedürel dokuya sahip bazı ustaca çalışmaları kullanıyor.

Eli Fitch'in Kalem #3Aralık sahte parçacık damlasına bakın

Edwin Chen'den CSS Blob Oluşturucu

Edwin Chen'den CSS Blob Generator ile koleksiyonumuzu sonlandıracağız. Başlıkta belirtildiği gibi, bu kalem, bir damla şekli oluşturabileceğiniz küçük bir oyun alanına sahiptir.

Burada her kenarlığa bir yarıçap atayabileceğiniz küçük bir panel bulacaksınız. Statik ve düz olmasına rağmen, sonucu kolayca kopyalayabilir ve JavaScript yardımıyla harekete geçirebilirsiniz.

Edwin Chen'in Kalem CSS Blob Oluşturucusuna bakın

Sakinleştirici Bir Atmosfer için Mükemmel Şekil

Sıvı davranışının pürüzsüz ve sakin doğasının bu günlerde popüler hale gelmesi şaşırtıcı değil. Ormanın içinden akan küçük, büyüleyici bir nehir gibi, sizi cezbeder ve sürekli değişen çevrimiçi dünyada bir huzur adası olarak hizmet eder.

Blob tabanlı animasyonlar, modern projelere fayda sağlamaya yöneliktir. Kesinlikle dikkat çekmelerine rağmen göze batmazlar. İster zarif, ister düz bir gerçekleştirme ya da abartılı 3D için gidin, kolayca sakin bir atmosfer oluşturacaktır.

Deneyimi zenginleştirecek, arka planı süsleyecek ve aynı zamanda içeriğe yer verecek. Bu arka planlar, görsel ve metinsel veriler arasındaki dengeyi korumanıza yardımcı olacaktır.