JavaScript ile Üzerinde Geçiş Efektleri olan Galeri Oluşturma

Adı : JavaScript ile Üzerinde Geçiş Efektleri olan Galeri Oluşturma

JavaScript birçok alanda kullanılan bir programlama dili olmakla beraber, web tasarımında da oldukça sık kullanılır. Bu yazıda JavaScript ile galeri oluşturma konusunda, özellikle üzerinde geçiş efektleri olan galerilerden bahsedeceğim.
Galeri Oluşturma
Galeri oluşturmak için öncelikle HTML ve CSS kullanarak galerinin çerçevesini hazırlamamız gerekiyor. Daha sonra ise JavaScript ile galeri öğelerini bir araya getirerek, hareketli ve dinamik bir galeri hazırlayabiliriz.
HTML Örnek Kod:
```

```
Bu kodda, ``.gallery`` sınıfı ile birinci birimimizi oluşturduk ve içinde ``.slide-wrap`` sınıfı ile eklenmiş ```` etiketleri sayesinde galerimize resimler eklemiş olduk.

CSS Örnek Kod:
```
.gallery {
width: 600px;
margin: 50px auto;
background-color: #f2f2f2;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
border-radius: 5px;
overflow: hidden;
}
.slide-wrap {
width: 3000px;
height: 400px;
display: flex;
transition: transform 1s ease;
}
.slide-wrap img {
width: 600px;
height: 400px;
margin: 0 10px;
}
```
Bu CSS kodu, galerimizin özelliklerini belirler. ``.gallery`` sınıfı ile galerimizin genişliği, rengi, yuvarlakkenar gibi özelliklerini belirledik. ``.slide-wrap`` sınıfıyla ise yeni bir dizin oluşturduk, içindeki resimleri hizaladık ve Geçiş Efekti için zarif bir src anması inşa ettik.
JavaScript Örnek Kod:
```
const slider = document.querySelector(.slide-wrap);
let counter = 1;
const size = 600;
slider.style.transform = translateX( + (-size * counter) + px);
setInterval(() => {
if (counter >= 5) return;
slider.style.transition = transform 1s ease-in-out;
counter++;
slider.style.transform = translateX( + (-size * counter) + px);
}, 5000);
slider.addEventListener(transitionend, () => {
if (slider.children[counter].tagName === IMG) {
slider.style.transition = none;
counter = slider.children.length - counter;
slider.style.transform = translateX( + (-size * counter) + px);
}
});
```
Bu JavaScript kodu, galerinin nasıl hareket edeceği ve resimlerin nasıl geçeceği gibi şeyleri belirler. ``slider`` sabiti ile galerimizin kaçıncı resmin göründüğünü belirleriz. ``counter`` değişkeni ile galerimizin kaçıncı resimde olduğunu izleriz. Sonra jeneratör fonksiyonunda, slider'ın Resimleri bir süre sonra düşmesini belirtiriz. Fotoğraf galerisi nefes kesici bir hale şimdi getirildi.

Galerimizi oluşturma konusunda genel bir fikir verdiğimi düşünüyorum. Ek olarak, farklı galeri türlerine ve etkilere de bir göz atabiliriz:
1. Akordion Etki Galeri
Bu galeride birlikte düzenlenen resim çiftlerinin titreşimi ile oluşan bir alternatif galeri tipidir. Galeri akordion gibi davranır ve kasnağı sağdan sola hareket ettirildiğinde resimler yavaşça ortaya çıkar ve bu da kullanıcıların galerideki resimleri hızlı bir şekilde gözlemlemelerine olanak sağlar.
2. Zoom efekti Galeri
Bu galeri türünde, tıklanan resimler biraz daha büyütülür ve sonucunda kullanıcılar daha detaylı bir görüntü elde eder. Geçiş hareketlerini geçiş efekti olarak kullanarak galeriye daha fazla canlılık katabilirsiniz.
3. Kare Etkisi Galeri
Bu galeri tipinde resimler, bloklar veya karelerle bölünür ve kullanıcılar bloklar arasında gidip gelebilirler. Bu galerinin avantajı, kullanıcıların resimleri zaman içinde tıklayarak galerideki birden fazla resmi sırayla gözlemleyebilmeleridir.
4. Karışık Etki (Mixed Effects) Galeri
Bu galeri tipinde, özellikle geçiş efektleri çeşitlendirilir, kullanıcının ekranında özellikle parlak ve canlı bir etki bırakır. Bu galeri tipi son derece popüler, geçiş efektlerinin sınırsız olması ile sunduğu farklı cazibelerle birlikte gelen birçok benzersiz yön sunar.
Sonuç olarak, JavaScript ile hareketli ve üzerinde geçiş efektleri olan galeri oluşturmak oldukça kolay ve sizi rakiplerinizden ayırabilecek özellikler sunar. Yukarıdaki örnek kodları kullanarak kendi galerinizi kolayca tasarlayabilirsiniz. Farklı galeri efektleri sayesinde galerinize fonksiyonellik ve zenginlik katabilirsiniz.