파이널 프로젝트 구현을 시작하였다.
이번에 만들게 된 사이트는 전자책 사이트로 사용자가 포인트를 이용해 책을 구매하거나 구독권을 구입해 책을 열람할수 있는 사이트이다.
10월 1~2주동안 기획 및 다이어그램을 마무리했고 3주차에 구현을 시작하였다.
세미프로젝트에서는 백엔드를 만든뒤 프론트 엔드를 만들어 불편한 점이 많았기때문에 이번에는 프론트 엔드를 좀 더 먼저 작업하고 백엔드를 나중에 제작해 보려고 한다.
index페이지
M서재를 참고하여 스크롤을 움직일때마다 문단마다 문장이 나타나고 책 표지가 흘러가는 애니메이션을 넣어보고 싶었다.
스크롤 애니메이션
<main>
<div id="main">
<section class="container" id="section1">
<div class="row" id="main-line">
<div class="col-md-4" id="main-text">
<div id="main-title">땅콩북스</div>
<div id="main-title2">
당신만의 인터넷 도서관 <br>
당신이 있는 그 곳이 당신만의 도서관이 됩니다<br>
당신이 바라는 당신만의 책, 당신이 만드는 당신만의 책, 당신이 읽고 싶은 책, 당신이 쓰고 싶은 책, 이 모든걸 땅콩북스가 후원합니다.
</div>
<div></div>
</div>
<div class="col-md-8">
<img src="/resources/img/main-book1.png" alt="">
</div>
</div>
</section>
</div>
<section class="container" id="section2">
<div id="section2-title">
땅콩북스에서 준비한 <br> 땅콩북스만의 오리지널 시리즈를 만나보세요
</div>
</section>
<div class="book-cover-area" id="book-cover-area1">
</div>
<div class="book-cover-area" id="book-cover-area2">
</div>
<div class="book-cover-area" id="book-cover-area3">
</div>
<section id="faq">
<div class="question-area container">
<div id="faq-title">자주 묻는 질문</div>
<div class="accordion rounded" id="accordionExample">
<div class="accordion-item rounded ">
<h2 class="accordion-header rounded" id="headingOne">
<button class="accordion-button rounded collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-controls="collapseOne">
정말로 책을 무료로 볼 수 있나요?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse rounded" aria-labelledby="headingOne">
<div class="accordion-body">
<b>땅콩북스의 도서는 대부분 무료입니다<br></b>
다만 땅콩북스에서 직접 도서를 작성하시는 작가님들의 작품의 경우 <br>
작가님의 의사에 따라 유/무료 여부가 결정됩니다<br>
</div>
</div>
</div>
<div class="accordion-item rounded">
<h2 class="accordion-header rounded" id="headingTwo">
<button class="accordion-button rounded collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
구독하면 어떤 혜택이 있나요?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse rounded" aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>땅콩 북스의 도서를 유 무료 가리지 않고 전부 무료로 열람 할수 있습니다.</strong>
<br>땅콩북스의 모든 도서를 구독기간동안 자유롭게 열람하세요!
</div>
</div>
</div>
<div class="accordion-item rounded">
<h2 class="accordion-header rounded" id="headingThree">
<button class="accordion-button collapsed rounded" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
외국어 책은 어떻게 읽나요?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse rounded"
aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body rounded">
<strong>번역기를 지원합니다</strong> <br>
땅콩북스는 저작권이 만료된 도서를 자유롭게 열람 하실수 있도록 지원하고 있습니다<br>
다만 번역에도 저작권이 있기때문에 원어로 책을 지원하고 있습니다.<br>
회원님들께서 편리하게 읽으실수 있도록 번역기를 지원해 독서를 돕고 있습니다
</div>
</div>
</div>
</div>
</div>
</section>
</main>- 이 문서에서 문단의 제목만을 아래에서 위로 나타나게 하는 애니메이션을 주었다.
@keyframes ontext{
0%{
opacity: 0%;
transform: translateY(1.5rem);
}
100%{
opacity: 100%;
transform: translateY(0rem);
}
}
@keyframes Rontext{
0%{
opacity: 100%;
transform: translateY(1.5rem);
}
100%{
opacity: 0%;
transform: translateY(0rem);
}
}
- opacity로 투명도를 조절하고 transform을 활용해 위치를 움직였다. 아래에서 위로 나타나고 위에서 아래로 사라진다.
- 움직이고 싶은 태그의 id선택자를 활용해 자바스크립트로 해당애니메이션을 연결해주었다.
window.addEventListener('scroll', function () {
if (matchMedia("screen and (max-width: 500px)").matches) {
if (window.scrollY > 150) {
document.querySelector('#main-text').style.animation = 'Rontext 0.3s ease-out forwards';
}
if (window.scrollY < 150) {
document.querySelector('#main-text').style.animation = 'ontext 0.3s ease-out forwards';
}
if (window.scrollY < 300 || window.scrollY > 700) {
document.querySelector('#section2-title').style.animation = 'Rontext 0.3s ease-out forwards';
}
if (window.scrollY > 300 && window.scrollY < 700) {
document.querySelector('#section2-title').style.animation = 'ontext 0.3s ease-out forwards';
}
if (window.scrollY < 900) {
document.querySelector('#faq-title').style.animation = 'Rontext 0.3s ease-out forwards';
}
if (window.scrollY > 900) {
document.querySelector('#faq-title').style.animation = 'ontext 0.3s ease-out forwards';
}
} else {
if (window.scrollY > 200) {
document.querySelector('#main-text').style.animation = 'Rontext 0.3s ease-out forwards';
}
if (window.scrollY < 200) {
document.querySelector('#main-text').style.animation = 'ontext 0.3s ease-out forwards';
}
if (window.scrollY < 300 || window.scrollY > 600) {
document.querySelector('#section2-title').style.animation = 'Rontext 0.3s ease-out forwards';
}
if (window.scrollY > 300 && window.scrollY < 600) {
document.querySelector('#section2-title').style.animation = 'ontext 0.3s ease-out forwards';
}
if (window.scrollY < 1250) {
document.querySelector('#faq-title').style.animation = 'Rontext 0.3s ease-out forwards';
}
if (window.scrollY > 1250) {
document.querySelector('#faq-title').style.animation = 'ontext 0.3s ease-out forwards';
}
}
})window.addEventListener('scroll', function (){})을 활용해 scrolle이 움직이면 실행되는 함수를 만들어주었다.if (window.scrollY > 150)를 활용해 scrollY의 값에 따라 해당 애니메이션이 실행되도록document.querySelector('선택자').style.animation = 'Rontext 0.3s ease-out forwards';로 해당 선택자에 애니메이션을 연결해주었다.- 반응형에도 대응하기 위해
matchMedia("screen and (max-width: 500px)").matches를 사용해 화면 크기가 500px이하가 되면 그 크기에 맞는 스크롤 값으로 애니메이션이 실행되도록 하였다.
배경이 흘러가는 애니메이션
<div class="book-cover-area" id="book-cover-area1">
</div>
<div class="book-cover-area" id="book-cover-area2">
</div>
<div class="book-cover-area" id="book-cover-area3">
</div>
- 배경이 흘러갈 영역을 div로 지정해주었다.
#book-cover-area1{
background-image: url('/resources/img/main-book-cover/cover1.png');
background-size: 80%;
background-repeat: repeat-x;
height: 17rem;
animation: moveImg 50s normal linear infinite;
}
#book-cover-area2{
background-image: url('/resources/img/main-book-cover/cover2.png');
background-size: 80%;
background-repeat: repeat-x;
height: 17rem;
animation: moveImg 50s reverse linear infinite;
}
#book-cover-area3{
background-image: url('/resources/img/main-book-cover/cover3.png');
background-size: 80%;
background-repeat: repeat-x;
height: 17rem;
animation: moveImg 50s normal linear infinite;
}
@keyframes moveImg{
0%{
background-position: 0px center;
}
100%{
background-position: -400% center;
}
}- 배경이 흘러갈 크기의 영역을 지정하고 애니메이션을 연결하였다.
- 중간에 흘러갈 배경은 애니메이션을 reverse 설정하여 반대로 흘러가도록 하였다.
- infinite로 무한대로 반복되도록 하였다.
- 애니메이션은 background-position을 이용하여 움직임을 주었다, 배경그림이 넓기때문에 400%로 넉넉하게 주어야 한 화면을 꽉차게 흘러갔다.
메뉴 누를때마다 아이콘 변경하기
<div class="col-md-4 col-7" id="header-menu-icon">
<img src="/resources/img/header/icons8-search (2).png" alt="" id="search-icon">
<img src="/resources/img/header/icons8-book (3).png" alt="" id="book-icon">
<img src="/resources/img/header/icons8-peanut-48 (6).png" alt="" id="p-icon">
<img src="/resources/img/header/icons8-user.png" alt="" id="user-icon">
<!--관리자 체크해서 나타남
<img src="../header/header/icons8-monarch-48.png" alt="" id="admin-icon" style="display:;">
-->
</div>- 해당아이콘을 누를때마다 아이콘 색이 변경하도록 만들고 싶었다.
- 적절한 웹폰트를 쓰면 아이콘 색을 바꿀수있지만 내가 사용하는것은 되지 않아서 이미지 파일을 통째로 교체하기로 했다.
user.onclick = function () {
if (mypage.style.display == 'none') {
mypage.style.animation = 'fade-in 0.3s ease-out forwards'
mypage.style.display = 'block';
menubar.style.display = 'none';
point.style.display = 'none';
adminPage.style.display = 'none';
document.querySelector('#user-icon').src = '/resources/img/header/icons8-user-yellow.png';
document.querySelector('#p-icon').src = '/resources/img/header/icons8-peanut-48 (6).png';
document.querySelector('#admin-icon').src = '/resources/img/header/icons8-monarch-48.png';
} else {
mypage.style.animation = 'fade-out 1s'
mypage.style.display = 'none';
document.querySelector('#user-icon').src = '/resources/img/header/icons8-user.png';
}
}- 선택자를 변수로 정의한뒤 해당 선택자를 누르면 그림이 변경되도록하였다.
user.onclick = function (){}
- 아이콘의 이미지가 변경할수있도록 주소를 새로 입력하였다.
document.querySelector('#user-icon').src = '/resources/img/header/icons8-user-yellow.png';
- 아이콘을 다시 누르면 원래 색으로 돌아올수 있도록하였다.
document.querySelector('#user-icon').src = '/resources/img/header/icons8-user.png';
hello world