Tamamen CSS ve SVG ile Oluşturulmuş 12 Manzara Sahnesi

SVG'lerle oldukça çılgın şeyler yapabilirsiniz. Geliştiricilerin, yalnızca SVG ve tuval özelliğini kullanarak herhangi bir görüntü dosyası olmadan bir sayfaya grafik kodlaması mümkündür.

Bu, burada topladığım saf SVG manzaraları gibi gerçekten harika projelere yol açıyor.

Tüm bu projeleri düzenlemek ve kullanmak tamamen ücretsizdir. Animasyonlar, bozulmalar ve paralaks efektleri oluşturmak için bazı temel CSS ve JS ile birlikte SVG kodu üzerinde çalışırlar.

Hawke Körfezi

Bu güzel koy manzarası örneği Louis Coyle tarafından geliştirilmiştir. Tipik olarak 3D işlemede bulunan çokgen ekranı taklit eden çok tarzlı bir görünüm izler.

SVG ve JavaScript ile popüler bir efekttir, ancak kesinlikle çıkarılması kolay değildir.

Louis, hem stil hem de kod açısından zarif animasyonlar oluşturmak için TweenMax kitaplığını kullanır.

Ham SVG kodunu araştırmak istediyseniz, bu snippet'in öğreneceği çok şey var.

Düşük Poli Manzara

İşte düşük poli görünümünden sonra modellenmiş başka bir manzara.

Bu, geliştirici Luke Reid'den geliyor ve 3D efektlere çok daha güçlü bir şekilde odaklanıyor. Tüm düzen çok gerçekçi hissettiriyor ve yıldızlarla serpiştirilmiş gökyüzü gradyanı bu tasarıma hayat veriyor.

JavaScript koduna bakarsanız, yıldız konumlarının rastgele oluşturulduğunu görürsünüz. Bir SVG arka planı veya kahraman başlık stili tasarlıyorsanız, bu harika bir efekttir.

SVG Manzara Animasyonu

Evan Winston, tüm görünür öğeleri yavaşça görüntüye bırakan bu özel animasyonu geliştirdi.

Oldukça havalı bir efekt ve herkesin yaratabileceği bir şey. Bu, çoğunlukla animasyonun tamamlanması için gereken süre nedeniyle, büyük bir arka plan illüstrasyonu kadar kullanışlı olmayabilir.

Ancak bir web sitesinde özel SVG simgeleriyle benzer bir şey yapabilirsiniz. Temel SVG'ler tasarlamanıza ve ardından yukarıdaki kod parçasından (ayrıca TweenMax'te çalışan) kod kullanarak bunları canlandırmanıza yardımcı olacak çok sayıda öğretici var.

Deniz Manzarası

Basit bir göl kenarı manzarası için bu SVG pasajını gerçekten kazıyorum. Sudaki dalgalar ve arka planda bulutlar gibi birkaç temel sayfa animasyonunu destekler.

Tüm bunları küçük bir JavaScript ile yapmak oldukça kolaydır. Ancak bu snippet'in saf css ile yapıldığını ve onu daha da etkileyici hale getirdiğini fark edeceksiniz!

Modern CSS3 animasyonu, en çok UI/UX animasyonlarına sahip web sitelerinde kullanışlıdır ancak onu manzaralar veya çizimler için de kullanabilirsiniz. Geliştirici olmanın eğlencesinin yarısı bu.

Kış Manzarası

Bu kış manzarası, her yıl gördüğümüz bembeyaz karın bir hatırlatıcısıdır.

Andrey Sorokin, bu temel animasyonu yalnızca SVG kodu ve biraz JavaScript ile oluşturdu. Canlandırması yavaş olabilir, bu nedenle tam efekti görmek için bir dakika vermeniz gerekebilir.

En çok yumuşatma efektlerinin kalitesinden ve bunun tarayıcıda ne kadar iyi çalıştığından etkilendim.

Görünümde kaç öğenin canlandırıldığına bağlı olarak, biraz durgunluk olduğunu varsaydım, ancak ne kadar olduğunu göz önünde bulundurarak inanılmaz derecede hızlı yükleniyor.

