Motion Design

[패스트캠퍼스] 웹퍼블리싱 강의 - 8주차 학습내용

Jennie_:D 2023. 7. 19. 23:00

[내일배움카드] x [패스트캠퍼스] - 8주차 학습내용

 

[JavaScript를 활용한 응용 예제 2]

드디어 마지막 8주차가 되었습니다-!!! 💪💪

이론 후에는 계속 실습을 진행했어서 만족스러웠는데,

실습 또한 다양하게 진행되었다.. (∩^o^)⊃━☆

 

파트는 총 3파트!

Chapter 4. (실전) 인터랙티브 뮤직 플레이어 (난이도 중상)

Chapter 5. (실전) SVG를 활용한 세로형 슬라이더

Chapter 6. (실전) 마스크를 활용한 풀스크린 동영상 갤러리

 

중에서 오늘은

'Chapter 5. (실전) SVG를 활용한 세로형 슬라이더'만 작성하려고 한다.

 

 

이번 실습은 말 그대로 세로형 슬라이드를 사용하여 svg 효과주기-!

이번에는 플러그인을 사용하는게 아니라 직.접 스크립트를 짜서 슬라이드 구현을 하였다.

+ 웹디자인기능사 시험 볼 때나 짜던 슬라이드..

그때는 jquery로 짰었는데,, javascript로는 처음이다 (๑•̀ㅂ•́)و✧

 

 

과물 ↓ 

Chapter 5. (실전) SVG를 활용한 세로형 슬라이더

 

Chapter 5. (실전) SVG를 활용한 세로형 슬라이더
Chapter 5. (실전) SVG를 활용한 세로형 슬라이더

 

이 실습에서 포인트는,

슬라이드 넘기는 UP / DOWN 버튼을 눌렀을 때,

슬라이드가 위/아래로 넘어가면서 svg가 선을 따라 그려진다는 것 이다.

 

애니메이션 효과 같이 보여지기 위해서는

svg의 path에 stroke 관련 값을 주면 된다.

 

주로 5가지 

stroke: #색상값
stroke-width : 숫자 값
stroke-dasharray: 숫자 값
stroke-dashoffset: 숫자 값
transition: stroke-dashoffset 2s .2s, fill .2s 2s  >> 숫자 값은 임의로 넣음

 

이것만 넣어주면 되니 참 쉽죠~~!

셋트로 외어버립시다-!! ☆⌒(*^-゜)v

 

 

 

💜git 구경가기 ↓↓

https://chaen32068.github.io/Motion_svg_slide/