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