Opacity / Translate

2022 / 8 / 22 월

2022 / 8 / 23 화

 

• Opacity
• Translate
• 개인 프로젝트 진행 ~

---

✔️Opacity

요소의 불투명도를 조절

0 ~ 1

0 : 요소가 투명한 상태

1 : 요소가 뚜렷하여 내용을 확인할 수 있는 상태

---

✔️Translate

Transform 

- 좌표 공간을 변형

- 요소에 이동(translate), 회전(rotate), 확대 축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다

---

🔨 연습문제

 

1. Animate 버튼을 누르면 글자가

2. 흐려지면서 진하게 생기고

3. 아래에서 위로 올라오게 하시오.

    <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);

---

🔔 코딩 시 알아두면 좋은 프로그램 

 

WinMerge

 

- 코드 비교 프로그램으로 변화된 코드를 손쉽게 확인 가능하다. 

---

🔔 개인 프로젝트 진행상황

 

- 글씨체 적용

- 메인페이지 메뉴바, footer 완성

- 로고이미지 반영