iiic/page-slider.html

## page-slider.html
<!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>

## text-page.html
<!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>
	<!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>