HTML5 Canvas Resim Kolaj Eklentisi
EaselJS kütüphanesini ve HTML5 Canvas kullanarak resimleri kolaj banner haline getirmek
CreateJS kütüphanesi olan EaselJS kullanarak web sitelerinizde birden fazla resmi kolaj haline getirip tek bir resim veya banner olarak kullanabilirsiniz.
Basit bir eklenti fonksiyon olarak yaptığım bu sistemi ilerleyen günlerde gelişmiş bir jquery eklentisi haline getirmeyi umut ediyorum.
EaselJS destekleyen tüm yeni versiyon browserlarda (internet tarayıcısı) kullanabilirsiniz.
Henüz bir eklenti haline dönüştürmediğim için fonksiyon olarak isimlendirdiğim bu basit sistemi kısaca anlatmak istiyorum.
HTML5 Canvas tag'ı ile tanımladığınız sayfanızda herhangi bir bölgeye görsel olarak farklılık katmak isterseniz alternatifleriniz arasında bulunsun. Ayrıca mobil cihazlarda da HTML5 desteği olduğu için bu tip görsel objelerde flash kullanmak yerine canvas kullanımanızı öneririm. Belki canvas ile ie 8 ve altı tarayıcılarda çalışamayacaksınız fakat mobil cihazları düşündüğünüzde bu eksiklik göz ardı etmeye değer.
Canvas içerisinde resimleri hareket ettirme ve hover durumunda büyütme (scale) vardır.
Canvas tag'ı içerisine HTML5 data olarak resimlerimizin adreslerini dizi yüklüyoruz ( html5 data kullanımı için bkz: http://api.jquery.com/data/ , http://html5doctor.com/html5-custom-data-attributes/ )
Dökümantasyon:
En düşük EaselJS 0.70 versiyon ve jQuery'e ihtiyaç duymaktadır.
Sayfa yüklenme hızı açısından çok büyük boyutlu resimler veya çok fazla resim kullanmamanızı tavsiye ederiz.
Kurulum
<script src="js/jquery.min.js"></script>
<script src="js/cdn.easeljs.0.70.min.js"></script>
<script src="js/canvas-collage.js"></script>
HTML: (NOT: Kullanmak istediğiniz konuma yerleştiriniz, tam genişlik ayarlanmıştır)
<div class="collage-section">
<canvas id="collage" width="1200" height="300" data-images='["img/img1.png","img/img2.png","img/img3.png"...]'></canvas>
</div>
CSS: (NOT: Responsive (elastik, çoklu ekrana uyumlu olarak CSS hazırlanmıştır, isteğinize göre değişebilirsiniz)
.collage-section{
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
/* No support for these yet, use at own risk */
-o-user-select: none;
user-select: none;
}
.collage-section.loading{
display:none;
}
#collage{
width:1170px;
height:300px;
-webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC'); /* CHROME canvas maskeleme sorununun çözümü içindir */
border-radius:6px;
}
@media (min-width:1001px) and (max-width:1200px){
#collage{
width:1170px;
}
}
@media (min-width:768px) and (max-width:1000px){
#collage{
width:768px;
height:192px;
}
}
@media (min-width:480px) and (max-width:767px){
#collage{
width:480px;
height:120px;
}
}
@media (max-width:479px){
#collage{
display:none;
height:0;
}
}
Kullanım
SCRIPT:
<script>
$(document).ready(function(){
canvas_collage();
});</script >
Demo için buraya tıklayınız.
İndirmek için buraya tıklayınız.