MediaWiki:Timeless.js: Revizyonlar arasındaki fark

Fen Ansiklopedisi sitesinden
Değişiklik özeti yok
Etiket: Geri alındı
Değişiklik özeti yok
Etiket: Geri alındı
1. satır: 1. satır:
function move(id, position, color) {
var li_items = document.querySelectorAll(".accordion_wrap ul li");
    var tl = gsap.timeline();
var ul = document.querySelector(".accordion_wrap ul");
    tl.to("#bgBubble", {duration: 0.15, bottom: "-30px", ease: "ease-out"}, 0)
 
      .to("#bubble1", {duration: 0.1, y: "120%", boxShadow: 'none', ease: "ease-out",}, 0)
li_items.forEach(function(item){
      .to("#bubble2", {duration: 0.1, y: "120%", boxShadow: 'none', ease: "ease-out",}, 0)
item.addEventListener("click", function(){
      .to("#bubble3", {duration: 0.1, y: "120%", boxShadow: 'none', ease: "ease-out",}, 0)
li_items.forEach(function(item){
      .to("#bubble4", {duration: 0.1, y: "120%", boxShadow: 'none', ease: "ease-out",}, 0)
item.classList.remove("active");
      .to(".icon", {duration: 0.05, opacity: 0, ease: "ease-out",}, 0)
})
      .to("#bgBubble", {duration: 0.2, left: position, ease: "ease-in-out"}, 0.1)
item.classList.add("active");
      .to("#bgBubble", {duration: 0.15, bottom: "-50px", ease: "ease-out"}, '-=0.2')
});
      .to(`#bubble${id}`, {duration: 0.15, y: "0%", opacity: 1, boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)', ease: "ease-out"}, '-=0.1')
});
      .to(`#bubble${id}> span`, {duration: 0.15, y: "0%", opacity: 0.7, ease: "ease-out"}, '-=0.1')
 
      .to("#navbarContainer", {duration: 0.3, backgroundColor: color, ease: "ease-in-out"}, 0)
ul.addEventListener("mouseleave", function(){
      .to("#bg", {duration: 0.3, backgroundColor: color, ease: "ease-in-out"}, 0)
li_items.forEach(function(item){
      .to("#bgBubble", {duration: 0.3, backgroundColor: color, ease: "ease-in-out"}, 0)
item.classList.remove("active");
  }
})
});

13.11, 9 Ekim 2021 tarihindeki hâli

var li_items = document.querySelectorAll(".accordion_wrap ul li");
var ul = document.querySelector(".accordion_wrap ul");

li_items.forEach(function(item){
	item.addEventListener("click", function(){
		li_items.forEach(function(item){
			item.classList.remove("active");
		})
		item.classList.add("active");
	});
});

ul.addEventListener("mouseleave", function(){
	li_items.forEach(function(item){
		item.classList.remove("active");
	})
});
"https://fenpedia.com/index.php?title=MediaWiki:Timeless.js&oldid=731" sayfasından alınmıştır