Animate wrapper - Moveins & parallax - Single Page Site - Scene Changer

Scroll Parallax/ Mouse Parallax/ Animated Flyins etc

by Ben Clayton

HTML

<div class="all-scene-wrapper">
    <div id="dbgmess" ></div>
    <div class="slow aobject1"></div>
</div>
<div class="scene-wrapper scene1">
    <div class="slow box object1"></div>
    <div class="slow box object2"></div>
    <div class="fast object3">Loading...</div>
</div>
<div class="scene-wrapper scene2">
    <div class="slow box object1"></div>
    <div class="slow box object2"></div>
</div>
<div class="scene-wrapper scene3">
    <div class="slow box object1"></div>
    <div class="slow box object2"></div>
</div>
<div class="scene-wrapper scene4">
    <div class="slow object1">HELLO</div>
</div>
<div class="scene-wrapper scene5">
        <div class="box slow object1"></div>
</div>
<div class="scene-wrapper scene6">
    <div class="slow box object1"></div>
</div>
<div class="scene-wrapper scene7">
    <div class="z1 abox plx_scroll object1" data-z=1>1</div>
    <div class="z3 abox plx_scroll fast object2" data-z=3>3</div>
    <div class="z5 abox plx_scroll fast object3" data-z=5>5</div>
    <div class="z7 abox plx_scroll fast object4" data-z=7>7</div>
</div>
<div class="scene-wrapper scene8">
    <div class="z1 abox plx_mouse object1" data-z=1>1</div>
    <div class="z2 arialp"></div>
    <div class="z3 abox plx_mouse  object2" data-z=3>3</div>
     <div class="z4 arialp"></div>
   <div class="z5 abox plx_mouse  object3" data-z=5>5</div>
    <div class="z6 arialp"></div>
    <div class="z7 abox plx_mouse  object4" data-z=7>scene 8 L7</div>
    </div>
<div class="scene-wrapper scene9"></div>

CSS

body {padding:0;margin:0;}
.scene-wrapper {
    border:1px solid red;
    width:200px;
    height:200px;
    border-radius:20px;
    position:relative;
    overflow:hidden;
}

/* show which scene is active for debugging */
.scene-wrapper.scene-active {
     background-color:#FFF8F8;
}

.chg-scene {
    position:absolute;
    bottom:10px;
    left:40%;
}

.first-scene {
    position:absolute;
    bottom:10px;
    left:50%;
}

.box {
    position:absolute;
    width:30%;
    height:46%;
    border:2px solid green;
}

.slow   {
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}
.fast {
transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 0.5s ease-in-out; /** Firefox **/
    -o-transition: all 0.5s ease-in-out; /** Opera **/
}

/* --------- all scene -----------------*/

.all-scene-wrapper #dbgmess {
    position:fixed;
    top:4px;
    right:10px;
    width:130px;
    height:14px;
    background-color:#DDDDDD;
    border-radius:20px;
    padding:6px;
    text-align:center;
    z-index:3;
}
.all-scene-wrapper .aobject1 {
    position:fixed;
    width:10%;
    height:10%;
    border:2px solid black;
    top:-100%;
    left:80%;
    z-index:3;
}
.all-scene-wrapper.scene1 .aobject1 {
    top:10%;
}
.all-scene-wrapper.scene2 .aobject1 {
    top:20%;
}
.all-scene-wrapper.scene3 .aobject1 {
    top:30%;
    opacity:0.1;
}
.all-scene-wrapper.scene4 .aobject1 {
    top:30%;
    transform:rotate(360);
}


/* --------- scene 1 -----------------*/
.scene1 .object1 {
    top:10%;
    left:-30%;
    opacity:0.2;
}
.scene1.scene-active .object1 {
    left:20%;
    opacity:1;
} 

.scene1 .object2 {
    top:50%;
    right:-30%;
    opacity:0.2;
}
.scene1.scene-active .object2 {
    right:20%;
    opacity:1;
} 
.scene1 .object3 {
  ...

JavaScript

var band=30;// scroll amount px into next scene before active changes
var scroll_speed = 3000; // 

var w=$(window).width();
var h=$(window).height();
console.log("w:",w," h:",h);

$('.scene-wrapper').width(w-8); // allow for border and scrollbar
$('.scene-wrapper').height(h-2);// allow for 1px border

setTimeout(function(){
    wscroll();
},2000);

$('.scene-wrapper').each(function(idx){
    $(this).append("<button class='fast but chg-scene' data-idx="+(idx+1)+">Next</button><button class='fast but first-scene' data-idx=1>Rewind</button>");
});

$(".but").on('click',function(){
    var t = $(this).data('idx')*h;
    $("html, body").animate({ scrollTop:t },scroll_speed);
});

var old_st=0;

function wscroll(){
    var st = $(window).scrollTop();
    var scene_idx=0;
    if(st>old_st){//down
        scene_idx = parseInt((h+st-band)/h)
    }else if (st<old_st){
        scene_idx = parseInt((st+band)/h)
    }
    old_st=st;
    var $as = $('.all-scene-wrapper');
    $('.scene-wrapper').each(function(idx){
        if(idx==scene_idx){
            $("#dbgmess").html("Scene "+(idx+1)+" active");
            $(this).addClass('scene-active');
            $as.addClass('scene'+(idx+1));
        }else{
            $(this).removeClass('scene-active');
            $as.removeClass('scene'+(idx+1));
        }
    });
}

$(window).scroll(function() {
    wscroll();
});

//----  Parallax positioning ----

$(window).scroll(function(){
    var st = $(window).scrollTop();
    var t = (7-1) * h;
    $('.scene-active .plx_scroll').each(function(){
        var x = 0;//$(this).data('z')*(st-t)/5;
        var y = $(this).data('z')*(st-t)/5;
        $(this).css("transform","translate("+x+"%,"+y+"%)");
    });
});

$(window).mousemove(function( event ) {
    var t = (8-1) * h;
    var mx = event.pageX;
    var my = event.pageY;
//       console.log("mx",mx,"my",my);
    $('.scene-active .plx_mouse').each(function(){
        var y = $(this).data('z')*(t-my+200)/30;
        var x =...