comic image scroll/rotate

by oceog

HTML

<div class="scrollme"></div>
<div class="scrollme" style="left: 50%;top: 10%"></div>
<div class="scrollme_turned" style="left: 0%;top: 0%; width: 30%;height: 30%;"></div>
<div id="long_one"></div>

CSS

.scrollme,.scrollme_turned{
    position: fixed;
    width: 50%;
    height: 50%;
    background-image: url('http://suhaimiramly.files.wordpress.com/2011/12/binoculars.jpg');
    background-size: 100%;
    background-position: 0px 100%;
    background-repeat: no-repeat;
   /* -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    -o-transition: background-position 1s;*/
    z-index: -1;
}
.scrollme.turned {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    border-radius: 50%;
}
#long_one span {
    background: white;
    display: inline-block;
    margin: 40px;
    opacity: 0.7;
}

JavaScript

$(function () {
    var to;
    $(document).scroll(function () {
        clearTimeout(to);
        to=setTimeout(calc,10);
    });
    $(window).resize(function () {
        calc();
    });
    var text = "";
    for (var i = 0; i < 900; i++) {
        text += "<span>" + i + "</span>";
    }
    var $scmt = $('.scrollme_turned'),
        $scm = $('.scrollme'),
        $w = $(window),
        $t = $(document);

    $("#long_one").html(text);

    function calc() {
        var percent = (100 - Math.floor(100 / ($t.height() - $w.height()) * $t.scrollTop())),
            newang = 'rotate(' + Math.floor(720 / ($t.height() - $w.height()) * $t.scrollTop()) + 'deg)';
        $scmt.css('transform', newang);
        $scmt.css('border-radius', percent + '%');
        $scmt.css({
            width: (100 - percent) + '%',
            height: (100 - percent) + '%'
        });
        //console.log($t.scrollTop(), percent);
        $scm.css('background-position', '0px ' + percent + '%');
        $scmt.css('background-position', '0px ' + (100 - percent) + '%');
    }
    $t.scrollTop(Math.round($t.height() / 2) - $w.height() / 2.1);
    calc();

});