<script>
!function($) {
function KM(element, options) {
this.$container = $(element);
this.$parts = this.$container.children();
this.options = $.extend({}, { distance: 1800, threshold: 100 }, this.$container.data())
this.init();
this.position();
this.listen();
}
KM.prototype = {
init: function() {
var _this = this
, window_height = $(window).height()
, document_height = $('.pbody').height()
, threshold = this.$container.offset().top - window_height / 2 + this.options.threshold;
this.$parts.each(function() {
var $el = $(this)
, pos_left = (parseInt($el.css('marginLeft')) + $el.width() / 2) / _this.$container.width()
, pos_top = (parseInt($el.css('marginTop')) + $el.height() / 2) / _this.$container.height();
$el.data('coords', {
top: _this.options.distance * pos_top,
left: _this.options.distance * (pos_left - 0.5) * 4,
threshold: threshold + parseInt($el.css('marginTop'))
});
});
},
ease: function(value, max) {
return Math.sin((value / max - 1) * Math.PI / 2) * max + max;
},
position: function() {
var _this = this
, scroll_top = $('.b-project').scrollTop();
this.$parts.each(function(i) {
var $this = $(this)
, coords = $this.data('coords')
, factor = Math.max(0, coords.threshold - scroll_top) / coords.threshold
, easedFactor = _this.ease(factor, 1);
$this.stop().css({
top: coords.top * easedFactor + 'px',
left: coords.left * easedFactor + 'px'
});
});
},
listen: function() {
var _this = this;
$('.b-project')
.scroll($.proxy(this.position, this))
.resize(function () {
_this.init();
_this.position();
});
}
}
$(function() {
$('[role="splitted"]').each(function() { new KM(this); });
});
}(window.jQuery);
</script>
<style>
* {margin:0; padding:0;}
.phtml {padding:0px; height:100%; background:url(/upload/portfolio_custom_pages/transbank/i/bg-0.png);}
.pbody {height:18054px; padding:0px; background:url(/upload/portfolio_custom_pages/transbank/i/bg-j.jpg) no-repeat center;}
.clr {clear:both; padding:0; margin:0; line-height:0;}
.fly {overflow: hidden; }
.fly .parts-a {position: relative; width: 960px; padding:0; height:4000px; margin: 0 auto;}
.fly .parts-b {position: relative; width: 960px; padding:0; height:3600px; margin: 0 auto;}
.fly .parts-c {position: relative; width: 960px; padding:0; height:3900px; margin: 0 auto;}
.fly .parts-d {position: relative; width: 960px; padding:0; height:3854px; margin: 0 auto;}
.fly .parts-e {position: relative; width: 960px; padding:0; height:2700px; margin: 0 auto;}
.fly .parts-a > div {background-repeat: no-repeat; position: absolute; top: 0; left: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;}
.fly .parts-b > div {background-repeat: no-repeat; position: absolute; top: 0; left: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.6s linear; -ms-transition: all 0.6s linear; -o-transition: all 0.6s linear; transition: all 0.6s linear;}
.fly .parts-c > div {background-repeat: no-repeat; position: absolute; top: 0; left: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.6s linear; -ms-transition: all 0.6s linear; -o-transition: all 0.6s linear; transition: all 0.6s linear;}
.fly .parts-d > div {background-repeat: no-repeat; position: absolute; top: 0; left: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.6s linear; -ms-transition: all 0.6s linear; -o-transition: all 0.6s linear; transition: all 0.6s linear;}
.fly .parts-e > div {background-repeat: no-repeat; position: absolute; top: 0; left: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.6s linear; -ms-transition: all 0.6s linear; -o-transition: all 0.6s linear; transition: all 0.6s linear;}
.fly .parts-a .mih-glysh-one {margin-top: 227px; margin-left: 1px; width:351px; height:100px; background:url(/upload/portfolio_custom_pages/transbank/i/mih-glysh-one.png);}
.fly .parts-a .ser-pop-one {margin-top: 797px; margin-left: 487px; width:474px; height:140px; background:url(/upload/portfolio_custom_pages/transbank/i/ser-pop-one.png);}
.fly .parts-a .il-dem-one {margin-top: 962px; margin-left: 0; width:461px; height:137px; background:url(/upload/portfolio_custom_pages/transbank/i/il-dem-one.png);}
.fly .parts-a .mih-glysh-two {margin-top: 1261px; margin-left: 603px; width:357px; height:118px; background:url(/upload/portfolio_custom_pages/transbank/i/mih-glysh-two.png);}
.fly .parts-a .ek-grib-one {margin-top: 1732px; margin-left: 0; width:399px; height:118px; background:url(/upload/portfolio_custom_pages/transbank/i/ek-grib-one.png);}
.fly .parts-a .mih-glysh-three {margin-top: 2570px; margin-left: 572px; width:355px; height:122px; background:url(/upload/portfolio_custom_pages/transbank/i/mih-glysh-three.png);}
.fly .parts-a .il-dem-two {margin-top: 2642px; margin-left: 11px; width:410px; height:119px; background:url(/upload/portfolio_custom_pages/transbank/i/il-dem-two.png);}
.fly .parts-a .ek-grib-two {margin-top: 3523px; margin-left: 48px; width:367px; height:137px; background:url(/upload/portfolio_custom_pages/transbank/i/ek-grib-two.png);}
.fly .parts-a .mih-glysh-four {margin-top: 3523px; margin-left: 510px; width:450px; height:124px; background:url(/upload/portfolio_custom_pages/transbank/i/mih-glysh-four.png);}
.fly .parts-a .il-dem-three {margin-top: 3710px; margin-left: 510px; width:389px; height:121px; background:url(/upload/portfolio_custom_pages/transbank/i/il-dem-three.png);}
.fly .parts-b .mih-glysh-five {margin-top: 262px; margin-left: 0; width:420px; height:121px; background:url(/upload/portfolio_custom_pages/transbank/i/mih-glysh-five.png);}
.fly .parts-b .ser-pop-two {margin-top: 407px; margin-left: 0; width:386px; height:86px; background:url(/upload/portfolio_custom_pages/transbank/i/ser-pop-two.png);}
.fly .parts-b .ek-grib-three {margin-top: 955px; margin-left: 595px; width:348px; height:137px; background:url(/upload/portfolio_custom_pages/transbank/i/ek-grib-three.png);}
.fly .parts-b .il-dem-four {margin-top: 1235px; margin-left: 10px; width:388px; height:119px; background:url(/upload/portfolio_custom_pages/transbank/i/il-dem-four.png);}
.fly .parts-b .fil-sal-one {margin-top: 1235px; margin-left: 468px; width:366px; height:154px; background:url(/upload/portfolio_custom_pages/transbank/i/fil-sal-one.png);}
.fly .parts-b .fil-sal-two {margin-top: 1732px; margin-left: 0; width:359px; height:138px; background:url(/upload/portfolio_custom_pages/transbank/i/fil-sal-two.png);}
.fly .parts-b .il-dem-five {margin-top: 2657px; margin-left: 572px; width:389px; height:119px; background:url(/upload/portfolio_custom_pages/transbank/i/il-dem-five.png);}
.fly .parts-b .fil-sal-three {margin-top: 3452px; margin-left: 0; width:357px; height:101px; background:url(/upload/portfolio_custom_pages/transbank/i/fil-sal-three.png);}
.fly .parts-b .il-dem-six {margin-top: 3452px; margin-left: 407px; width:389px; height:119px; background:url(/upload/portfolio_custom_pages/transbank/i/il-dem-six.png);}
.fly .parts-c .il-dem-seven {margin-top: 1198px; margin-left: 290px; width:368px; height:118px; background:url(/upload/portfolio_custom_pages/transbank/i/il-dem-seven.png);}
.fly .parts-c .il-dem-eight {margin-top: 1984px; margin-left: 560px; width:355px; height:84px; background:url(/upload/portfolio_custom_pages/transbank/i/il-dem-eight.png);}
.fly .parts-c .vlad-sup-one {margin-top: 1862px; margin-left: 560px; width:350px; height:100px; background:url(/upload/portfolio_custom_pages/transbank/i/vlad-sup-one.png);}
.fly .parts-c .vlad-sup-two {margin-top: 2535px; margin-left: 640px; width:285px; height:102px; background:url(/upload/portfolio_custom_pages/transbank/i/vlad-sup-two.png);}
.fly .parts-c .vlad-sup-three {margin-top: 3376px; margin-left: 0; width:331px; height:101px; background:url(/upload/portfolio_custom_pages/transbank/i/vlad-sup-three.png);}
.fly .parts-c .vlad-sup-four {margin-top: 3590px; margin-left: 657px; width:289px; height:103px; background:url(/upload/portfolio_custom_pages/transbank/i/vlad-sup-four.png);}
</style>
<div class="phtml">
<div class="pbody">
<div class="fly">
<div class="parts-a" role="splitted">
<div class="mih-glysh-one"></div>
<div class="ser-pop-one"></div>
<div class="il-dem-one"></div>
<div class="mih-glysh-two"></div>
<div class="ek-grib-one"></div>
<div class="mih-glysh-three"></div>
<div class="il-dem-two"></div>
<div class="ek-grib-two"></div>
<div class="mih-glysh-four"></div>
<div class="il-dem-three"></div>
</div>
<div class="parts-b" role="splitted" data-distance="6300" data-threshold="50">
<div class="mih-glysh-five"></div>
<div class="ser-pop-two"></div>
<div class="ek-grib-three"></div>
<div class="il-dem-four"></div>
<div class="fil-sal-one"></div>
<div class="fil-sal-two"></div>
<div class="il-dem-five"></div>
<div class="fil-sal-three"></div>
<div class="il-dem-six"></div>
</div>
<div class="parts-c" role="splitted" data-distance="100000" data-threshold="50">
<div class="il-dem-seven"></div>
<div class="vlad-sup-one"></div>
<div class="il-dem-eight"></div>
<div class="vlad-sup-two"></div>
<div class="vlad-sup-three"></div>
<div class="vlad-sup-four"></div>
</div>
</div>
</div>
</div> |
