티스토리 글 사진, 글씨 애니메이션 효과 넣기 (AOS)

컴퓨터/HTML & JS & TS 2018. 2. 21. 16:53

728x90

(공식 로고)

AOS (Animate on Scroll)

└스크롤 시 HTML 요소들에 간단히 애니메이션(페이드인, 페이드아웃 등) 효과를 추가할 수 있게 해주는 라이브러리.

└제작자: michalsnik

└기본 작동: HTML element에 data-aos attribute="애니메이션 이름" 을 추가

위 두 파일을 '파일업로드'에서 업로드하고, HTML <head> </head> 사이에 아래 코드를 추가한다.

<link rel="stylesheet" href="./images/aos.css" />
<script src="./images/aos.js"></script>

그리고 </body> 바로 위에 아래 코드 추가, init 만 추가하고 일일이 애니메이션 따로 설정 가능

<script>
    AOS.init();
   $("img[src*='cfile'][src^='http']").attr("data-aos", "애니메이션이름");  // 글에 있는 사진만 애니메이션 추가
</script>

fixed: 썸네일 이미지 분리 썸네일을 따로 하고 싶은 분들은 댓글

아래 목록을 참고하여 "애니메이션이름"을 바꾼다.

ease나 타이밍 같이 디테일하고 바꾸고 싶으면 맨 위 AOS Github사이트 참고.

728x90

Javscript Array 복사(copy) (0)	2018.05.23
티스토리 기본 반응형 스킨 #1 간단 수정 (1)	2018.02.20
소스 하이라이터 (syntaxhighlighter, highlight.js) (0)	2018.02.19