-
Blooger Website) 8. 애니메이션 추가하기HTML & CSS & JAVASCRIPT 2021. 1. 9. 16:54
만든 반응형 웹사이트에는 애니메이션이 추가되어있지 않은데,
이를 수정하여 애니메이션이 작동되도록 추가해보자.
먼저 aos 라는 사이트에 들어가서 스크롤 애니메이션 코드를 받아야 한다.
https://michalsnik.github.io/aos/
AOS - Animate on scroll library
AOS Animate On Scroll Library Scroll down
michalsnik.github.io
여기서 다운로드한 파일에서 aos.css, aos.js파일을 프로젝트의 css, js 파일로 옮겨준다.
이후 main.js와 index.html파일에 aos구간을 추가하여 작동하도록 한다.
1. main.js
다음과 같은 구문을 추가해준다. (사용하기 위해서 인스턴스 생성)
//AOS instance AOS.init(); });2. index.html
처음부분에<link rel="stylesheet" href="./css/aos.css">, 끝부분에 <script src="./js/aos.js"></script>을 추가하여
aos파일을 사용함을 알린다.
그 후 적용하고자 하는 애니메이션을 구역마다 적용해주면 된다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Blooger</title> <!--Font Awesome Icons--> <link rel ="stylesheet" href="./css/all.css"> <!----------------Owl-Carousel---------------> <link rel="stylesheet" href="./css/owl.carousel.min.css"> <link rel="stylesheet" href="./css/owl.theme.default.min.css"> <!-------x--------Owl-Carousel-----x---------> <!----------------AOS Library---------------> <link rel="stylesheet" href="./css/aos.css"> <!-------x--------AOS Library-----x---------> <!--Custom Style --> <link rel = "stylesheet" href = "./css/Style.css"> </head> <body> <!-- -----------------Navigation--------------------- --> <nav class="nav"> <div class="nav-menu flex-row"> <div class="nav-brand"> <a href="#" class="text-gray">Blooger</a> </div> <div class="toggle-collapse"> <div class="toggle-icons"> <i class="fas fa-bars"></i> </div> </div> <div> <ul class="nav-items"> <li class="nav-link"> <a href="#">Home</a> </li> <li class="nav-link"> <a href="#">Category</a> </li> <li class="nav-link"> <a href="#">Archive</a> </li> <li class="nav-link"> <a href="#">Pages</a> </li> <li class="nav-link"> <a href="#">Contact Us</a> </li> </ul> </div> <div class="social text-gray"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </div> </div> </nav> <!-- -----x-----------Navigation----------x---------- --> <!---------------------Main Site Section-----------------> <main> <!-----------------------Site Title------------------> <section class="site-title"> <div class="site-background" data-aos="fade-up" data-aos-delay="100"> <h3>Tours & Travels</h3> <h1>Amazing Place on Earth</h1> <button class="btn">Exlore</button> </div> </section> <!------------x----------Site Title--------x---------> <!----------------------Blog Carousel-----------------> <section> <div class="blog"> <div class="container"> <div class="owl-carousel owl-theme blog-post"> <div class="blog-content" data-aos="fade-right" data-aos-delay="200"> <img src="./assets/Blog-post/post-1.jpg" alt="post-1"> <div class="blog-title"> <h3>Londeon Fashion week's continued the evolution</h3> <button class="btn btn-blog">Fashion</button> <span>2 minutes</span> </div> </div> <div class="blog-content"data-aos="fade-in" data-aos-delay="200"> <img src="./assets/Blog-post/post-2.jpg" alt="post-1"> <div class="blog-title"> <h3>Londeon Fashion week's continued the evolution</h3> <button class="btn btn-blog">Fashion</button> <span>2 minutes</span> </div> </div> <div class="blog-content"data-aos="fade-left" data-aos-delay="200"> <img src="./assets/Blog-post/post-3.jpg" alt="post-1"> <div class="blog-title"> <h3>Londeon Fashion week's continued the evolution</h3> <button class="btn btn-blog">Fashion</button> <span>2 minutes</span> </div> </div> <div class="blog-content" data-aos="fade-right" data-aos-delay="200"> <img src="./assets/Blog-post/post-5.png" alt="post-1"> <div class="blog-title"> <h3>Londeon Fashion week's continued the evolution</h3> <button class="btn btn-blog">Fashion</button> <span>2 minutes</span> </div> </div> </div> <div class="owl-navigation"> <span class="owl-nav-prev"><i class="fas fa-long-arrow-alt-left"></i></span> <span class="owl-nav-next"><i class="fas fa-long-arrow-alt-right"></i></span> </div> </div> </div> </section> <!--------x-------------Blog Carousel---------x-------> <!----------------------Site Content----------------> <section class="container"> <div class="site-content"> <div class="posts"> <div class="post-content" data-aos="zoom-in" data-aos-delay="200"> <div class="post-image"> <div> <img src="./assets/Blog-post/blog1.png" class="img"alt="blog1"> </div> <div class="post-info flex-row"> <span><i class="fas fa-user text-gray"></i> Admin</span> <span><i class="fas fa-calendar-alt text-gray"></i> January 14, 2019</span> <span>2 comments</span> </div> </div> <div class="post-title"> <a href="#">Why should boys have all the fun? it/s the women who are making india an alcohol-loving country.</a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique mollitia aliquam, ipsa necessitatibus ad nisi? Voluptatum ea, ratione, nisi voluptatem quidem similique accusantium asperiores laborum beatae fugiat sint labore ad nulla nemo corporis quaerat magni iusto provident, earum vero porro!</p> <button class="btn post-btn">Read More <i class="fas fa-arrow-right"></i></button> </div> </div> <hr> <div class="post-content"data-aos="zoom-in" data-aos-delay="200"> <div class="post-image"> <div> <img src="./assets/Blog-post/blog2.png" class="img"alt="blog1"> </div> <div class="post-info flex-row"> <span><i class="fas fa-user text-gray"></i> Admin</span> <span><i class="fas fa-calendar-alt text-gray"></i> January 16, 2019</span> <span>7 comments</span> </div> </div> <div class="post-title"> <a href="#">Why should boys have all the fun? it/s the women who are making india an alcohol-loving country.</a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique mollitia aliquam, ipsa necessitatibus ad nisi? Voluptatum ea, ratione, nisi voluptatem quidem similique accusantium asperiores laborum beatae fugiat sint labore ad nulla nemo corporis quaerat magni iusto provident, earum vero porro!</p> <button class="btn post-btn">Read More <i class="fas fa-arrow-right"></i></button> </div> </div> <hr> <div class="post-content"data-aos="zoom-in" data-aos-delay="200"> <div class="post-image"> <div> <img src="./assets/Blog-post/blog3.png" class="img"alt="blog1"> </div> <div class="post-info flex-row"> <span><i class="fas fa-user text-gray"></i> Admin</span> <span><i class="fas fa-calendar-alt text-gray"></i> January 19, 2019</span> <span>5 comments</span> </div> </div> <div class="post-title"> <a href="#">New data recording system to better analyse road accidents</a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique mollitia aliquam, ipsa necessitatibus ad nisi? Voluptatum ea, ratione, nisi voluptatem quidem similique accusantium asperiores laborum beatae fugiat sint labore ad nulla nemo corporis quaerat magni iusto provident, earum vero porro!</p> <button class="btn post-btn">Read More <i class="fas fa-arrow-right"></i></button> </div> </div> <hr> <div class="post-content"data-aos="zoom-in" data-aos-delay="200"> <div class="post-image"> <div> <img src="./assets/Blog-post/blog4.png" class="img"alt="blog1"> </div> <div class="post-info flex-row"> <span><i class="fas fa-user text-gray"></i> Admin</span> <span><i class="fas fa-calendar-alt text-gray"></i> January 21, 2019</span> <span>12 comments</span> </div> </div> <div class="post-title"> <a href="#">Why should boys have all the fun? it/s the women who are making india an alcohol-loving country.</a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique mollitia aliquam, ipsa necessitatibus ad nisi? Voluptatum ea, ratione, nisi voluptatem quidem similique accusantium asperiores laborum beatae fugiat sint labore ad nulla nemo corporis quaerat magni iusto provident, earum vero porro!</p> <button class="btn post-btn">Read More <i class="fas fa-arrow-right"></i></button> </div> </div> <div class="pagination flex-row"> <a href="#"><i class="fas fa-chevron-left"></i></a> <a href="#" class="page">1</a> <a href="#" class="page">2</a> <a href="#" class="page">3</a> <a href="#"><i class="fas fa-chevron-right"></i></a> </div> </div> <aside class="sidebar"> <div class="category"> <h2>Category</h2> <ul class="category-list"> <li class="list-items"data-aos="fade-left" data-aos-delay="100"> <a href="#">Software</a> <span>(05)</span> </li> <li class="list-items"data-aos="fade-left" data-aos-delay="200"> <a href="#">Technology</a> <span>(02)</span> </li> <li class="list-items"data-aos="fade-left" data-aos-delay="300"> <a href="#">Lifestyle</a> <span>(07)</span> </li> <li class="list-items"data-aos="fade-left" data-aos-delay="400"> <a href="#">Shopping</a> <span>(01)</span> </li> <li class="list-items"data-aos="fade-left" data-aos-delay="500"> <a href="#">Food</a> <span>(08)</span> </li> </ul> </div> <div class="popular-post"> <h2>Popular Post</h2> <div class="post-content" data-aos="flip-up" data-aos-delay="200"> <div class="post-image"> <div> <img src="./assets/popular-post/m-blog-1.jpg" class="img"alt="blog1"> </div> <div class="post-info flex-row"> <span><i class="fas fa-user text-gray"></i> Admin</span> <span><i class="fas fa-calendar-alt text-gray"></i> January 14, 2019</span> <span>2 comments</span> </div> </div> <div class="post-title"> <a href="#">New data recording system to better analyse road accidents</a> </div> </div> <div class="post-content"data-aos="flip-up" data-aos-delay="300"> <div class="post-image"> <div> <img src="./assets/popular-post/m-blog-2.jpg" class="img"alt="blog1"> </div> <div class="post-info flex-row"> <span><i class="fas fa-user text-gray"></i> Admin</span> <span><i class="fas fa-calendar-alt text-gray"></i> January 14, 2019</span> <span>2 comments</span> </div> </div> <div class="post-title"> <a href="#">New data recording system to better analyse road accidents</a> </div> </div> <div class="post-content"data-aos="flip-up" data-aos-delay="400"> <div class="post-image"> <div> <img src="./assets/popular-post/m-blog-3.jpg" class="img"alt="blog1"> </div> <div class="post-info flex-row"> <span><i class="fas fa-user text-gray"></i> Admin</span> <span><i class="fas fa-calendar-alt text-gray"></i> January 14, 2019</span> <span>2 comments</span> </div> </div> <div class="post-title"> <a href="#">New data recording system to better analyse road accidents</a> </div> </div> <div class="post-content"data-aos="flip-up" data-aos-delay="500"> <div class="post-image"> <div> <img src="./assets/popular-post/m-blog-4.jpg" class="img"alt="blog1"> </div> <div class="post-info flex-row"> <span><i class="fas fa-user text-gray"></i> Admin</span> <span><i class="fas fa-calendar-alt text-gray"></i> January 14, 2019</span> <span>2 comments</span> </div> </div> <div class="post-title"> <a href="#">New data recording system to better analyse road accidents</a> </div> </div> <div class="post-content"data-aos="flip-up" data-aos-delay="600"> <div class="post-image"> <div> <img src="./assets/popular-post/m-blog-5.jpg" class="img"alt="blog1"> </div> <div class="post-info flex-row"> <span><i class="fas fa-user text-gray"></i> Admin</span> <span><i class="fas fa-calendar-alt text-gray"></i> January 14, 2019</span> <span>2 comments</span> </div> </div> <div class="post-title"> <a href="#">New data recording system to better analyse road accidents</a> </div> </div> </div> <div class="newsletter" data-aos="fade-up" data-aos-delay="300"> <h2>Newsletter</h2> <div class="form-element"> <input type="text" class ="input-element" placeholder="Email"> <button class="btn form-btn">Subscribe</button> </div> </div> <div class="popular-tags"> <h2>Popular Tags</h2> <div class="tags flex-row"> <span class="tag"data-aos="flip-up" data-aos-delay="100">Software</span> <span class="tag"data-aos="flip-up" data-aos-delay="200">Technology</span> <span class="tag"data-aos="flip-up" data-aos-delay="300">travel</span> <span class="tag"data-aos="flip-up" data-aos-delay="400">illustration</span> <span class="tag"data-aos="flip-up" data-aos-delay="500">design</span> <span class="tag"data-aos="flip-up" data-aos-delay="600">Lifestyle</span> <span class="tag"data-aos="flip-up" data-aos-delay="700">love</span> <span class="tag"data-aos="flip-up" data-aos-delay="800">project</span> </div> </div> </aside> </div> </section> <!---------x------------Site Content-------x--------> </main> <!------------x--------Main Site Section-------x---------> <!---------------------Footer--------------------> <footer class="footer"> <div class="container"> <div class="about-us" data-aos="fade-right" data-aos-delay="200"> <h2>About us</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, ullam sit at consectetur deserunt quae doloribus. Velit officia libero suscipit!</p> </div> <div class="newsletter"data-aos="fade-right" data-aos-delay="200"> <h2>Newsletter</h2> <p>Stay update with our latest</p> <div class="form-element"> <input type="text" placeholder="Email"><span><i class="fas fa-chevron-right"></i></span> </div> </div> <div class="instagram"data-aos="fade-left" data-aos-delay="200"> <h2>Instagram</h2> <div class="flex-row"> <img src="./assets/instagram/thumb-card3.png" alt="insta1"> <img src="./assets/instagram/thumb-card4.png" alt="insta2"> <img src="./assets/instagram/thumb-card5.png" alt="insta3"> </div> <div class="flex-row"> <img src="./assets/instagram/thumb-card6.png" alt="insta4"> <img src="./assets/instagram/thumb-card7.png" alt="insta5"> <img src="./assets/instagram/thumb-card8.png" alt="insta6"> </div> </div> <div class="follow"data-aos="fade-left" data-aos-delay="200"> <h2>Follow us</h2> <p>Let us be Social</p> <div> <i class="fab fa-facebook-f"></i> <i class="fab fa-twitter"></i> <i class="fab fa-instagram"></i> <i class="fab fa-youtube"></i> </div> </div> </div> <div class="rights flex-row"> <h4 class="text-gray"> Copyright 2020 All rights reserved | <a href="www. youtube.com" target="_black">Daily Tuition <i class="fab fa-youtube"></i>Channel</a> </h4> </div> <div class="move-up"> <span><i class="fas fa-arrow-circle-up fa-2x"></i></span> </div> </footer> <!------------x--------Footer----------x---------> <!-- Jquery LIbrary file--> <script src = "./js/jquery3.5.1.min.js"></script> <!----------------Owl-Carousel js---------------> <script src="./js/owl.carousel.min.js"></script> <!----------------AOS Library---------------> <script src="./js/aos.js"></script> <!-- CUstom Javascript file--> <script src = "./js/main.js"></script> </body> </html>
완성된 코드는 깃허브에서 업로드 해놓았다.
https://github.com/yunhalee05/Blooger-website
yunhalee05/Blooger-website
Blooger Website 만들기. Contribute to yunhalee05/Blooger-website development by creating an account on GitHub.
github.com
드디어 아주 간단한 css 홈페이지 만들기 완성!
'HTML & CSS & JAVASCRIPT' 카테고리의 다른 글
Calculator 만들기) 2. css 스타일 완성하기 (0) 2021.01.22 Calculator 만들기) 1. 기본 html, button 디자인 만들기 (0) 2021.01.21 Blooger Website) 7. 반응형 웹사이트로 만들기 (0) 2021.01.09 Blooger Website) 6. footer 섹션 만들기 (0) 2021.01.09 Blooger Website) 5. sidebar 만들기 (0) 2021.01.09