mirror of
https://github.com/ivabus/www
synced 2024-11-25 13:35:07 +03:00
#177 Nebraska-Man strip show scrollable view on mobile
This commit is contained in:
parent
2907cfa4e0
commit
fc4a93a26c
2 changed files with 103 additions and 80 deletions
|
@ -30,74 +30,88 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.wrapper {
|
.wrapper {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 90%;
|
height: 90%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: 5%;
|
margin: 5%;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aspect {
|
.aspect {
|
||||||
padding-bottom: 70%;
|
padding-bottom: 70%;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aspect-inner {
|
.aspect-inner {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flipbook {
|
.flipbook {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
transition: margin-left 0.25s ease-out;
|
transition: margin-left 0.25s ease-out;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
-webkit-touch-callout: none;
|
-webkit-touch-callout: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-khtml-user-select: none;
|
-khtml-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flipbook .page {
|
.flipbook .page {
|
||||||
height: 100%;
|
width: 100%;
|
||||||
width: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flipbook .page img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .flipbook.desktop .page {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.flipbook.desktop .page img {
|
||||||
|
height: 100%;
|
||||||
|
} */
|
||||||
|
|
||||||
|
#comicstrip #desktop_view {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#comistrip #flipbook_mobile {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#comicstrip.desktop #desktop_view {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
#comicstrip.desktop #flipbook_mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.flipbook .page img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<section class="nb-man-latest">
|
<section class="nb-man-latest">
|
||||||
<div class="container">
|
<div class="container" id="comicstrip">
|
||||||
<div class="row">
|
<div class="row" id="desktop_view">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<div class="aspect">
|
<div class="aspect">
|
||||||
<div class="aspect-inner">
|
<div class="aspect-inner">
|
||||||
<div class="flipbook" id="flipbook">
|
{{- partial "nebraska-man-001.html" "flipbook_desktop" -}}
|
||||||
<div class="page"><img src="/Images/nb-man-cover-one.jpg" draggable="false" alt="" /></div>
|
|
||||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_01.jpg" draggable="false" alt="" /></div>
|
|
||||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_02.jpg" draggable="false" alt="" /></div>
|
|
||||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_03.jpg" draggable="false" alt="" /></div>
|
|
||||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_04.jpg" draggable="false" alt="" /></div>
|
|
||||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_05.jpg" draggable="false" alt="" /></div>
|
|
||||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_06.jpg" draggable="false" alt="" /></div>
|
|
||||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_07.jpg" draggable="false" alt="" /></div>
|
|
||||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_08.jpg" draggable="false" alt="" /></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{{- partial "nebraska-man-001.html" "flipbook_mobile" -}}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
@ -187,45 +201,43 @@
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
function loadApp() {
|
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||||
|
|
||||||
// Create the flipbook
|
|
||||||
|
|
||||||
$('.flipbook').turn({
|
|
||||||
|
|
||||||
|
function loadApp() {
|
||||||
|
// Create the flipbook
|
||||||
|
$('.flipbook').turn({
|
||||||
// Enable gradients
|
// Enable gradients
|
||||||
|
|
||||||
gradients: true,
|
gradients: true,
|
||||||
|
|
||||||
// Auto center this flipbook
|
// Auto center this flipbook
|
||||||
|
|
||||||
autoCenter: true
|
autoCenter: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
});
|
if (!isMobile) {
|
||||||
}
|
const comicstripEl = document.getElementById('comicstrip');
|
||||||
|
comicstripEl.classList.add('desktop');
|
||||||
|
|
||||||
// Load the HTML4 version if there's not CSS transform
|
const flipbookEL = document.getElementById('flipbook_desktop');
|
||||||
|
|
||||||
yepnope({
|
// Load the HTML4 version if there's not CSS transform
|
||||||
test : Modernizr.csstransforms,
|
yepnope({
|
||||||
yep: ['/js/turn.js'],
|
test : Modernizr.csstransforms,
|
||||||
nope: ['/js/turn.html4.min.js'],
|
yep: ['/js/turn.js'],
|
||||||
both: ['/css/basic.css'],
|
nope: ['/js/turn.html4.min.js'],
|
||||||
complete: loadApp
|
both: ['/css/basic.css'],
|
||||||
});
|
complete: loadApp
|
||||||
|
});
|
||||||
|
|
||||||
var flipbookEL = document.getElementById('flipbook');
|
window.addEventListener('resize', function (e) {
|
||||||
|
flipbookEL.style.width = '';
|
||||||
window.addEventListener('resize', function (e) {
|
flipbookEL.style.height = '';
|
||||||
flipbookEL.style.width = '';
|
$(flipbookEL).turn('size', flipbookEL.clientWidth, flipbookEL.clientHeight);
|
||||||
flipbookEL.style.height = '';
|
});
|
||||||
$(flipbookEL).turn('size', flipbookEL.clientWidth, flipbookEL.clientHeight);
|
|
||||||
});
|
|
||||||
|
|
||||||
$(flipbookEL).turn({
|
|
||||||
autoCenter: true
|
|
||||||
});
|
|
||||||
|
|
||||||
|
$(flipbookEL).turn({
|
||||||
|
autoCenter: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
11
src/layouts/partials/nebraska-man-001.html
Normal file
11
src/layouts/partials/nebraska-man-001.html
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
<div class="flipbook" id="{{- . -}}">
|
||||||
|
<div class="page"><img src="/Images/nb-man-cover-one.jpg" draggable="false" alt="" /></div>
|
||||||
|
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_01.jpg" draggable="false" alt="" /></div>
|
||||||
|
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_02.jpg" draggable="false" alt="" /></div>
|
||||||
|
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_03.jpg" draggable="false" alt="" /></div>
|
||||||
|
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_04.jpg" draggable="false" alt="" /></div>
|
||||||
|
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_05.jpg" draggable="false" alt="" /></div>
|
||||||
|
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_06.jpg" draggable="false" alt="" /></div>
|
||||||
|
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_07.jpg" draggable="false" alt="" /></div>
|
||||||
|
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_08.jpg" draggable="false" alt="" /></div>
|
||||||
|
</div>
|
Loading…
Reference in a new issue