21/09/15 - 패스트캠퍼스 챌린지 10일차[Part 1 - ch 10. 스타벅스 예제...

21/09/15 - 패스트캠퍼스 챌린지 10일차[Part 1 - ch 10. 스타벅스 예제...

순차적 애니메이션 - 전역 버튼 스타일

비주얼이라는 영역을 작업해보자

section이라는 하나의 영역이라고 보면 된다.

특정한 영역을 section으로 만든다는 것을 의미한다.

다음과 같이 div 클래스와 다른 이미지의 클래스를 지정해 준다.

이미의 alt 부분에 해당 이미지의 설명을 적어 주는 것이 좋다 .

자바스크립의 작동을 명시 하지 않는 기능을 한다.

.title의 부모요소는 .inner 이다.

위쪽에 공통부분에서 설정한 inner 요소에서

position: relative라는 설정이 되어있는 것을 확인함

버튼부분을 보면 홈페이지에서 공통적으로 사용한다.

반복적으로 사용해서 공통의 스타일로 지정한다.

실습사진

순차적으로 요소 보이기

이미지들을 시간차를 두고 나타나는것을 표현하기

자바스크립트를 이용한다.

각각의 요소를 div로 묶어 주고 클래스를 지정해 주는게 fade-in을 입력한다.

fade-in 서서히 나타난다는 애니메이션 요소이름이다.

위와같이 입력 후 css영역에 다음 투명도를 주면

투명도를 0 으로 입려진 fade-in 부분은 안보이게 된다.

다음은 자바스크립트 파일로 가서

변수를 주고 querySelectorAll( )이라는 메소드를 준다. 그 안에 우리가 명시하는 선택자들을 입력한다.

변수 fadeEls 는 반복적으로 처리를 해야하므로 forEach 라는 메소드를 사용한다.

메소드 안에 함수를 사용할 것인데 함수 안에 매개변수를 지정한다.

매개변수 이름은 fadeEl 이라는 단수 형태와 index 라는 이름으로 사용할 수 있다.

두개의 매개변수들의 함수들이 반복적으로 실행 될때,

함수의 조건은 grap.to( ) 함수를 실행하게 해준다.

grap.to( ) 함수는 애니매이션을 기능하게해주는 라이브러리이다.

옵션을 추가할때 옵션부분은 객체데이터 형태이다.

위와 같이 opacity 값이 1이되도록 하는데

delay라는 옵션을 선택해서 사진들이 시간차를 두는 것을 사용할 수있다.

기본적을 index의 기본값은 0부터 시작이 된다.

위의 계산식을 하면 처음나오는 값은 .7 이다.

지금까지 숨가쁘게 진행된것같다. 이론만 들었을 때 보다 직접 에제를 실습해보면서 배우는 것이 더 학습에 도움이 되는 것같다. 직접 기능들이 사용하는 위치와 방법들을 실습을 통해 이해가 더 잘되는 느낌이다.

당연히 혼자서 이 많은 구조를 입력하라 하면 불가능 하지만 여기서 몰랐던 기능과 구조의 틀을 익히는 중이다.

얼른 강의를 완강하고 다시 들어보면서 놓쳤던 부분을 완벽히 학습하고 나만의 홈페이지를 구성해 보고 싶다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

from http://dhstory311.tistory.com/101 by ccl(A) rewrite - 2021-09-15 14:01:37