Ağaçtan çıkan güneşin animasyonundan bahsetmiyorum bile, sadece keyifli.

SVG Manzarası

Düz tasarım trendlerinde ve tümü degradesiz temel renkleri kullanan yarı düz tasarımlarda büyük bir büyüme gördük.

Bu pasaj, gölgeler ve köşeler için sert kenarlarla aynı stili takip eder.

Güzel bir snippet ve kesinlikle çalışmak için en kolay SVG'ye özel manzaralardan biri. Daha önce hiç SVG kodu kullanmamış olsanız bile, bu snippet incelenecek çok şey ve daha fazlasını öğrenmek için Google'da arayabileceğiniz birçok SVG/XML özelliği sunar.

Doğal manzara

Geliştirici Amr Zakaria, dikkatinizi çekmek için animasyonlu tekneler ve uçaklar kullanarak bu manzara ile benzer bir düz tasarım oluşturdu.

Her şey saf CSS üzerinde çalışır ve bazı oldukça net CSS ana kare animasyonlarıyla çalışır.

Çalışması için sabrınız varsa, bunların tümü bir web sayfasındaki arka plan için çoğaltılabilir. En zor kısım, bunun mobil ekranlar için tamamen duyarlı olmasını sağlamaktır.

Paralaks Işıkları

Web'deki tüm paralaks etkilerinin dışında bu çok basit. Bununla birlikte, her şey sadece CSS üzerinde çalıştığından, komut dosyası gerektirmediğinden oldukça etkileyici.

Sokak lambaları dahil tüm unsurlar SVG şekilleri ve CSS efektleri ile tasarlanmıştır.

Çok yakından bakarsanız, lambaların gerçekçi bir parıltı oluşturmak için aslında CSS gölge efektini kullandığını fark edeceksiniz.

Temel Animasyonlar

Bu güncellenmiş SVG manzarasında, görüntüye sıçrayan bir dizi özel öğe bulacaksınız.

Yaratıcı Stef van Dijk, her parçaya zıplama ve yerçekimi benzeri efektler ekleyerek her bir animasyona özen gösteriyor. Örneğin, dağlar görüş alanına girdiğinde yerden bir geri tepme etkisi fark edeceksiniz.

Ayrıntılara dikkat ettiğinizde elde ettiğiniz şey budur ve bu yüzden modern web animasyonlarının büyük bir hayranıyım.

SVG ve CSS

Süper boyutlu bir arka plan animasyonu için bu kaleme bir göz atın. Bütün bunlar, herhangi bir JavaScript olmadan SVG'ler ve saf CSS üzerinde çalışır.

Manzaranın katmanları yavaş yavaş görünür hale gelir ve hepsinin kendi ana kare animasyonları vardır. Ancak bir kez görüş alanına girdiklerinde bazı öğelerin hareket etmeye devam ettiğini (güneş ve bulutlar gibi) fark edeceksiniz.

Böyle bir şey tasarlamak çok zaman alır. Ancak, CSS animasyonunun temelleri ile birlikte SVG sözdizimine de aşina olmanızı sağlayacaktır.

Çimen

Bu manzara çok basit olsa da, yeni ön uç kodlayıcılar için harika bir öğretmen olduğunu düşünüyorum.

Felix De Montis, bu projeyi çimenler, tepeler ve ağaçlar için az miktarda SVG koduyla sıfırdan oluşturdu. Bunu kopyalamak ve CSS kullanarak konumları değiştirmek yeterince kolaydır.

Genel olarak, basit SVG tasarımlarıyla ilgileniyorsanız, bu, başlamak için harika bir yerdir. Temel CSS'nin ötesinde bir şey arıyorsanız, Felix ayrıca LESS ön işlemcisini kullanır.

Paralaks Sayfası

Chris Gruber, fare hareketlerinize göre hareket eden bu kusursuz paralaks manzarasını geliştirdi.

Ancak bununla birlikte, yelkenli ve arka plan bulutları gibi belirli sayfa öğelerini de canlandırdı.

Tüm bunlar, 20 satırdan daha az jQuery üzerinde çalıştığı için çok az JavaScript gerektirir. Bunun ne kadar ayrıntılı olduğu düşünüldüğünde daha da etkileyici.