İmaj Doldurma Animasyonu

19.09.2009 jQuery Pluginleri

Biraz Photoshop, biraz CSS ve tabii ki biraz da jQuery ile, web sitemiz için yaptığımız maskotu animasyonlar dolduralım.

İşe Photoshop ile başlayalım

Öncelikle doldurma animasyonu yapacağımız imajı ayarlamamız gerekiyor. Özellikle vektörel grafiklerde bu animasyon daha göz alıcı hale geliyor. Yukarıdaki resimde nasıl yapacağımızı da görebilirsiniz. Bu resim dosyası, download edebileceğiniz dosyanın içinde de mevcuttur.

İmajımızda kullanacağımız öğeyi çevresinden işaretleyip tamamen boşaltarak, aniamsyonumuzun ilk çerçevesini oluşturabiliriz. Eğer karakterimize biraz dolgu vermek istersek, crop işleminden önce 10 pixel modify yapabiliriz.

Ortadaki ikinci çerçevemiz de doldurma işlemi için kullanılan maske katmanıdır.

Son çerçevemizde ise asıl karakterimiz görünüyor. Dolgu kullanacaksanız, boş alanları arkaplan rengiyle uyumlu bir renk seçmeye özen gösterin.

CSS Kodları

*{ margin:0; padding:0; } body { text-align: center; background: #A4CAEF; text-align: center; padding: 20px; } /*Container for the image frame aka the top image*/ .frame{ position: absolute; z-index: 2; } /*The container the character goes in for easy placement*/ #dude{ height: 575px; width: 300px; margin: 0px auto; } /*Adds padding around image to make border. Needed only for pngs.*/ img.loadpic{ margin: 10px; } /*Prevents spillover from middle layer moving up*/ #dudecontainer{ position: relative; overflow: hidden; height: 575px; width: 300px; background: #FFF; } /*The middle layer container, hiding base image initially*/ #dudeoverlay{ position: absolute; z-index: 1; } /*White div in #dudeoverlay that fill space the edge image doesn't*/ #dudeblock{ height: 625px; width: 300px; background: #FFF; } /*Image that adds effect the fill, in this case slanted*/ #dudeedge{ height: 90px; width: 300px; background: url('slash.png'); }