74 data/js/main.js
View file
@@ -1,7 +1,7 @@
window.previousScrollY = 0;
var paddingTopOfSecondSection = 80;
var isScrolling = false;
var isMobile = false;
var isMobile;

var backgroundImageContainer = document.getElementById('background-image-container');
var thirdSectionPositionHelper = document.getElementById('third-section-position-helper');
@@ -19,7 +19,7 @@ function init(){
}
isMobile = true;
}else{
if(!isMobile){
if(isMobile==false){
return;
}
isMobile = false;
@@ -30,15 +30,14 @@ function init(){
dummyScroll.setAttribute('style','height:'+bodyScrollHelper.scrollHeight+'px');
window.addEventListener('scroll',function(){
var scrollY = window.scrollY;
// backgroundImageContainer.setAttribute('style','transform:translateY('+ scrollY/2 + 'px);');
handleQuantumScroll();
});
smoothScrollTo(0);
// smoothScrollTo(0);
// console.log('is not mobile');
}else{
dummyScroll.setAttribute('style','height:0px');
bodyScrollHelper.setAttribute('class','body-scroll-helper relative');
smoothScrollTo(0);
// smoothScrollTo(0);
// console.log('is mobile');
}

@@ -63,60 +62,65 @@ function handleQuantumScroll(){
bodyScrollHelper.setAttribute('class','body-scroll-helper transition');
isScrolling = true;
setTimeout(function(){
smoothScrollTo(0);
smoothScrollTo(0,false,function(){
thirdSectionPositionHelper.setAttribute('data-open','false');
});
},50);
}else{
if(scrollY > previousScrollY && scrollY < criticalScroll){
if(scrollY > previousScrollY && scrollY <= criticalScroll){
//show third section
// window.scrollTo(0,criticalScroll);
// window.scroll({top:criticalScroll,left:0,behaviour:'smooth'});
bodyScrollHelper.setAttribute('class','body-scroll-helper transition');
isScrolling = true;
// console.log('data-open true');
setTimeout(function(){
smoothScrollTo(criticalScroll);
smoothScrollTo(criticalScroll, false, function(){
thirdSectionPositionHelper.setAttribute('data-open','true');
});
},50);
}else{
if(Math.abs(scrollY - previousScrollY) < 10 ){
if(scrollY < previousScrollY){
scrollY = previousScrollY - 10;
}else{
scrollY = previousScrollY + 10;
}
}
// console.log('data-open true', scrollY, previousScrollY, criticalScroll);
thirdSectionPositionHelper.setAttribute('data-open','true');
bodyScrollHelper.setAttribute('class','body-scroll-helper');
smoothScrollTo(scrollY,true);
}
}
previousScrollY = scrollY;
return false;
}
function smoothScrollTo(y, not_smooth){
function smoothScrollTo(y, not_smooth, callback){
// console.log('smoothScrollTo',y);
// isScrolling = true;
if(!not_smooth || not_smooth == undefined ){
setTimeout(callback, 1000);
setTimeout(function(){
window.scrollTo(0,y);
previousScrollY = y;
isScrolling = false;
// if(typeof callback == 'function'){
// callback();
// }
},1500);
}
bodyScrollHelper.setAttribute('style','transform:translateY('+ -y +'px);');
window.scrollTo(0,y);
}
function smoothScrollBy(x){


return;
var sign = 1;
var scrollByPixels = 10;
if(x < 0){
sign = -1;
x = -x;
}

// console.log(sign, x);
if(x==0){
isScrolling = false;
return;
}
isScrolling = true;
window.scrollBy(0, sign * scrollByPixels);
setTimeout(function(){
if(x < scrollByPixels ){
x = scrollByPixels;
var tr = 'transform:translateY('+ -y +'px);';
var transformation = tr;
transformation += '-webkit-'+tr;
transformation += '-moz-'+tr;
transformation += '-ms-'+tr;
transformation += '-o-'+tr;
bodyScrollHelper.setAttribute('style',transformation);
// window.scrollTo(0,y);
if(not_smooth==true){
if(typeof callback == 'function'){
callback();
}
smoothScrollBy( sign * ( x - scrollByPixels) );
},scrollByPixels/10);
}
}
4 data/sass/_variables.scss
View file
@@ -1,4 +1,4 @@
$fav-color: #003084;

$fav-color-light: #0098db;
$gradient-start-color: $fav-color;
$gradient-end-color: #0098db;
$gradient-end-color: $fav-color-light;
86 data/sass/main.scss
View file
@@ -14,12 +14,12 @@ body{
right:0;
// bottom: 0;
top: 0;
@include transition-property(transform);
@include transition-duration(0ms);
@include transition-timing-function(cubic-bezier(0.78, 0.04, 0.22, 0.96));
@include transition-delay(0s);
&.transition{
@include transition-property(transform);
@include transition-duration(1.5s);
@include transition-timing-function(cubic-bezier(0.78, 0.04, 0.22, 0.96));
@include transition-delay(0s);
// @include transition(transform cubic-bezier(0.78, 0.04, 0.22, 0.96) 1500ms);
}
&.relative{
position: relative;
@@ -57,43 +57,86 @@ body{

$size: 260px;
$spacing: 20px;

$padding: 30px;
.third-section{
position: relative;
.third-section-position-helper{
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 4 * $size + 3 * $spacing;
margin-top: -2 * $spacing;
width: 4 * $size + 3 * $spacing + 2 * $padding;
margin-top: -2 * $spacing - $padding;
margin-bottom: 2 * $spacing;
@media screen and (max-width: 4 * $size + 5 * $spacing ){
padding: $padding;
overflow: hidden;
@media screen and (max-width: 4 * $size + 5 * $spacing + 2 * $padding ){
width: 2 * $size + $spacing;
.pane-container-row{
// margin-bottom: 0;
}
}
&[data-open=false]{
.pane{
opacity: 0;
transform: translateY(400px);
}
}
}
}

.pane{
position: relative;
margin-bottom: $spacing;
cursor: pointer;
@include transition(transform .7s cubic-bezier(.165,.84,.44,1),opacity .7s cubic-bezier(.165,.84,.44,1));
@include perspective(4 * $size + 5 * $spacing);
.pane-wrapper{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
&:after{
content: ' ';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 80;
}
}
&.absolute{
position: absolute;
}
.pane-title{
position: absolute;
bottom: 20px;
left: 20px;
z-index: 15;
font-size: 48px;
font-weight: bold;
letter-spacing: -1.75px;
color: rgba(255,255,255,0.8);
}
&.pane-medium{
$w: $size;
$h: $size;
height: $h;
width: $w;
.pane-title{
font-size: 36px;
}
}
&.pane-wide{
$w: 2 * $size + $spacing;
$h: $size;
height: $h;
width: $w;
.pane-title{
font-size: 42px;
}
}
&.pane-large{
$w: 2*$size + $spacing;
@@ -108,14 +151,35 @@ $spacing: 20px;
top: 0;
right: 0;
bottom: 0;
&.pane-image-overlay{
.pane-image-overlay{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: $fav-color;
opacity: 0.6;
background-color: rgba(0,0,0,0);
z-index: 5;
@include transition(opacity ease 300ms);
&:after{
content: ' ';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0,112,201,0.45);
opacity: 0;
@include transition(opacity ease 300ms);
}
}
}
&:hover{
.pane-image-container{
.pane-image-overlay{
&:after{
opacity: 1;
}
}
}
}
}
212 index.html
View file
@@ -24,158 +24,148 @@
</div>
</div>
<div class="third-section">
<div id="third-section-position-helper" class="third-section-position-helper pane-container">
<div id="third-section-position-helper" data-open="false" class="third-section-position-helper pane-container">
<div class="pane-container-row ">
<div class="pane pane-large">
<div class="pane-image-container">
<div class="pane-image-overlay"></div>
</div>
<div class="pane-text-container">
<div class="pane-title">Talks</div>
<div class="pane-text-divider">
<span class="divider-color"></span>
</div>
<div class="pane-more-text">
It is a long established fact that a reader will be distracted by the readable content of
<div class="pane pane-large" style="transition-delay: 0s;">
<div class="pane-wrapper">
<div class="pane-image-container">
<img src="./data/img/tiles/competitions.jpg">
<div class="pane-image-overlay"></div>
</div>
<div class="pane-title">Competitions</div>
</div>
</div>
<div class="pane-container pane-container-wide pane-container-column">
<div class="pane pane-wide ">
<div class="pane-image-container">
<div class="pane-image-overlay"></div>
</div>
<div class="pane-text-container">
<div class="pane-title">Talks</div>
<div class="pane-text-divider">
<span class="divider-color"></span>
</div>
<div class="pane-more-text">
It is a long established fact that a reader will be distracted by the readable content of
<div class="pane pane-wide" style="transition-delay: .1s;">
<div class="pane-wrapper">
<div class="pane-image-container">
<img src="./data/img/tiles/talks.jpg">
<div class="pane-image-overlay"></div>
</div>
<div class="pane-title">Technocruise</div>
</div>
</div>
<div class="pane pane-wide">
<div class="pane-image-container">
<div class="pane-image-overlay"></div>
</div>
<div class="pane-text-container">
<div class="pane-title">Talks</div>
<div class="pane-text-divider">
<span class="divider-color"></span>
</div>
<div class="pane-more-text">
It is a long established fact that a reader will be distracted by the readable content of
<div class="pane pane-wide" style="transition-delay: .2s;">
<div class="pane-wrapper">
<div class="pane-image-container">
<img src="./data/img/tiles/workshop.jpg">
<div class="pane-image-overlay"></div>
</div>
<div class="pane-title">Workshops</div>
</div>
</div>
</div>
</div>
<div class="pane-container-row ">
<div class="pane pane-wide">
<div class="pane-image-container">
<div class="pane-image-overlay"></div>
</div>
<div class="pane-text-container">
<div class="pane-title">Talks</div>
<div class="pane-text-divider">
<span class="divider-color"></span>
</div>
<div class="pane-more-text">
It is a long established fact that a reader will be distracted by the readable content of
<div class="pane pane-wide" style="transition-delay: .3s;">
<div class="pane-wrapper">
<div class="pane-image-container">
<img src="./data/img/tiles/talk.jpg">
<div class="pane-image-overlay"></div>
</div>
<div class="pane-title">Talks</div>
</div>
</div>
<div class="pane pane-medium">
<div class="pane-image-container">
<div class="pane-image-overlay"></div>
</div>
<div class="pane-text-container">
<div class="pane-title">Talks</div>
<div class="pane-text-divider">
<span class="divider-color"></span>
</div>
<div class="pane-more-text">
It is a long established fact that a reader will be distracted by the readable content of
<div class="pane pane-medium" style="transition-delay: .35s;">
<div class="pane-wrapper">
<div class="pane-image-container">
<img src="./data/img/tiles/show.jpg">
<div class="pane-image-overlay"></div>
</div>
<div class="pane-title">Shows</div>
</div>
</div>
<div class="pane pane-medium">
<div class="pane-image-container">
<div class="pane-image-overlay"></div>
</div>
<div class="pane-text-container">
<div class="pane-title">Talks</div>
<div class="pane-text-divider">
<span class="divider-color"></span>
</div>
<div class="pane-more-text">
It is a long established fact that a reader will be distracted by the readable content of
<div class="pane pane-medium" style="transition-delay: .4s;">
<div class="pane-wrapper">
<div class="pane-image-container">
<img src="./data/img/tiles/mercha.jpg">
<div class="pane-image-overlay"></div>
</div>
<div class="pane-title">Exhibitions</div>
</div>
</div>
</div>
<div class="pane-container-row">
<div class="pane pane-medium">
<div class="pane-image-container">
<div class="pane-image-overlay"></div>
</div>
<div class="pane-text-container">
<div class="pane-title">Talks</div>
<div class="pane-text-divider">
<span class="divider-color"></span>
</div>
<div class="pane-more-text">
It is a long established fact that a reader will be distracted by the readable content of
<div class="pane pane-medium" style="transition-delay: .45s;">
<div class="pane-wrapper">
<div class="pane-image-container">
<img src="./data/img/tiles/tosc.jpg">
<div class="pane-image-overlay"></div>
</div>
<div class="pane-title">TOSC</div>
</div>
</div>
<div class="pane pane-medium">
<div class="pane-image-container">
<div class="pane-image-overlay"></div>
</div>
<div class="pane-text-container">
<div class="pane-title">Talks</div>
<div class="pane-text-divider">
<span class="divider-color"></span>
</div>
<div class="pane-more-text">
It is a long established fact that a reader will be distracted by the readable content of
<div class="pane pane-medium" style="transition-delay: .5s;">
<div class="pane-wrapper">
<div class="pane-image-container">
<img src="./data/img/tiles/hope.jpg">
<div class="pane-image-overlay"></div>
</div>
<div class="pane-title">HOPE</div>
</div>
</div>
<div class="pane pane-medium">
<div class="pane-image-container">
<div class="pane-image-overlay"></div>
</div>
<div class="pane-text-container">
<div class="pane-title">Talks</div>
<div class="pane-text-divider">
<span class="divider-color"></span>
</div>
<div class="pane-more-text">
It is a long established fact that a reader will be distracted by the readable content of
<div class="pane pane-medium" style="transition-delay: .55s;">
<div class="pane-wrapper">
<div class="pane-image-container">
<img src="./data/img/tiles/megaworld.jpg">
<div class="pane-image-overlay"></div>
</div>
<div class="pane-title">Megaworld &&nbsp;Fun-T</div>
</div>
</div>
<div class="pane pane-medium">
<div class="pane-image-container">
<div class="pane-image-overlay"></div>
</div>
<div class="pane-text-container">
<div class="pane-title">Talks</div>
<div class="pane-text-divider">
<span class="divider-color"></span>
</div>
<div class="pane-more-text">
It is a long established fact that a reader will be distracted by the readable content of
<div class="pane pane-medium" style="transition-delay: .60s;">
<div class="pane-wrapper">
<div class="pane-image-container">
<img src="./data/img/tiles/mercha.jpg">
<div class="pane-image-overlay"></div>
</div>
<div class="pane-title">Merchandise</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="./data/js/main.js"></script>
<script type="text/javascript">
function initAnimation(){
var panes = document.querySelectorAll('.pane');
for(var i=0; i<panes.length; i++){
var element = panes[i];
// console.log(element, element.childNodes);
handlePane(element);
}
}
function handlePane(element){
element.addEventListener('mousemove',function(event){
// console.log('on mousemove')
var mouseX = event.layerX;
var mouseY = event.layerY;
var elementH = element.scrollHeight;
var elementW = element.scrollWidth;
var maxRotationAngle = 12;
function getRotationAngle(cx,cy,x,y,ma){
return ma * Math.sqrt( ( (cx - x)*(cx - x) + (cy - y) * (cy - y) ) / (cx*cx+cy*cy) ) ;
}
var rotationAngle = getRotationAngle(elementW/2, elementH/2, mouseX, mouseY, maxRotationAngle);
var tr = '';

tr += 'transform:translateZ(10px) rotate3d(' + -1 * ( mouseY - (1.0*elementH/2) ) +',' + ( mouseX - (1.0*elementW/2) ) + ',0,' + rotationAngle + 'deg);';

var transformation = tr;
transformation += '-webkit-'+tr;
transformation += '-moz-'+tr;
transformation += '-ms-'+tr;
transformation += '-o-'+tr;

element.childNodes[1].setAttribute('style',transformation);
// element.childNodes.setAttribute({transform:transformation});
});
element.addEventListener('mouseleave',function(){
element.childNodes[1].setAttribute('style',"");
});
}
initAnimation();
</script>
</body>
</html>