opacity

    Scroll / Opacity

    Scroll / Opacity

    2022 / 8 / 24 수 Scroll값으로 opacity값 구하기 RAP ✔️Scroll 값으로 Opacity값 구하기 목표 : Element의 css값(opacity)을 스크롤에 따라변경 1. 적용하고싶은 css값의 범위 ( 0.2~ 0.8 ) 2. 스크롤값의 범위 ( 0 ~ 3000 ) ↓1500 (sectionYOffset) 스크롤값 0 -------------------------> 3000 (height) ↓0.5 css값 0.2------------------------> 0.8 ↓ 은 같이 움직임. 스크롤값이 0이라면 css는 0.2 스크롤값이 3000이라면 css는 0.8 스크롤값이 1500이라면 css는 ??? 비율구하기 rate = sectionYOffset / 전체 height 스..

    Opacity / Translate

    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. 아래에서 위로 올라오게 하시오. Hello World Animate const h1Elem = document.querySelector('h1'); const btnAni = do..