Plane Wings

by fezec

HTML

<section id="parent"></section>
        <div id="child"></div>
        <div id="childB"></div>
        <div id="childC"></div>

CSS

#child {
                height: 150px;
                background: red;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSEdg7eHB_K9fmE72yCluu7GRZLcjn5fAEC_eOybttFRi58fu2jhw") no-repeat center center;
            }
            #parent {
                height: 4000px;
                background: blue;
                width: 100%;
            }

            #childB, #childC {
                height: 100px;
                width: 100px;
                position: absolute;
                left: -100px;
                background: teal;
            }

            #childC {
                background: yellow;
                left: -100px;
            }

JavaScript

var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            var center = h * .5 - 75;
            $(window).bind("scroll", update);
            var wings = $("#child");
            var l = $("#childB");
            var r = $("#childC");
            function update() {
                var currentYpos = $(this).scrollTop();
                if (currentYpos < 500) {
                    wings.css("top", h + currentYpos + "px");
                } else if (currentYpos > 500 && currentYpos < 1000) {
                    var percent = ((1000 - currentYpos) / 500);
                    wings.css("top", currentYpos + center + center * percent + "px");
                } else if (currentYpos > 1000 && currentYpos < 3000) {

                    if (currentYpos < 1600&& 1100) {
                        l.css("top", center + currentYpos + "px");
                        l.css("left", window.innerWidth * (1 - (1600 - currentYpos) / 500) + "px");
                    }
                    if (currentYpos > 1700 && currentYpos < 2300) {
                        r.css("top", center + currentYpos + "px");
                        r.css("left", window.innerWidth * (2300 - currentYpos) / 600 + "px");
                    }

                    wings.css("top", center + currentYpos + "px");
                } else {
                    //roll up
                }
            }