Parallax Scrolling Alfa

by surfine

HTML

<div class="bg">
    <img class="avatar" src="https://docs.google.com/uc?id=0B8xn7P4bqdF5Q2pGeUZhUlhJZEU" />
    <div class="circle c1"></div>
    <div class="circle c2"></div>
    <div class="circle c3"></div>
    <div class="debug">
        <i></i>/<i></i>/<i></i> - <i></i><i></i>
    </div>

CSS

body,
html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: Arial, Halvetica, sans-sarif;
}

.bg {
    height: 300%;
}

.avatar {
    position: fixed;
    top: 50px;
    left: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, 0);
    z-index: 1;
}

.circle {
    position: fixed;
    top: 50px;
    left: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, 0);
    background: #00BCD4;
    border-radius: 50%;
}

.center {
    position: fixed;
    width: 80%;
    margin: 0 10%;
    text-align: center;
}

.cs {
    height: 50px;
    width: 50px;
}

.debug {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

i {
    margin: 0 3px;
}

h1,
h2,
h3 {
    font-weight: normal;
}

JavaScript

var lastScrollTop = 0;
var dir = 'down';
var pagenum = $('.section').length;
var x = 0;
var animating = false;

$(window).on("mousewheel", function(event) {

    var st = $(window).scrollTop();

    if (event.originalEvent.wheelDelta <= 0) {
        dir = 'down';
    } else {
        dir = 'up';
    }

    if (dir === "down") {
        if ($(".avatar").width() < 300) {
            var el = $(".avatar");
            var c3 = $(".c3");
            el.height("+=10");
            el.width("+=10");
            el.css("left", "+=10");
            c3.height("+=5");
            c3.width("+=5");
            c3.css("left", "+=5");
        }
    }

    if (dir === "up") {
        if ($(".avatar").width() > 100) {
            var el = $(".avatar");
            var c3 = $(".c3");
            el.height("-=10");
            el.width("-=10");
            el.css("left", "-=10");
            c3.height("-=5");
            c3.width("-=5");
            c3.css("left", "-=5");
        }
    }

    lastScrollTop = st;

    $("i").eq(2).html($(".avatar").width());
    $("i").eq(3).html(dir);
    $("i").eq(4).html(st);

});