[패스트캠퍼스:4주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 3/4

4주차.Chapter 3

 

hover하면 돌아가는 애니메이션

원근감을 갖고 번갈아 회전하는 도형

HTML

CSS

 

1. 회전할 두 도형을 동일한 부모 요소 내부에 넣는다.
2. position: absolute로 도형 중 1개의 요소를 다른 층으로 옮겨 두 요소가 겹쳐지게 한다.
3. 요소 중 1개를 transform : rotateY(-180deg);로 뒤집고 backface-visibility: hidden;으로 보이지 않게 설정한다.
4. 두 요소와 동일한 크기로 부모의 크기를 설정한다.(그렇지 않으면 도형 바깥 영역에 hover 했을 때도 tranform이 동작한다.)
5. 부모 요소에 perspective를 줘서 회전이 자연스러워 보이게 만든다.

 

 

스크롤이 내려가면 나타나는 요소

ScrollMagic은 뷰포트에 특정 지점과 요소를 지정해 놓으면,

지정 요소가 그 지점에 도달했을 때,

적어놓은 코드를 실행해 애니메이션 효과를 준다.

 

https://cdnjs.com/libraries/ScrollMagic

ScrollMagic - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

JS

위의 코드에서 변수에 들어있는 요소만 바꾸면 사용 가능하다. (복수 요소 선택 시 사용하는 코드)triggerHood는 애니메이션 동작 지점(뷰포트 최상단이 0, 최하단이 1로 지정되어 있다.),setClassToggle(요소, 클래스명)는 요소에 클래스명을 toggle(넣었다 뺐다)하는 코드이다.

 

css의 transition-delay로 요소가 나타나는 순서 조절을 해서 더 자연스러운 느낌을 줄 수 있다.

 

 

특수기호

html 문법에 혼란을 줄 수 있어서 특수기호를 넣기 위해서는 HTML Entities로 특수기호를 넣는 걸 추천한다.

구글에 HTML Entitile/Entity라고 검색하면 다양한 사이트가 나온다.

 

https://www.freeformatter.com/html-entities.html

Complete list of HTML entities - FreeFormatter.com

 

HTML에서 이모티콘도 사용이 가능하다.

https://www.quackit.com/character_sets/emoji/emoji_v3.0/unicode_emoji_v3.0_characters_all.cfm

Emoji Chart - Full List from Emoji v3.0

 

 

img요소의 중앙정렬

img 요소는 크기가 지정되어 있는 걸로 취급돼서

가로, 세로 값을 따로 주지 않아도 margin을 통해 가운데 정렬이 가능하다.

 

 

올해 연도 가져오기

new Date().getFullYear()

자바스크립트 날짜 정보를 알아낼 수 있는 생성자함수 (new ...)

 

 

페이지 상단으로 이동하는 버튼

애니메이션을 위해 사용한 라이브러리 gsap의 추가 기능으로,

연결해 놓은 gsap에 모든 기능이 들어있으면 너무 무거우니, 사용하고 싶은 기능이 있으면

추가해서 사용할 수 있게 구성되어있고,

ScrollToPlugin이라는 라이브러리가 그중 하나이다.

 

https://cdnjs.com/libraries/gsap

gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers