Javascript ile Etkileşimli SVG dosyaları oluşturmak
Merhaba bu yazımızda sizlere https://ufa-bilet.com sitesindeki gibi yaptığımız interkatif bir svg nasıl oluşturabiliriz bundan bahsetmek istiyorum.
Not: Detaylı olarak görüntülemek için ufa-bilet.com adresine gidebilirsiniz.
Buradan yapacağımız örneği bulabilirsiniz: https://ufa-interactive-svg.netlify.app/
Örnekler:
Bu yazıda bu figma dosyasını kullanabilirsiniz.
- Burada item-1, item-2 ve item-3 adında gösterilen gruplarımız var. Mouse ile üzerine geldiğimizde bu grupları göstereceğiz.
- Bunun dışında target-item-1, target-item-2 ve target-item-3 adında diğer gruplarımız var. Bu target-item-* iteminin üzerine geldiğimizde item-* elementini gösterceğiz. Burada verdiğimiz isimlendirme çok önemli çünkü bunların her birisi bir id ve benzersiz olmak zorunda svg export ederken bu değerleri id olarak kullanacağız.
Export Etme
- Frameyi seçtikten sonra design kısmından export edeceğiz.
- Burada seçim yaparken Include “id” attribute seçeneğini işaretleyin ve export edin.
- Export ettikten sonra bu svg dosyasını bir html dosyasına ekleyin ve verdiğiniz bir id değerini aratmayı deneyin mesela: target-item-1
Örnek bir sonuç:
- Şimdi item-* ile başlayan idlerimize bir css classı ekleyeceğiz ve varsayılan olarak bu elementleri gizleyeceğiz.
.target-item {
transform: scaleY(0);
opacity: 0;
transition: transform 500ms cubic-bezier(0.95, 0.05, 0.795, 0.035),
opacity 500ms linear;
}
- Şimdi bütün item-* ile başlayanlara target-item classını ekleyin.
- <g id=”item-2" class=”target-item”>
- <g id=”item-3" class=”target-item”>
- <g id=”item-1" class=”target-item”>
Artık .target-item classına sahip elementlerimiz gözükmüyor bu yüzden aktif elementi göstermek için yeni bir class tanımlayacağız.
.target-item.active {
opacity: 1;
transform: scaleY(1);
}
Şimdi id=”target-item-*" ile başlayan elementlerimize data-target isimli bir attr ekleyeceğiz ve her bir elementimiz item-* elementini point edicek.
Örnek:
<g id=”target-item-2" data-target=”item-2">
<g id=”target-item-1" data-target=”item-1">
<g id=”target-item-3" data-target=”item-3">
mouseover eventi ile data-target elementlerimizi seçip daha sonrasında active classını elementimize ekleyeceğiz daha sonrasında mouseleave eventi olduğu zaman active classını kaldıracağız.
<script>
document.querySelectorAll(“[data-target]”).forEach((item) => {
item.addEventListener(“mouseover”, () => {
const target = item.dataset.target;
document.getElementById(target).classList.add(“active”);
});
item.addEventListener(“mouseleave”, () => {
const activeItem = document.querySelector(“.target-item.active”);
if (activeItem) {
activeItem.classList.remove(“active”);
}
});
});
</script>
Okuduğunuz için çok teşekkür ederim 🙂🙂.
Tüm örnek:
