Last active
October 17, 2019 12:39
-
-
Save iiic/21e7d019051545756de5bb2e98b2f2f0 to your computer and use it in GitHub Desktop.
stránka pro posouvání obrázků
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<script> | |
if ( !window.location.hash ) | |
{ | |
window.location.hash = 'jedna'; | |
} | |
</script> | |
<style> | |
html, | |
body { | |
margin: 0; | |
padding: 0; | |
} | |
main section { | |
height: 100vh; | |
width: 100vw; | |
font-size: 12em; | |
} | |
main section.js { | |
position: absolute; | |
margin-top: -100vh; | |
opacity: 0; | |
transition: margin 0.2s, opacity 1s; | |
} | |
main section:nth-child(1) { | |
background: gray; | |
} | |
main section:nth-child(2) { | |
background: red; | |
} | |
main section:nth-child(3) { | |
background: green; | |
} | |
main section:nth-child(4) { | |
background: blue; | |
} | |
main section:target { | |
margin-top: 0; | |
opacity: 1; | |
} | |
/* | |
main section:not(:target):first-child { | |
display: block; | |
} | |
*/ | |
</style> | |
</head> | |
<body> | |
<main> | |
<section id="jedna"> | |
1 | |
</section> | |
<section id="dva"> | |
2 | |
</section> | |
<section id="tri"> | |
3 | |
</section> | |
<section id="ctyri"> | |
4 | |
</section> | |
<section id="pet"> | |
5 | |
</section> | |
</main> | |
<script> | |
'use strict'; | |
const MIN_SCROLL_TIME = 250; // in ms | |
const JS_WORKING_ONLY_CLASSNAME = 'js'; | |
const UP_ARROW_CODE = 38; | |
const DOWN_ARROW_CODE = 40; | |
const slideIds = []; | |
[ ...document.getElementsByTagName( 'main' )[ 0 ].children ].forEach( ( /** @type {HTMLElement} */ item ) => { | |
item.classList.add( JS_WORKING_ONLY_CLASSNAME ); | |
slideIds.push( item.id ); | |
} ); | |
const slide = ( /** @type {Number} */ direction ) => { | |
const currentPosition = slideIds.indexOf( window.location.hash.substr( 1 ) ); | |
const newPosition = currentPosition + direction; | |
if ( newPosition >= 0 && newPosition < slideIds.length ) | |
{ | |
window.location.hash = slideIds[ newPosition ]; | |
} | |
return true; | |
} | |
document.addEventListener( 'keydown', ( /** @type {KeyboardEvent} */ event ) => { | |
if ( event.keyCode === UP_ARROW_CODE ) | |
{ | |
slide( -1 ); | |
} else if ( event.keyCode === DOWN_ARROW_CODE ) | |
{ | |
slide( +1 ); | |
} | |
}, false ) | |
document.addEventListener( 'wheel', ( /** @type {WheelEvent} */ event ) => { | |
if ( !this.prevTimeStamp ) | |
{ | |
this.prevTimeStamp = 0; | |
} | |
if ( ( event.timeStamp - this.prevTimeStamp ) > MIN_SCROLL_TIME ) | |
{ | |
slide( ( event.deltaY < 0 ) ? -1 : +1 ); | |
} | |
this.prevTimeStamp = event.timeStamp; | |
}, false ); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<style> | |
* { | |
box-sizing: border-box; | |
} | |
html, | |
body { | |
margin: 0; | |
padding: 0; | |
text-align: center; | |
} | |
main { | |
position: relative; | |
overflow-x: hidden; | |
max-width: 100vw; | |
min-height: 100vh; | |
z-index: 1; | |
} | |
main section { | |
height: 100vh; | |
width: 100%; | |
} | |
main section.js { | |
position: absolute; | |
margin-top: -100vh; | |
transition: margin 1s; | |
} | |
main section:target { | |
margin-top: 0; | |
transition: margin 2s; | |
} | |
body>footer { | |
color: white; | |
background: black; | |
padding-top: 3em; | |
min-height: 12em; | |
} | |
body>footer.js[hidden] { | |
position: fixed; | |
width: 100%; | |
max-width: 100vw; | |
bottom: -calc(3em + 12em); | |
} | |
body>footer.js { | |
position: static; | |
} | |
body>header { | |
min-height: 500px; | |
max-width: 100vw; | |
width: 100%; | |
overflow: hidden; | |
background: #eee; | |
} | |
body>header::before { | |
content: ''; | |
position: absolute; | |
display: block; | |
height: 500px; | |
width: 120vw; | |
margin-left: -10vw; | |
bottom: -220px; | |
background: white; | |
transform: rotate(3deg); | |
} | |
.★ { | |
margin: auto; | |
max-width: 900px; | |
text-align: left; | |
padding: 1em 2em; | |
} | |
main h1 { | |
text-align: left; | |
margin-top: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<header> | |
<div role="heading" class="★"> | |
hlavička | |
</div> | |
</header> | |
<main> | |
<article class="★"> | |
<header> | |
<h1>Nadpis článku</h1> | |
</header> | |
<section> | |
<p>Novinky: patička a odsazení</p> | |
</section> | |
</article> | |
</main> | |
<footer> | |
<div class="★"> | |
patička | |
</div> | |
</footer> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment