Didalam tutprial ini kita akan menggunakan elemen canvas HTML5 untuk menciptakan portfolio sederhana yang menampilkan kumpulan foto fitur dengan efek foto shutter kamera fungsi ini akan datang dalam bentuk yang mudah untuk menggunakan fitur jQuery yang anda dapat dengan mudah memasukkan kedalam situs web apapun.
IDE
Elemen canvas adalah area khusus dimana anda dapatmenggambar dengan JavaScript dan menerapkan sega macam manipulasi gambar anda. Namun, ada keterbatasan untuk apa yang bisa dilakukan dengan itu. membangkitkan kompleks animasi real-time menantang, karena anda harus redraw canvas pada setiap rame.
setelah beban awal halaman (ketika frame dihasilkan) pekerjaan pluing untuk hanya menjadi siklus melalui frame.
HTML
pertama, mari kita melihat lebih dekta pada markup HTML seperti kita menggunakan elemen canvas, kita perlu mendefinisikan dokumen HTML5 dengan DOCTYPE yang sesuai.
<! DOCTYPE html> <- - Mendefinisikan dokumen HTML5!>
< html >
< kepala >
< meta http-equiv = "Content-Type" konten = "text / html; charset = utf-8" />
< title > & quot; Shutter Efek & quot; dengan kanvas dan jQuery | Tutorialzine Folio
</ Script >
< Script src = "aset / jquery.shutter / jquery.shutter.js" ></ Script >
< Script src = "aset / js / script.js" ></ Script >
</ body >
</ html >
Stylesheet untuk halaman dan pluing termasuk di bagian kepala dan scrip file sebelum tag penutup tubuh. #content div memegang daftar unerdered dengan empat foto yang akan di tampilkan dengan tampilan slide.
Ketika shutter plugin disebut, menghasilkan mengikuti markup HTML. dalam contoh kita menyebutkan #content div. sehingga code dibawah ini ditamabah untuk itu.
< div class = "shutterAnimationHolder" gaya = "width: 640px; height: 400px;" >
< div class = "Film"
gaya = "height: 15000px; width: 1000px; margin-left: -500px; top: -300px;" >
< canvas width = "1000" height = "1000" > </ canvas >
< canvas width = "1000" height = "1000" > </ canvas >
< canvas width = "1000" height = "1000" > </ canvas >
< canvas width = "1000" height = "1000" > </ canvas >
< canvas width = "1000" height = "1000" > </ canvas >
< canvas width = "1000" height = "1000" > </ canvas >
< canvas width = "1000" height = "1000" > </ canvas >
< canvas width = "1000" height = "1000" > </ canvas >
< canvas width = "1000" height = "1000" > </ canvas >
< canvas width = "1000" height = "1000" > </ canvas >
< canvas width = "1000" height = "1000" > </ canvas >
< canvas width = "1000" height = "1000" > </ canvas >
< canvas width = "1000" height = "1000" > </ canvas >
< canvas width = "1000" height = "1000" > </ canvas >
< canvas width = "1000" height = "1000" > </ canvas >
</ div >
</ div >
Setiap elemen canvas memegang satu frame. ketinggian film div diatur cukup besar untuk menampilkan elemen canvas satu diantara yang lain. dengan menghidupkan properti diatas film, kita dapat melewati frame dan menciptakan animasi.
Sutter animation holder div diatur menjadi sama tinggi dengan wadah dimana ia dimasukkan dan ditampilkan diatas daftar unordered dengan foto. dengan overflow: hidden menyembunyikan sisa film dan hanya menunjukkan satu frame pada suatu wakktu. anda dapat mengangab elemen cavas sebai PNG biasa, sehingga mereka mendukung transparansi lengkap dan menampilkan foto dibawah mereka.
Kami akan kembali pada langkah jQuery
CSS
Css yang kekuatan demo cukup sederhana, karena sebagian besar pekerjaan dilakukan dengan menghasilkan gambar canvas. namun mereka masih harus diatur sebagai film dan animasi baik dalam rangka atau mencapai animasi yang halus.
jQuery .shutter.css
.shutterAnimationHolder .film canvas {
display : block;
margin : 0 auto;
}
.shutterAnimationHolder .film {
position : absolute;
left : 50 %;
top : 0 ;
}
.shutterAnimationHolder {
position : absolute;
overflow : hidden;
top : 0 ;
left : 0 ;
z-index : 1000 ;
}
Ketiga set aturan diawali dengan .shutterAnimationHolder class, sehingga gaya hanya mempengaruhi markup, yang dihasilkan oleh plugin. Jika Anda ke optimasi, Anda dapat memilih untuk menyalin kode ini ke stylesheet utama Anda, untuk meminimalkan jumlah permintaan HTTP.
jQuery
Ini adalah bagian yang paling menarik dari tutorial. Di sini kita akan membuat sebuah plugin jQuery -tzShutter - yang mudah digunakan dan memerlukan modifikasi minimum dalam situs web Anda untuk menggunakannya.
Salah satu aspek penting dari pengembangan plugin ini, adalah untuk memberikan dukungan yang tepat bagi pengguna yang browser tidak memahami tag kanvas (pada dasarnya semua versi IE kecuali 9). Hal ini dapat dilakukan dengan mudah dengan melompati generasi kanvas dalam kasus ini.
Juga kita harus menyediakan cara bagi pengguna tzShutter untuk memicu pembukaan dan penutupan animasi. Kami akan mencapai hal ini dengan mengikat dua peristiwa khusus ke elemen yang mengandung -shutterOpen dan shutterClose , baik dengan mudah dieksekusi dengan pemicu () metode jQuery.
Selain itu, plugin akan menyediakan pengguna dengan cara memasukkan fungsionalitas kustom dengan cara fungsi callback, melewati sebagai parameter. Ini dilakukan dalam bagian-bagian penting dari proses animasi - ketika elemen kanvas yang dihasilkan, dan ketika shutter dibuka atau ditutup.
Anda dapat melihat kode plugin di bawah ini.
Anda dapat melihat kode plugin di bawah ini.
( function () { // Membuat sebuah plugin jQuery biasa:
$ .fn.tzShutter = function (pilihan) { // Memeriksa dukungan kanvas Pekerjaan di semua browser modern. var supportsCanvas = 'getContext' di document.createElement ( 'kanvas ' ); // Memberikan nilai default:
Pilihan = = ini ; jika (! supportsCanvas) { // Jika tidak ada dukungan untuk kanvas, mengikat // callack fungsi langsung dan = {Num: 15 , tinggi: 1.000 , lebar: 1000 },
iris = {num: 8 , lebar: 416 , tinggi: 500 , startDeg: 30 },
{animasi =
width: element.width (),
tinggi: elemen. tinggi (),
offsetTop: (frames.height-element.height ()) / 2
}, // ini akan menghitung perbedaan memutar antara // irisan rana (2 * Math.PI sama 360 derajat dalam radian). :
rotateStep = 2 * Math.PI / slices.num,
rotateDeg = 30 ; // Menghitung mengimbangi
slices.angleStep = (( 90 - slices.startDeg) /frames.num) * Math.PI / 180 ; // rana The slice image: var img = baru Gambar (); // Mendefinisikan callback sebelum menetapkan sumber gambar:
img.onload = function () {
window.console && console.time && console.time ( "Membangkitkan Frames" ); // Film div memegang 15 elemen kanvas (atau frame). var Film = $ ( '<div>' , {
className: 'Film' ,
css: {
height: frames.num * frames.height,
lebar: frames.width ,
marginLeft: -frames.width / 2 , // Centering horizontal
atas: -animation.offsetTop
}
}); // Pemegang animasi menyembunyikan film dengan overflow: hidden, // memperlihatkan hanya satu frame pada suatu waktu. var animationHolder = Menciptakan 15 elemen kanvas. var kanvas = document.createElement ( 'kanvas' ),
c = Untuk setiap kanvas, menghasilkan berbagai negara // rana dengan menggambar rana // irisan dengan rotasi perbedaan yang berbeda. // Memutar kanvas dengan langkah, sehingga kita bisa // melukis irisan yang berbeda dari shutter.
c. memutar (-rotateStep); // Menyimpan pengaturan rotasi saat ini, sehingga kita dapat dengan mudah mengembalikan // kembali kepada mereka setelah menerapkan rotasi tambahan untuk potongan.
c.save (); // Memindahkan titik asal (sekitar yang kita berputar . // kanvas) ke bagian bawah-tengah potongan shutter
c.translate ( 0 , frames.height / 2 ); . // rotasi ini menentukan seberapa luas rana dibuka
c.rotate ((frames.num- 1 -z) * slices.angleStep); // Tambahan offset yang, diterapkan pada lima frame terakhir, // jadi kami mendapatkan animasi halus: var offset = 0 ;
jika ((frames.num- 1 -z) < 5 ) {
offset = (frames.num- 1 -z) * 5 ;
} // Menggambar gambar rana
c.drawImage (img, -slices.width / 2 , - (frames.height / 2 + offset)); // Mengembalikan kembali ke pengaturan yang disimpan di atas.
c.restore ();
} // Menambahkan kanvas (atau frame) ke div Film.
film.append (kanvas);
} // Menambahkan film untuk animasi = palsu ; // Binding kustom membuka dan menutup acara, yang memicu . // animasi rana
element.bind ( 'shutterClose' , function () { jika (menjiwai) kembali palsu ;
menjiwai = benar ; var count = 0 ; var dekat = function () {
( function bernyawa () { jika (count> = frames.num) {
menjiwai = palsu ; // Memanggil pengguna disediakan callback.
options.closeCallback.call (elemen), kembali palsu ;
}
film.css ( 'top' , -frames.height * count -
= benar ; var count = frames.num- 1 ;
( function bernyawa () { jika (count < 0 ) { var menyembunyikan = function () {
menjiwai = palsu ;
// Memanggil pengguna disediakan - Animation.offsetTop);
count--;
setTimeout (bernyawa, 20 );
}) ();
}); // Menulis informasi waktu jika // konsol pembakar / pengembangan web dibuka:
window.console && console.timeEnd && console.timeEnd ( "Membangkitkan Frames" );
options.loadCompleteCallback ();
};
img.src = options.imgSrc;
}, 0 ); kembali elemen;
};
}) (jQuery);
Satu-satunya kekurangan dari metode ini, adalah bahwa tugas intensif prosesor menghasilkan elemen kanvas dilakukan saat halaman yang dimuat. Hal ini dapat menyebabkan antarmuka browser menjadi tidak responsif untuk waktu singkat. Anda bisa menggunakan alternatif gambar PNG sebenarnya bukan, tapi ini akan menambah lebih dari 1mb berat ke halaman Anda (versus 12 kb sekarang).
Sekarang mari kita lihat bagaimana plugin yang digunakan.
Script.js
$ (Document) .ready ( function () { var container = $ ( '#container' ),
li = container.find ( 'li' ); . // Menggunakan plugin tzShutter Kami memberikan jalan // untuk dia rana gambar .png (terletak di folder Plugin), dan dua // callback Bersepeda visibilitas item li untuk // membuat slideshow yang sederhana.
li.filter ( ': terlihat: pertama' ) .hide (); jika (li.filter ( ': terlihat' ) .length == 0 ) {
li .show ();
} // Penjadwalan shutter terbuka di 0,1
Ketika plugin selesai menghasilkan elemen kanvas, memicu fungsi loadCompleteCallback. Kami menggunakannya untuk jadwal animasi rana setiap empat detik, disertai dengan perubahan foto terlihat di daftar unordered.
Dengan Effect Plugin Shutter kami selesai!
Kesimpulan
Tag kanvas memberikan pengembang array yang luas dari kemungkinan dan memungkinkan mereka untuk membuat antarmuka pengguna baru dan menarik, animasi dan bahkan permainan. Bagi pengalaman anda di bagian komentar di bawah ini.
0 comments :
Post a Comment