BookBlock 플러그인 사용법 질문 채택완료
다운로드 : https://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/
데모 : https://tympanus.net/Development/BookBlock/index4.html
데모 스크린샷 1)
[설명] 책넘기는 플러그인 데모4 버전입니다. PC에서는 좌우 2장으로 분리되어있습니다.
http://sir.kr/data/editor/2410/237506203_1728520519.9071.jpg" width="100%" />
데모 스크린샷 2)
[설명] 브라우저 사이즈를 모바일크기로 줄였을때도 좌우로 분리되어있습니다.
http://sir.kr/data/editor/2410/237506203_1728520631.7596.jpg" width="100%" />
질문) PC에서는 책처럼 좌우 각 1장씩 보이되, 모바일에서는 1장씩만 보이게 할수있는 방법은 없을까요.
답변 2개
※ 책 넘김 플러그인
> 설정을 조정하여 화면 크기별로 페이지 수를 다르게 설정할 수 있는 옵션이 있습니다.
> 플러그인 매뉴얼이나 공식 문서를 참고하여 미디어 쿼리 관련 설정을 할 수 있습니다.
※ 참고 하여 보실레요? ~~
!. JavaScript를 사용
</p>
<p>window.addEventListener('resize', function () {
const flipbook = document.querySelector('.flipbook');</p>
<p> if (window.innerWidth <= 768) {
flipbook.classList.add('single-page');
} else {
flipbook.classList.remove('single-page');
}
});
document.addEventListener('DOMContentLoaded', function () {
const flipbook = document.querySelector('.flipbook');</p>
<p> if (window.innerWidth <= 768) {
flipbook.classList.add('single-page');
}
});</p>
<p>
!. CSS 미디어 쿼리를 사용
.flipbook .page {
width: 50%;
float: left;
}
@media (max-width: 768px) {
.flipbook .page {
width: 100%;
float: none;
}
}</p>
<p>>>> 책 넘김 플러그인에서
div 요소나 관련 클래스를 사용하여 페이지를 분리하는 방식으로,
모바일 크기에서는 한 페이지만 표시하도록 설정합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인