Template:ETH Zurich/descriptionJS
$(document).ready(() => {
$('.mobileMenuBg').css({visibility: 'visible'})
$('svg').css({visibility: 'visible'})
// General variables
let scrolled_1 = false;
let win_w = $(window).width();
let win_h = $(window).height();
let flag_mobile = false;
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
flag_mobile = true;
}
$('.mobileMenuBg').css({visibility: 'visible'})
$(window).scroll(()=>{
scrolled_1 = true;
})
//Position variables
let offset_part2 = $('#part2').offset().top;
let offset_part3 = $('#part3').offset().top;
let offset_part4 = $('#part4').offset().top;
let offset_part5 = $('#part5').offset().top;
let offset_part6 = $('#part6').offset().top;
// let offset_box1 = $('#box1').offset().top;
// let offset_box2 = $('#box2').offset().top;
// let offset_box3 = $('#box3').offset().top;
// let offset_box4 = $('#box4').offset().top;
// Reset position variables on resize
$(window).resize(()=>{
win_h = $(window).height();
let offset_part2 = $('#part2').offset().top;
let offset_part3 = $('#part3').offset().top;
let offset_part4 = $('#part4').offset().top;
let offset_part5 = $('#part5').offset().top;
let offset_part6 = $('#part6').offset().top;
// let offset_box1 = $('#box1').offset().top;
// let offset_box2 = $('#box2').offset().top;
// let offset_box3 = $('#box3').offset().top;
// let offset_box4 = $('#box4').offset().top;
})
$('#Uptake_Link').hover(
()=>{
$('#Processing_link').css({opacity: 0.2})
$('#Imaging_link').css({opacity: 0.2})
$('#Sensing_link').css({opacity: 0.2})
// $('.robot').css({opacity: 0.3})
// $('#box1').css({opacity: 1,
// transform: 'scale(1.3) translateX(11vw) translateY(13vh)'
// })
},
()=>{
$('#Processing_link').css({opacity: 1})
$('#Imaging_link').css({opacity: 1})
$('#Sensing_link').css({opacity: 1})
// $('.robot').css({opacity: 1})
// $('#box1').css({
// transform: 'scale(1.3) translateX(12vw) translateY(14vh)'
// })
})
$('#Processing_link').hover(
()=>{
$('#Uptake_Link').css({opacity: 0.2})
$('#Imaging_link').css({opacity: 0.2})
$('#Sensing_link').css({opacity: 0.2})
// $('.robot').css({opacity: 0.3})
// $('#box2').css({opacity: 1,
// transform: 'scale(1.3) translateX(13vw) translateY(13vh)'
// })
},
()=>{
$('#Uptake_Link').css({opacity: 1})
$('#Imaging_link').css({opacity: 1})
$('#Sensing_link').css({opacity: 1})
$('.robot').css({opacity: 1})
// $('#box2').css({
// transform: 'scale(1.3) translateX(12vw) translateY(14vh)'
// })
})
$('#Imaging_link').hover(
()=>{
$('#Uptake_Link').css({opacity: 0.2})
$('#Processing_link').css({opacity: 0.2})
$('#Sensing_link').css({opacity: 0.2})
// $('.robot').css({opacity: 0.3})
// $('#box4').css({ opacity: 1,
// transform: 'scale(1.3) translateX(13vw) translateY(15vh)'
// })
},
()=>{
$('#Uptake_Link').css({opacity: 1})
$('#Processing_link').css({opacity: 1})
$('#Sensing_link').css({opacity: 1})
// $('.robot').css({opacity: 1})
// $('#box4').css({
// transform: 'scale(1.3) translateX(12vw) translateY(14vh)'
// })
})
$('#Sensing_link').hover(
()=>{
$('#Uptake_Link').css({opacity: 0.2})
$('#Processing_link').css({opacity: 0.2})
$('#Imaging_link').css({opacity: 0.2})
// $('.robot').css({opacity: 0.3})
// $('#box3').css({ opacity: 1,
// transform: 'scale(1.3) translateX(11vw) translateY(15vh)'
// })
},
()=>{
$('#Uptake_Link').css({opacity: 1})
$('#Processing_link').css({opacity: 1})
$('#Imaging_link').css({opacity: 1})
// $('.robot').css({opacity: 1})
// $('#box3').css({
// transform: 'scale(1.3) translateX(12vw) translateY(14vh)'
// })
})
$('.overviewButton').click(()=>{
$('html, body').animate({
scrollTop: $('#part2').offset().top + 16}, 1000)
})
$('#Uptake_Link').click(()=>{
$('html, body').animate({
scrollTop: $('#part3').offset().top - 16}, 1000)
})
$('#Sensing_link').click(()=>{
$('html, body').animate({
scrollTop: $('#part4').offset().top - 0.1*win_h - 16}, 1000)
})
$('#Imaging_link').click(()=>{
$('html, body').animate({
scrollTop: $('#part5').offset().top - 0.2*win_h - 16}, 1000)
})
$('#Processing_link').click(()=>{
$('html, body').animate({
scrollTop: $('#part6').offset().top - 0.3*win_h - 16}, 1000)
})
// Scroll to section
$('.cat-item').click((event)=>{
let ref = $(event.currentTarget).attr('href');
$('html, body').animate({
scrollTop: $(ref).offset().top + 16}, 1000)
})
// Scroll to section
$('#SensingSection').click((event)=>{
let ref = $(event.currentTarget).attr('href');
$('html, body').animate({
scrollTop: $(ref).offset().top + 16}, 1000)
})
$('.robot').css({transitionDuration: '0.6s'})
// $('#head').css({transform: 'translateY(-50vw)'})
// $('#box1').css({transform: 'translateX(-50vw) translateY(-20vh)'})
// $('#box2').css({transform: 'translateX(50vw) translateY(-20vh)'})
// $('#box3').css({transform: 'translateX(-50vw) translateY(20vh)'})
// $('#box4').css({transform: 'translateX(50vw) translateY(20vh)'})
let win_scroll;
setInterval(function(){
if(scrolled_1){
win_scroll = $(window).scrollTop();
}
},100)
setInterval(function(){
if(scrolled_1){
scrolled_1 = false;
//Fade in Scroll icon, titel and robot
// if(win_scroll >= offset_part2){
// $('.robot').css({transition: '2s'})
// // $('.scroll_part').css({opacity: 1});
// // $('.robotTitel').css({opacity: 1});
// }
// //Fade in Scroll icon
// if(win_scroll >= offset_part2 + 20){
// $('.scroll_part').css({opacity: 0, transform: 'translateY(100vh)'});
// }
// Initialize robot
// if(win_scroll >= offset_part2){
// //noting to do here
// $('.robot').css({transitionDuration: '0.8s', visibility:'visible',
// transform: 'scale(1.3) translateX(13vw) translateY(10vh)'})
// }else{
// $('.robot').css({transitionDuration: '0.3s', visibility: 'hidden'})
// $('#head').css({transform: 'translateY(-50vw)'})
// $('#box1').css({transform: 'translateX(-50vw) translateY(-20vh)'})
// $('#box2').css({transform: 'translateX(50vw) translateY(-20vh)'})
// $('#box3').css({transform: 'translateX(-50vw) translateY(20vh)'})
// $('#box4').css({transform: 'translateX(50vw) translateY(20vh)'})
// }
//Shift robot down
// let shift_down = '35vh';
// if(flag_mobile){shift_down = '50vh';}
// if(win_scroll >= offset_part2 + 0.50*win_h){
// // $('.robot').css({transitionDuration: '1s'})
// // $('.robot').css({
// // transform: 'scale(1) translateX(5px) translateY('+ shift_down +')',
// // })
// // $('#head').css({opacity: 0,})
// }else if(win_scroll < offset_part2 + 0.50*win_h && win_scroll >= offset_part2){
// $('.robot').css({transform: 'scale(1.3) translateX(13vw) translateY(10vh)',})
// $('#head').css({opacity: 1,})
// }
// // Shift robot parts to left
let k = 0.2*win_h;
// let x_shift = '-35vw';
// let y_shift = '-22vh';
// if(flag_mobile){x_shift = 10;}
//
// Section Uptake
if(win_scroll >= offset_part3 - k){
// $('#uptakeText').css({opacity: 1});
// $('#button-uptake').css({opacity: 1});
// $('#box1').css({
// transform: 'translateX(-35vw) translateY(-22vh) scale(1.3)'
// })
//activate scroll for content
if(win_scroll >= offset_part3 - 16){
$('#uptakeText').css({overflowY: 'scroll'});
}
}
//Section sensing
if(win_scroll >= offset_part4 - 0.25*win_h - k){
$('#sensingText').css({opacity: 1});
$('#button-sensing').css({opacity: 1});
// $('#box2').css({
// transform: 'translateX(-40vw) translateY(-12vh) scale(1.3)'
// })
//activate scroll for content
if(win_scroll >= offset_part4 - 0.1*win_h -16){
$('#sensingText').css({overflowY: 'scroll'});
}
}
//Section imaging
if(win_scroll >= offset_part5 - 0.50*win_h - k){
$('#imagingText').css({opacity: 1});
$('#button-imaging').css({opacity: 1});
// $('#box3').css({
// transform: 'translateX(-35vw) translateY(-2vh) scale(1.3)'
// })
//activate scroll for content
if(win_scroll >= offset_part5 - 0.2*win_h -16){
$('#imagingText').css({overflowY: 'scroll'});
}
}
//Section processing
if(win_scroll >= offset_part6 - 0.5*win_h - k){
$('#processingText').css({opacity: 1});
$('#button-processing').css({opacity: 1});
// $('#box4').css({
// transform: 'translateX(-43vw) translateY(8vh) scale(1.3)'
// })
//activate scroll for content
if(win_scroll >= offset_part6 - 0.3*win_h -16){
$('#processingText').css({overflowY: 'scroll'});
}
}
// //Remove robot from page
// if(win_scroll >= offset_part6 - 20){
// $('.robot').css({
// display:'none'
// })
// }else{
// $('.robot').css({
// display:'block'
// })
// }
// Fade in part learn more
// if(win_scroll >= offset_part3 + 0.9*win_h - 20){
// $('#partLearnMore3').css({opacity: 1});
// }
// if(win_scroll >= offset_part4 + 0.7*win_h -20){
// $('#partLearnMore4').css({opacity: 1});
// }
// if(win_scroll >= offset_part5 + 0.49*win_h - 22){
// $('#partLearnMore5').css({opacity: 1});
// }
// if(win_scroll >= offset_part5 + 0.49*win_h - 22){
// $('#partLearnMore6').css({opacity: 1});
// }
} }, 100)
setInterval(function(){
}, 100)
// setInterval(function(){
// if(scrolled_1){
//
// //Fade in Scroll icon, titel and robot
// if(win_scroll >= offset_part2){
// $('#head').css({
// top: 'calc(50vh - var(--heightBox1) + 2vh)',
// left: 'calc(50vw - var(--widthBox1))',
// transform: 'none',
// opacity: 1});
// $('#box1').css({
// top: 'calc(50vh - var(--heightBox1) + 2vh)',
// left: 'calc(50vw - var(--widthBox1))',
// transform: 'none',
// opacity: 1});
// $('#box2').css({
// top: 'calc(50vh - var(--heightBox2) + 2vh)',
// left: 'calc(50vw + 1vw)',
// transform: 'none',
// opacity: 1});
// $('#box3').css({
// top: 'calc(50vh + 2vh)',
// left: 'calc(50vw - var(--widthBox3))',
// opacity: 1});
// $('#box4').css({
// top: 'calc(50vh + 2vh)',
// left: 'calc(50vw + 1vw)',
// opacity: 1});
// }else if(win_scroll < offset_part2){
// $('.robot').children('div').css({transition: '1s'})
// $('#box1').css({
// top: 'calc(25vh)',
// left: 'calc(-1*var(--widthBox1))',
// transform: 'none',
// opacity: 0});
// $('#box2').css({
// top: 'calc(25vh)',
// left: 'calc(100vw + var(--widthBox2))',
// transform: 'none',
// opacity: 0});
// $('#box3').css({
// top: 'calc(75vh)',
// left: 'calc(-1*var(--widthBox3))',
// opacity: 0});
// $('#box4').css({
// top: 'calc(75vh)',
// left: 'calc(100vw + var(--widthBox4))',
// opacity: 0});
// }
//
// if(win_scroll >= offset_part5 - 0.50*win_h - k){
// $('#box3').css({top: 'calc(30vh + 20px)', left: shift_left, opacity: 1, transition: '2s'})
// $('#imagingText').css({opacity: 1})
// $('#cat-item-imaging').css({opacity: 1});
// }
//
// if(win_scroll >= offset_part6 - 0.5*win_h - k){
// $('#box4').css({top: 'calc(40vh + 20px)', left: shift_left, opacity: 1, transition: '2s'})
// $('#processingText').css({opacity: 1})
// $('#cat-item-processing').css({opacity: 1});
// $('#processingText').css({overflowY: 'scroll'});
// }
//
// if(win_scroll >= offset_part6 - 0.2*win_h){
// $('.robot').css({
// opacity: 0,
// transition: '1s',
// })
// }
//
// //Fade in part learn more
// if(win_scroll >= offset_part3 + 0.9*win_h - 20){
// $('#partLearnMore3').css({opacity: 1});
// }
// if(win_scroll >= offset_part4 + 0.7*win_h -20){
// $('#partLearnMore4').css({opacity: 1});
// }
// if(win_scroll >= offset_part5 + 0.49*win_h - 22){
// $('#partLearnMore5').css({opacity: 1});
// }
// if(win_scroll >= offset_part5 + 0.49*win_h - 22){
// $('#partLearnMore6').css({opacity: 1});
// }
// }
// }, 10)
})
// setInterval(function(){
// if(scrolled_1){
//
// //Fade in Scroll icon, titel and robot
// if(win_scroll >= offset_part2){
// $('#head').css({
// top: 'calc(50vh - var(--heightBox1) + 2vh)',
// left: 'calc(50vw - var(--widthBox1))',
// transform: 'none',
// opacity: 1});
// $('#box1').css({
// top: 'calc(50vh - var(--heightBox1) + 2vh)',
// left: 'calc(50vw - var(--widthBox1))',
// transform: 'none',
// opacity: 1});
// $('#box2').css({
// top: 'calc(50vh - var(--heightBox2) + 2vh)',
// left: 'calc(50vw + 1vw)',
// transform: 'none',
// opacity: 1});
// $('#box3').css({
// top: 'calc(50vh + 2vh)',
// left: 'calc(50vw - var(--widthBox3))',
// opacity: 1});
// $('#box4').css({
// top: 'calc(50vh + 2vh)',
// left: 'calc(50vw + 1vw)',
// opacity: 1});
// }else if(win_scroll < offset_part2){
// $('.robot').children('div').css({transition: '1s'})
// $('#box1').css({
// top: 'calc(25vh)',
// left: 'calc(-1*var(--widthBox1))',
// transform: 'none',
// opacity: 0});
// $('#box2').css({
// top: 'calc(25vh)',
// left: 'calc(100vw + var(--widthBox2))',
// transform: 'none',
// opacity: 0});
// $('#box3').css({
// top: 'calc(75vh)',
// left: 'calc(-1*var(--widthBox3))',
// opacity: 0});
// $('#box4').css({
// top: 'calc(75vh)',
// left: 'calc(100vw + var(--widthBox4))',
// opacity: 0});
// }
//
// //Fade out scroll icon
// if(win_scroll >= offset_part2 + 20){
// $('.scroll_part').css({opacity: 0, transition: '0.5s'});
// }
//
// // Shift robot to bottom of page
// let shift_down = '62vh';
// if(flag_mobile){
// shift_down = '80vh';
// }
// if(win_scroll >= offset_part2 + 0.50*win_h){
// $('.robot').css({transition: '2s'})
// $("#box1").css({top: shift_down, transform: 'none', opacity: 0.5});
// $("#box2").css({top: 'calc('+shift_down+' + var(--topBox2) )', transform: 'none', opacity: 0.5});
// $("#box3").css({top: 'calc('+shift_down+ ' + 100px)', opacity: 0.5});
// $("#box4").css({top: 'calc('+shift_down+ ' + 100px)', opacity: 0.5});
// }else if(win_scroll < offset_part2 + 0.50*win_h && win_scroll >= offset_part2){
// $('.robot').css({transition: '1s'})
// $('#box1').css({
// top: 'calc(50vh - var(--robotwidth) + 2vh + 44px)',
// left: 'calc(50vw - var(--widthBox1) - 4px)',
// transform: 'none',
// opacity: 1});
// $('#box2').css({
// top: 'calc(50vh - var(--robotwidth) + var(--topBox2) + 2vh + 44px)',
// left: 'calc(50vw - 14px - 4px)',
// transform: 'none',
// opacity: 1});
// $('#box3').css({
// top: 'calc(50vh + 2vh)',
// left: 'calc(50vw - var(--widthBox3))',
// pacity: 1});
// $('#box4').css({
// top: 'calc(50vh + 2vh)',
// left: 'calc(50vw - 20px)',
// opacity: 1});
// }
//
// // Shift robot parts to left
// let k = 0.2*win_h;
// let shift_left = '4rem';
// if(flag_mobile){
// shift_left = '2rem';
// }
// // console.log(`1. ${offset_part3 - k}`)
// if(win_scroll >= offset_part3 - k){
// $('#box1').css({top: 'calc(10vh + 20px)', left: shift_left, opacity: 1, transform: 'scale(1.4)', transition: '2s'})
// $('#uptakeText').css({opacity: 1});
// $('#cat-item-uptake').css({opacity: 1});
// }
//
// //activate scroll for content
// if(win_scroll >= offset_part4 - 0.15*win_h){
// $('#sensingText').css({overflowY: 'scroll'});
// }
//
// // console.log(`1:${offset_part4 - 0.25*win_h - k}`)
// if(win_scroll >= offset_part4 - 0.25*win_h - k){
// $('#box2').css({top: 'calc(20vh + 20px)', left: shift_left, opacity: 1, transform: 'scale(1.6)', transition: '2s'})
// $('#sensingText').css({opacity: 1})
// $('#cat-item-sensing').css({opacity: 1});
// }
//
// if(win_scroll >= offset_part5 - 0.50*win_h - k){
// $('#box3').css({top: 'calc(30vh + 20px)', left: shift_left, opacity: 1, transition: '2s'})
// $('#imagingText').css({opacity: 1})
// $('#cat-item-imaging').css({opacity: 1});
// }
//
// if(win_scroll >= offset_part6 - 0.5*win_h - k){
// $('#box4').css({top: 'calc(40vh + 20px)', left: shift_left, opacity: 1, transition: '2s'})
// $('#processingText').css({opacity: 1})
// $('#cat-item-processing').css({opacity: 1});
// $('#processingText').css({overflowY: 'scroll'});
// }
//
// if(win_scroll >= offset_part6 - 0.2*win_h){
// $('.robot').css({
// opacity: 0,
// transition: '1s',
// })
// }
//
// //Fade in part learn more
// if(win_scroll >= offset_part3 + 0.9*win_h - 20){
// $('#partLearnMore3').css({opacity: 1});
// }
// if(win_scroll >= offset_part4 + 0.7*win_h -20){
// $('#partLearnMore4').css({opacity: 1});
// }
// if(win_scroll >= offset_part5 + 0.49*win_h - 22){
// $('#partLearnMore5').css({opacity: 1});
// }
// if(win_scroll >= offset_part5 + 0.49*win_h - 22){
// $('#partLearnMore6').css({opacity: 1});
// }
// }
// }, 10)