Daha Zengin Web Deneyimleri Yaratmanın 4 Yolu
Web, basit bir belge deposu olmaktan çok şey geliştirdi ve artık masaüstünde ve mobilde zengin görsel etkileşimlere sahip tarayıcılarımız var.
Web’in bu makalede nereye gittiği hakkında konuşmak istediğim için, ele alacağım özelliklerin birçoğu sınırlı bir desteğe sahip olabilir, bu nedenle caniuse.com desteklendikleri yerleri belirten güçlü bir özellikler listesi ve çizelgeleri vardır.
Sitenizi geliştirebileceğiniz dört yoldan bir dalış yapalım:
1. CSS
CSS, dokümanlarımız için şekillendirme dilidir, bunu yazı tipi boyutunu veya rengini değiştirmek gibi basit terimlerle düşünmeye eğilimliyiz, ancak dönüşümler ve animasyonlar gibi özelliklerle giderek daha güçlü hale geliyor. Ayrıca daha da güçlü hale getirmek için yeni özellikler alıyoruz.
Vektör Maskeleri Photoshop gibi araçlarda kullandıysanız, arkasındaki fikirden haberdar olmalısınız. CSS Klip Yolları. Bu özellik, HTML içeriğinizin saydam ve opak kısımlarını tanımlayan CSS'de bir şekil tanımlamanıza olanak tanır. Bunlar harika CSS Geçişleri UI öğelerini gizlemek ve göstermek için. Benzer şekilde CSS Maskeleri, içeriğinizin saydam kısımlarını bir görüntü kullanarak tanımlamanıza olanak tanıyan Web'e doğru yol alıyor. Bu sayede, görsel ilgi veya dokular için tasarımlarınızda şeffaflığı daha etkin bir şekilde kullanmanıza imkan verir.
2. SVG
Bugün Web’de bulduğumuz görüntülerin çoğu, piksellerden oluşan raster resimlerdir. Bu, onları ölçeklendirdiğimizde veya onları daha yüksek çözünürlüklü cihazlarda görüntülediklerinde pikselli hale geldikleri anlamına gelir.
Vektör grafikleri harikadır, çünkü her kenarda keskin kenarlarını koruyan geometrik temellerden oluşurlar.
SVG, Web için vektör biçimidir. Grafikleri görüntülemek ve hatta CSS ile özelliklerini manipüle etmek ve canlandırmak için kullanabiliriz. SVG'nin gerçekten güçlü olduğu yer, bunu komut dosyasıyla birleştirdiğimiz zamandır. ani SVG içeriğini manipüle etmeyi ve hareketlendirmeyi kolaylaştıran bir JavaScript kütüphanesidir. Modern tarayıcılara odaklanır, bu yüzden gruplar ve klip yolları gibi en yeni SVG özelliklerini destekler. Snap, GitHub'da açık kaynaklıdır ve zengin bir animasyonlu banner reklam oluşturmak için bile kullandık, bunun hakkında daha fazla bilgi edinebilirsiniz. içindebloğum.
Ve işte bir örnek yaptığımız SVG kullanarak.
3. 2D Tuval
2D Canvas, şekil ve görüntülerin çizilmesi için optimize edilmiş Web'in bir başka güçlü özelliğidir. Tuval öğeniz üzerinde granül kontrolü sağlayan bir JavaScript API'sı sağlar. Ayrıca video gibi diğer medya biçimlerini de entegre etme, video çekimlerini yürüten, duraklatan veya ovalayan zengin etkileşimli düğmeler için potansiyel yaratma özgürlüğü sunar. 2D Canvas artık katmanların renklerini görsel olarak ilginç yollarla karıştırmanızı sağlayan karışım modlarını destekliyor. İşte.
Ayrıca, videolarımızı içeriğimize daha sorunsuz şekilde entegre etmemizi sağlayan alfa video desteği almaya da başlıyoruz. Alfa videonun eğlenceli bir örneği OK Go müzik videosu 'WTF' .
OK Go, ayrıntılı müzik videoları için biliniyor ve bu özel videoda yeşil ekran önünde çekim koreografi. Ardından, post processing kullanarak, çekimi saydamlığın olduğu yerde serin bir yankı etkisi yaratarak, baştan sona oluşturmaya devam etti. Bu etkiyi 2D Canvas kullanarak yeniden üretebiliriz, ancak bunu bir adım daha ileriye götürebilir ve gerçek zamanlı olarak yeni görsel efektler oluşturmak için tuval karışımı modları gibi özellikleri kullanarak etkileşimli hale getirebiliriz.
4. WebGL
WebGL, donanım hızlandırılmış 2D ve 3D grafikler çizmek için düşük düzeyli bir API sunar. Buradaki potansiyel, tarayıcınızın içinde çalışan Grand Theft Auto 5 gibi konsol tarzı oyunlardır. Tahmin edebileceğiniz gibi WebGL biraz karmaşıklaşıyor, neyse ki açık kaynaklı kütüphaneler Three.js Başlamak için harika örneklerle mükemmel bir giriş noktası sağlayın.
GitHub Açık kaynak topluluğu için harika bir kaynak haline geldi. Web'de harika işler yapmayı daha kolay hale getiren diğer büyük kitaplıkların yanı sıra, GitHub'da Three.js ve Snap'ı bulabilirsiniz. Çoğu zaman GitHub'da yaptığım deneyleri ve araçları koyarım. kamera spline aracı Three.js için 3B dünyalar arasında uçmak için kamera yolları oluşturuyordum.
Web'in gittikçe daha çeşitli ve güçlü hale geldiğini görebileceğimiz gibi, bir Web geliştiricisi olmak için heyecan verici bir zamandır. Erişebildiğimiz teknolojilerin ve kaynakların çeşitliliği sürekli olarak büyümektedir ve insanların onlarla yarattığı zengin deneyimleri görmek eğlencelidir.