2021-06-30 (79일차) 슬라이더 텍스트 애니메이션, 슬라이더 버튼

스와이퍼 14강~18강

 

- 슬라이더 텍스트 애니메이션 (보통 아이템이 하나인 경우 사용)

  1 - 글씨를 태그로 한 번 더 묶어주기

  2 -  묶어준 태그 > opacity 0.5 , translateY(-100%) , transition 1s

  3 - 슬라이드. 슬라이드 active가 들어갔을 때 묶어준 태그에 값 > opacity 1 , translateY(0)

  ※ 스와이퍼 슬라이드에는 실행이 될 때 swiper-slide-active 라는 클래스가 적용되게 설정되어 있음 !

 

---

- 이미지 슬라이더 ( 방향키 버튼을 새롭게 고치고, 슬라이더 밖으로 내보내기 )

 

  ※ 이미지는 부모의 너비는 따라가지만, 높이는 따라가지 않기에 직접적으로 값을 부여해야 한다.

---

- 이미지 슬라이더 ( 슬라이더 이미지가 천천히 축소되는 효과 )

 

 

---

- 이미지 슬라이더 ( 좌측 상단 텍스트태그 애니메이션 )

  : 슬라이드와 이미지 사이 안에 '태그 > 텍스트' (이미지의 형님) 만들어주기

  ( 내가 한 방법 : 위의 span을 활용하여 ::after+content를 이용하여 만들었당 텍스트를 만들었당 )

 

- 이미지 슬라이더 ( 중앙 타이틀 텍스트 애니메이션 )

  : 위와 같은 방식