1. 애니메이션
휠이 닿자마자 터진다 + delay 걸어서 순서대로 페이드인 하는 효과 가능!
이게 자바스크립트가 아니라 CSS! 복사해서 태그에 붙여써라 https://animate.style/
- aos 플러그인 https://michalsnik.github.io/aos/
- wow 플러그인 https://wowjs.uk/
- animate.css v4.1.1 https://animate.style/
animate.css v3.5.1 https://www.npmjs.com/package/animate.css/v/3.5.1
v4.1.1
플러그인은 버젼에 맞춰서 메뉴얼이 달라진다. 버젼(v3.5.1) 확인 중요!!
<link href="vendor/animate.css/animate.min.css?ver=3.5.1" rel="stylesheet" type="text/css">사용법이 다르므로, 반드시 버젼에 맞는 메뉴얼로 진행해야 한다.
적용하기
(1) HTML에 wow 플러그인 삽입
<script src="vendor/wow/wow.min.js"></script>
(2) 애니메이트 CSS 삽입 class="wow fadeIn"
HTML 문서에서 움직임을 넣고 싶은 객체에 클래스 삽입 ( class="wow" )
※※ wow / animate.css 3버전의 클래스명으로 삽입해야 한다. (버전마다 키워드 다름)
(3) 딜레이, 시간차를 넣는다
data-wow-delay = "0.5s"
※※ 시간만큼은 절대로 단위(s, ms) 생략 불가!
2. col-md-3 col-sm-6 (col- 필요없음)
2-1) col-사이즈(1~12)-숫자
md 768px(데스크탑) 이상일 때, 25% 구역 나눔.
sm 576px(탭 / 패드) 이상일 때, 1/2
모바일은 그냥 w-100
2-2) offset 과 push
col-md-6 col-md-offset-3 -> relative 객체의 가운데 정렬
col-md-6 col-md-push-3 -> absolute 객체의 가운데 정렬
- class="col-lg-8 col-lg-offset-2"
col-lg-8 구역 차지하고, 왼쪽으로 4 남음 (8+4=12)
col-lg-offset-2 마진 양 옆으로 2 남기면 가운데 정렬됨! (col 안에서 여백을 확보하는 방법)
- class="col-lg-5 col-lg-offset-1"
col-lg-5 구역 차지하고, 왼쪽으로 1 남음 (5+1=6)
col-lg-offset-1 마진 1 남기면 가운데 정렬됨!
3. 접근성 지키면서 sns 아이콘 교체
4. page-scroll
조건1) a태그
조건2) page-scroll 클래스
조건3) href="그 섹션의 아이디로 넣는다"
5. mix-up 플러그인 다루기
tap 객체에게 반드시 filter 클래스 삽입하고
↓
data-filter=".identity" 클래스 삽입 클래스 삽입
↓
대상 썸네일은 mix 클래스 반드시 있어야 하고 ( class="mix identity" )
↓
tab 객체의 data-filter 클래스로 걸러낸다.
