History Slides

by NesterOne

HTML

<script src="http://cdn.craig.is/js/mousetrap/mousetrap.min.js?9d308"></script>
<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" class='full-screen-frame' style='left:-4000px;' src="http://web.archive.org/web/20010926112830/http://pravda.com.ua/">Your browser doesn't support IFrames 3</iframe>
<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" class='full-screen-frame' style='left:-2000px;' src="http://web.archive.org/web/20060714050838/http://www.pravda.com.ua/">Your browser doesn't support IFrames 2</iframe>
<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" class='full-screen-frame' style='left:0px;' src="http://www.pravda.com.ua">Your browser doesn't support IFrames 1</iframe>

CSS

.full-screen-frame {
    position:fixed;
    top:0px;
    bottom:0px;
    right:0px;
    width:100%;
    height:100%;
    border:none;
    margin:0;
    padding:0;
    overflow:hidden;
    z-index:1;
}

JavaScript

console.log("aaaaa");
(function () {

    var delta = 2000, //px
        time = 2000; //ms

    function move($frames, direction) {

        var sign = 1;

        if (direction == 'left') {
            sign = -1;
        }

        $.each($frames, function (index, frame) {

            var left = parseInt($(frame).css('left')
                                .replace('px', ''));

            $(frame).animate({
                left: left + sign * delta
            }, time);

        });

    }

    function goToPast() {
        move($(".full-screen-frame"), 'right');
    }

    function backToFuture() {
        move($(".full-screen-frame"), 'left');
    }

    function enableKeyboard() {
        Mousetrap.bind('left', goToPast);
        Mousetrap.bind('right', backToFuture);
    }

    enableKeyboard();

})();