felixebert/scrollytelling.html

## scrollytelling.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <style type="text/css">
        body, html {
            margin: 0;
            padding: 0;
            background: transparent;
        }

        .box {
            width: 100%;
            height: 100vh;
            background-size: cover;
            background-position: 50% 50%;
            position: fixed;
            top: 0;
            left: 0;
            opacity: 0;
            z-index: -1;
        }

        .box-placeholder {
            position: relative;
            height: 600vh; /*bestimmt den widerstand*/
            background: transparent;
            font-size: 30px;
            color: red;
            padding-left: 2em;
            box-sizing: content-box;
        }

        .inner-text {
            position: absolute;
        }
    </style>

    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
</head>
<body>

<div class="boxes">
    <div class="box"
         style="background-image: url('http://graphics.wsj.com/hostage/img/bunker16x9/1.jpg');opacity:1;"></div>
    <div class="box"
         style="background-image: url('http://graphics.wsj.com/hostage/img/bunker16x9/2.jpg');"></div>
    <div class="box"
         style="background-image: url('http://graphics.wsj.com/hostage/img/bunker16x9/3.jpg');"></div>
    <div class="box"
         style="background-image: url('http://graphics.wsj.com/hostage/img/bunker16x9/4.jpg');"></div>
    <div class="box"
         style="background-image: url('http://graphics.wsj.com/hostage/img/bunker16x9/5.jpg');"></div>
    <div class="box"
         style="background-image: url('http://graphics.wsj.com/hostage/img/bunker16x9/6.jpg');"></div>
</div>

<div class="box-placeholder">
    <div class="inner-text" style="top: 100vh;">Text über Bild</div>
    <div class="inner-text" style="top: 300vh;">2. Text über Bild</div>
</div>


<script>
    $(function () {
        var dimensions = {}, elements = [];

        var onResize = function () {
            dimensions.windowHeight = $(window).height();
            dimensions.boxHeight = $('.box-placeholder').height();
            dimensions.boxOffsetTop = $('.box-placeholder').offset().top;
        };
        $(window).resize(onResize);

        $(document).on('ready', function () {
            $('.box').each(function (index, box) {
                if (index === 0) return true;
                elements.push(box);
            });
            onResize();
        });

        document.addEventListener('scroll', function () {
            var scrollPosition = window.scrollY - dimensions.boxOffsetTop;
            if (scrollPosition < 0) return true;
            var division = scrollPosition / (dimensions.boxHeight / (elements.length + 1));
            var currentIndex = Math.floor(division);
            var rest = division - currentIndex;
            // TODO don't update all elements on every call
            for (var i = 0; i < currentIndex; i++) {
                elements[i].style.opacity = 1;
            }
            elements[currentIndex].style.opacity = rest;
            for (var i = currentIndex + 1; i < elements.length; i++) {
                elements[i].style.opacity = 0;
            }
        });
    });
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Test</title>

	<style type="text/css">
	body, html {
	margin: 0;
	padding: 0;
	background: transparent;
	}

	.box {
	width: 100%;
	height: 100vh;
	background-size: cover;
	background-position: 50% 50%;
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	z-index: -1;
	}

	.box-placeholder {
	position: relative;
	height: 600vh; /bestimmt den widerstand/
	background: transparent;
	font-size: 30px;
	color: red;
	padding-left: 2em;
	box-sizing: content-box;
	}

	.inner-text {
	position: absolute;
	}
	</style>

	<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
	</head>
	<body>

	<div class="boxes">
	<div class="box"
	style="background-image: url('http://graphics.wsj.com/hostage/img/bunker16x9/1.jpg');opacity:1;"></div>
	<div class="box"
	style="background-image: url('http://graphics.wsj.com/hostage/img/bunker16x9/2.jpg');"></div>
	<div class="box"
	style="background-image: url('http://graphics.wsj.com/hostage/img/bunker16x9/3.jpg');"></div>
	<div class="box"
	style="background-image: url('http://graphics.wsj.com/hostage/img/bunker16x9/4.jpg');"></div>
	<div class="box"
	style="background-image: url('http://graphics.wsj.com/hostage/img/bunker16x9/5.jpg');"></div>
	<div class="box"
	style="background-image: url('http://graphics.wsj.com/hostage/img/bunker16x9/6.jpg');"></div>
	</div>

	<div class="box-placeholder">
	<div class="inner-text" style="top: 100vh;">Text über Bild</div>
	<div class="inner-text" style="top: 300vh;">2. Text über Bild</div>
	</div>


	<script>
	$(function () {
	var dimensions = {}, elements = [];

	var onResize = function () {
	dimensions.windowHeight = $(window).height();
	dimensions.boxHeight = $('.box-placeholder').height();
	dimensions.boxOffsetTop = $('.box-placeholder').offset().top;
	};
	$(window).resize(onResize);

	$(document).on('ready', function () {
	$('.box').each(function (index, box) {
	if (index === 0) return true;
	elements.push(box);
	});
	onResize();
	});

	document.addEventListener('scroll', function () {
	var scrollPosition = window.scrollY - dimensions.boxOffsetTop;
	if (scrollPosition < 0) return true;
	var division = scrollPosition / (dimensions.boxHeight / (elements.length + 1));
	var currentIndex = Math.floor(division);
	var rest = division - currentIndex;
	// TODO don't update all elements on every call
	for (var i = 0; i < currentIndex; i++) {
	elements[i].style.opacity = 1;
	}
	elements[currentIndex].style.opacity = rest;
	for (var i = currentIndex + 1; i < elements.length; i++) {
	elements[i].style.opacity = 0;
	}
	});
	});
	</script>

	</body>
	</html>