![[24일차] VIEW / WinMerge / Opacity / Translate](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdB5XTG%2FbtrKlacMLz9%2F9bSEzwuu6XlPr8pkw0bNVK%2Fimg.png)
728x90
20220823(화)
- 목차
- VIEW
- WinMerge
- Opacity
- Translate
< VIEW >
- 빨간 상자 : VIEW (스크롤 바, 상단 프레임 미포함된 정보만을 보여주는 이 부분)
- 스크롤 바, 상단 프레임 부분 : FRAME
- VIEW + FRAME = WINDOW
- VIEW의 높이 : window.innerHeight
< WinMerge - 코드비교 프로그램>
- WinMerge 다운로드 링크
https://winmerge.org/downloads/?lang=en
Download WinMerge - WinMerge
Download WinMerge The easiest way to install WinMerge is to download and run the Installer. Read the online manual for help using it. WinMerge 2.16.22 The current WinMerge version is 2.16.22 and was released at 2022-07-27. For detailed info on what is new,
winmerge.org
1) 실행 화면 ➡ 파일 열기 후 비교할 파일과 기존 파일 2개를 각각 선택한다.
2) 노란색으로 표시된 부분이 다른 부분이다. 상단 화살표를 눌러 덮어쓸 수도 있다.
< Opacity : 투명도 >
- 요소의 투명도를 설정
- 연습문제
- 각각의 버튼을 누르면 자연스럽게 fade-out / in이 되도록 코드를 짜보자.
<h1>Hello World</h1>
<button>Fade-out</button>
<button>Fade-in</button>
<script>
// event handler 만들기
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;
// setinterval 도는 동안 isrunning이 true 가 된다.
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>
< Translate : 위치 이동 >
- transform : 요소를 이동, 회전, 크기 조정 및 기울일 수 있다.
- translate (현재 위치에서 요소를 이동한다.)
transform : translate(50px, 100px); ➡ 요소를 현재 위치에서 오른쪽으로 50px, 아래로 100px 이동 - 연습문제
- 각각의 버튼을 누르면 글자가 자연스럽게 위/아래로 40%만큼 움직이는 코딩을 해보자.
<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>
< Opacity + Translate 동시 구현 >
- 연습문제
- Animate 버튼을 누르면 글자가 1) 흐려지면서 진하게 생기고 2) 아래에서 위로 올라오는 코딩을 짜보자. - 두개 이상의 스타일 값을 동시에 적용할 때
- 한개의 값을 기준으로 다른 값을 맞춰서 적용
(opacity 적용, opacity를 기준으로 translateY을 적용)
<body>
<br>
<br>
<h1>Hello World</h1>
<br>
<br>
<br>
<button>Animate</button>
</body>
<script>
const h1Elem = document.querySelector('h1');
const btnAni = document.querySelector('button');
let intervalID;
let opacityValue = 0;
let yValue = 0;
let isRunning = false;
const clickProc = function()
{
if (isRunning === true)
return;
isRunning = true;
opacityValue = 0;
intervalID = setInterval(()=>{
// 1. opacity (0 --> 1)
h1Elem.style.opacity = opacityValue;
// 값계산
yValue = opacityValue * -30
opacityValue = opacityValue + 0.05;
// 2. translateY (0 --> -30 )
h1Elem.style.transform = `translateY(${yValue}%)`;
if (opacityValue >= 1)
{
h1Elem.style.opacity = 1;
h1Elem.style.transform = 'translateY(-30%)';
clearInterval(intervalID);
isRunning = false;
}
}, 50);
}
btnAni.addEventListener('click', clickProc);
</script>
728x90