<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
font-size: 3rem;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<button>Fade-out</button>
<button>Fade-in</button>
<script>
const h1Elem = document.querySelector('h1');
const btnFade = document.querySelectorAll('button');
let opacityValue = 0;
let itvID;
let isRunning = false;
btnFade[0].addEventListener('click', ()=>{
if (isRunning === true)
{
console.log("return!!!");
return;
}
opacityValue = 1;
itvID = setInterval(()=>{
isRunning = true;
h1Elem.style.opacity = opacityValue;
opacityValue = opacityValue - 0.05;
if (opacityValue <= 0)
{
clearInterval(itvID);
h1Elem.style.opacity = 0;
isRunning = false;
}
}, 50);
});
btnFade[1].addEventListener('click', ()=>{
if (isRunning === true)
{
console.log("return!!!");
return;
}
opacityValue = 0;
itvID = setInterval(()=>{
isRunning = true;
h1Elem.style.opacity = opacityValue;
opacityValue = opacityValue + 0.05;
if (opacityValue >= 1)
{
clearInterval(itvID);
h1Elem.style.opacity = 1;
isRunning = false;
}
}, 50);
});
</script>
</body>
</html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
position: relative;
top: 80px;
font-size: 3rem;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<br><br><br><br>
<button>Y-up 40%</button>
<button>Y-down 40%</button>
<script>
const h1Element = document.querySelector('h1');
const btnTranslate = document.querySelectorAll('button');
let yValue = 0;
let intervalID;
btnTranslate[0].addEventListener('click', ()=>{
yValue = 0;
intervalID = setInterval(()=>{
h1Element.style.transform = `translateY(${yValue}%)`;
yValue = yValue - 2;
if (yValue <= -40)
{
clearInterval(intervalID);
h1Element.style.transform = `translateY(0%)`;
console.log("clear-interval");
}
}, 30);
});
btnTranslate[1].addEventListener('click', ()=>{
console.log("down");
yValue = 0;
intervalID = setInterval(()=>{
h1Element.style.transform = `translateY(${yValue}%)`;
yValue = yValue + 2;
if (yValue >= 40)
{
clearInterval(intervalID);
h1Element.style.transform = `translateY(0%)`;
console.log("clear-interval");
}
}, 30);
});
</script>
</body>
</html>