WeBike v3
by PhilQ
HTML
<div id="win">
<div id="inner-win">
<div id="scale">
<div id="z0">
<div id="clouds1" class="clouds1"></div>
<div id="clouds2" class="clouds1"></div>
<div id="clouds3" class="clouds2"></div>
<div id="clouds4" class="clouds2"></div>
</div>
<div id="z1">
<div class="skyline"></div>
<div class="skyline"></div>
<div class="skyline half"></div>
<div class="silhouet_ij"></div>
<div class="silhouet_noord_first"></div>
<div class="silhouet_noord"></div>
<div class="silhouet_noord"></div>
<div class="silhouet_noord"></div>
</div>
<div id="z2">
<div class="westertoren"></div>
<div class="pont"></div>
<!--
<div class="eye"></div>
<div class="toren"></div>
//-->
<div class="ransdorp"></div>
</div>
<div id="z3">
<div class="houses half"></div>
<div class="bridge1"></div>
<div class="houses"></div>
<div class="bridge2"></div>
<div class="station"></div>
<div class="haven1"></div>
<div class="haven2"></div>
<!--
<div class="cafe-de-pont"></div>
//-->
<div class="bomen1"></div>
<div class="koe3b"></div>
<div class="koe1b"></div>
<div class="koe2"></div>
<div class="koe3"></div>
<div class="koe1"></div>
<div class="koe2b"></div>
<div class="durgerdam"></div>
<div class="bomen2"></div>
<div class="koe2"></div>
<div class="koe1b"></div>
<div class="koe3b"></div>
<div class="koe1"></div>
<div class="koe2b"></div>
<div class="koe3"></div>
</div>
<div id="z4"></div>
<div id="z5">
<div class="kade half"></div>
<div class="bridge1"></div>
<div class="kade"></div>
<div class="bridge2"></div>
<div class="kade"></div>
<div class="gras1"></div>
<div class="gras2"></div>
</div>
<div id="z6">
<div class="water1"></div>
</div>
<div id="z7">
<div class="waterback"></div>
</div>
<div id="z8">
<div...SCSS
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100vh;
}
body {
background-color: #50b9e1;
background-image: linear-gradient(to bottom, rgb(80, 184, 225) 0%, rgb(168, 225, 255) 60%);
}
#win {
z-index: 1;
position: absolute;
top: 0px;
width: 100%;
// min-width: 960px;
left: 0px;
height: 100%;
// min-height: 650px;
background-image: radial-gradient(center bottom, ellipse cover, rgba(168, 225, 255, 1) 40%, rgba(168, 225, 255, 0));
overflow: hidden;
}
#inner-win {
float: left;
width: 100%;
height: 100%;
/* padding-top: 150px; */
overflow: hidden;
}
#scale {
position: absolute;
width: 100%;
height: 100%;
transform: scale(0.5);
transform-origin: 0% 100%;
transform-style: preserve-3d;
& > div {
position: absolute;
height: 100%;
/*
width: 100%;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
*/
white-space: nowrap;
& > div {
float: none !important;
display: inline-block;
}
}
}
#z0 {
z-index: 0;
}
#z1 {
z-index: 1;
}
#z2 {
z-index: 2;
}
#z3 {
z-index: 3;
}
#z4 {
z-index: 4;
}
#z5 {
z-index: 5;
}
#z6 {
z-index: 6;
}
#z7 {
display: none;
z-index: 7;
}
#z8 {
display: none;
z-index: 8;
filter: blur(3px) sepia(75%) hue-rotate(180deg) brightness(0.45);
/* grayscale(25%) */
}
.clouds1 {
position: absolute;
top: 0px;
left: 0px;
width: 734px;
height: 104px;
background: url('https://www.webikeamsterdam.com/img/v2/clouds1.png') no-repeat bottom left transparent;
background-size: contain;
background-origin: content-box;
background-clip: content-box;
}
.clouds2 {
position: absolute;
top: 0px;
left: 0px;
width: 675px;
height: 192px;
background: url('https://www.webikeamsterdam.com/img/v2/clouds2.png') no-repeat bottom left transparent;
background-size: contain;
background-origin: content-box;
background-clip: content-box;
}
#clouds1 {
top: -550px;
}
#clouds2 {
top: -250px;
}
#clouds3 {
top: -350px;
}
#clouds4...JavaScript
var scrW = 0,
cloudSpeed = {
'clouds1': 20,
'clouds2': 40,
},
timer_pont,
scrollSpeed = 1000/960, /* ms/px */
maxBgPos = 0;
$(window).load(function(){
var _w = $(window).width();
scrW = (screen.width) ? Math.max(screen.width, _w) : _w;
/* == Stretch waterfront == */
var maxWidth = scrW;
$("#z2, #z3, #z4, #z5").each(function() {
var _w = $(this).width();
if ( _w > maxWidth ) {
maxWidth = _w;
}
});
$("#z6").width( maxWidth * 1.2 );
var matches = $('#scale').css('transform').match(/matrix\(\s*(-?\d*\.?\d*),\s*(-?\d*\.?\d*),\s*(-?\d*\.?\d*),\s*(-?\d*\.?\d*),\s*(-?\d*\.?\d*),\s*(-?\d*\.?\d*)\)/);
var _scale = parseFloat( matches[1] );
if (0 == _scale) {
_scale = 1;
}
var _z5_w = $('#z5').width();
console.log('scrW', scrW);
console.log('_scale', _scale);
console.log('_z5_w', _z5_w);
maxBgPos = ( scrW / _scale ) - _z5_w + (2 / _scale);
console.log('maxBgPos', maxBgPos);
});
function animateBackground(curPos, nextPos, speed) {
/* == Move panorama == */
nextPos = Math.max(nextPos, maxBgPos);
var animTime = (speed=="fast")? 0: Math.abs(nextPos-curPos) * scrollSpeed;
/*
console.log("z2-5: "+curPos+" --> "+nextPos);
console.log("z1: --> "+(nextPos*0.6));
console.log("z6: --> "+(nextPos*1.2));
*/
$("#z1").animate({left: ""+(nextPos*0.6)+"px"},{
duration: animTime,
easing: "swing",
queue: false
});
$("#z6").animate({left: ""+(nextPos*1.2)+"px"},{
duration: animTime,
easing: "swing",
queue: false
});
$("#z2, #z3, #z4, #z5").animate( { left: ""+nextPos+"px" }, {
duration: animTime,
easing: "swing",
complete: function() {
// inNavAnim = false;
}
});
}
var vaarPont = function(){
var $pont = $(".pont");
var vars = ($pont.hasClass("heen"))? {'margin-left': '2300px', 'margin-right': '930px'}: {'margin-left': '3230px', 'margin-right': '0px'};
$pont.toggleClass("heen").animate(vars, {
duration: 10000,
easing: "swing",
complete: function() {
timer_pont =...