560 lines
14 KiB
JavaScript
Executable File
560 lines
14 KiB
JavaScript
Executable File
(function ($) {
|
|
$(document).ready( function(){
|
|
|
|
var $burger= $('#burger img');
|
|
var $menu= $('#menu');
|
|
var $credit= $('#credit');
|
|
var $cred= $('#cred');
|
|
var $burgerScroll;
|
|
var $creditScroll;
|
|
var currenTimeInt;
|
|
var currenTimeAudioInt;
|
|
var video;
|
|
var videoPlaying;
|
|
var progress;
|
|
var progressAudio;
|
|
var audio;//5
|
|
var cuRRaudio;//5
|
|
var audioPlaying;
|
|
var portrait;
|
|
var keyFrameArr;
|
|
var data;
|
|
|
|
var keyFrameDom = '<div class="frame"><img src="img/puces.png" alt="puces" class="puceactive" height="" width=""></div>';
|
|
var bubbleTimeOut;
|
|
|
|
|
|
checkScrollBurgerCredit = function(){
|
|
|
|
$hwin= $(window).height();
|
|
$hburger= $('#burger').height();
|
|
$winscroll= $(window).scrollTop()+$hburger;
|
|
//alert($winscroll)
|
|
if($hwin < $winscroll){
|
|
$('#burger').find('img').attr('src','img/burgernav_black.png');$burgerScroll=true
|
|
}else{
|
|
$('#burger').find('img').attr('src','img/burgernav.png');$burgerScroll=false;
|
|
}
|
|
|
|
//
|
|
|
|
$bottomcredit = Number($('#credit').css('bottom').replace("px", ""));
|
|
$hcredit= $('#credit').height();
|
|
$winscrolll= $(window).scrollTop();
|
|
if($winscrolll>Number($hcredit+$bottomcredit)){
|
|
$('#credit').css('color','black');$creditScroll=true;
|
|
}else{
|
|
$('#credit').css('color','white');$creditScroll=false;
|
|
}
|
|
|
|
}
|
|
|
|
checkScrollBurgerCredit();
|
|
|
|
$(window).scroll(function(){
|
|
|
|
if(!$burger.hasClass('opnav') && !$credit.hasClass('opnav')){
|
|
|
|
checkScrollBurgerCredit();
|
|
|
|
}
|
|
});
|
|
|
|
$('#burger').click(function(){
|
|
if($burger.hasClass('opnav')){
|
|
$burger.removeClass('opnav');
|
|
TweenLite.to($burger, .3, {rotation:0});
|
|
TweenLite.to($menu, .3, {height:"0%",onComplete:function(){
|
|
if($burgerScroll)$('#burger').find('img').attr('src','img/burgernav_black.png');
|
|
|
|
//play video
|
|
console.log('video paused: '+video.paused)
|
|
if(videoPlaying)video.play();
|
|
|
|
}
|
|
});
|
|
|
|
if($creditScroll)$('#credit').css('color','black');
|
|
checkScrollBurgerCredit();
|
|
|
|
|
|
|
|
|
|
|
|
}else{
|
|
|
|
if($credit.hasClass('opnav')){
|
|
$credit.removeClass('opnav');
|
|
TweenLite.to($cred, .3, {opacity:0,onComplete:function(){
|
|
TweenLite.to($cred, 0, {height:"0%"});
|
|
}
|
|
});
|
|
}
|
|
$burger.addClass('opnav');
|
|
TweenLite.to($burger, .3, {rotation:-90});
|
|
TweenLite.to($menu, .3, {height:"100%"});
|
|
TweenLite.to($menu, .3, {opacity:1,onComplete:function(){
|
|
if($creditScroll)$('#credit').css('color','white');
|
|
}
|
|
});
|
|
if($burgerScroll)$('#burger').find('img').attr('src','img/burgernav.png');
|
|
|
|
|
|
//pause video
|
|
console.log('video paused: '+video.paused)
|
|
if(videoPlaying)video.pause();
|
|
|
|
//checkScrollBurgerCredit();
|
|
}
|
|
});
|
|
|
|
$('#credit').click(function(){
|
|
if($credit.hasClass('opnav')){
|
|
$credit.removeClass('opnav');
|
|
TweenLite.to($cred, .3, {height:"0%",onComplete:function(){
|
|
if($burgerScroll)$('#burger').find('img').attr('src','img/burgernav_black.png');
|
|
|
|
//play video
|
|
console.log('video paused: '+video.paused)
|
|
if(videoPlaying)video.play();
|
|
|
|
}
|
|
});
|
|
if($creditScroll)$('#credit').css('color','black');
|
|
|
|
checkScrollBurgerCredit();
|
|
|
|
}else{
|
|
if($burger.hasClass('opnav')){
|
|
$burger.removeClass('opnav');
|
|
TweenLite.to($burger, .3, {rotation:0});
|
|
TweenLite.to($menu, .3, {opacity:0,onComplete:function(){
|
|
TweenLite.to($menu, 0, {height:"0%"});
|
|
}
|
|
});
|
|
}
|
|
$credit.addClass('opnav');
|
|
TweenLite.to($cred, .3, {height:"100%"});
|
|
TweenLite.to($cred, .3, {opacity:1,onComplete:function(){
|
|
if($creditScroll)$('#credit').css('color','white');
|
|
|
|
}
|
|
});
|
|
if($burgerScroll)$('#burger').find('img').attr('src','img/burgernav.png');
|
|
|
|
//pause video
|
|
console.log('video paused: '+video.paused)
|
|
if(videoPlaying)video.pause();
|
|
|
|
//alert($burgerScroll)
|
|
//checkScrollBurgerCredit();
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
initPlayer = function(){
|
|
|
|
currenTimeInt = setInterval(updateVideo,50)
|
|
setKeyFrames();
|
|
setVideoTime(true);
|
|
|
|
|
|
}
|
|
|
|
|
|
initAudioPlayer = function(){
|
|
|
|
currenTimeAudioInt = setInterval(updateAudio,50)
|
|
//setKeyFrames();
|
|
setAudioTime();
|
|
|
|
|
|
}
|
|
|
|
resizeKeyFrames = function(){
|
|
|
|
//console.log()
|
|
for(var i=0;i<keyFrameArr.length;i++){
|
|
|
|
var timeInSec = keyFrameArr[i].keypoint;
|
|
|
|
timeInSec *= $('.currentline .baseline').width() / (video.duration) //*100
|
|
//console.log(timeInSec)
|
|
//$('.currentline frame').eq(i).css('left',timeInSec+'px');
|
|
}
|
|
|
|
}
|
|
|
|
setKeyFrames = function(){
|
|
|
|
//console.log()
|
|
for(var i=0;i<keyFrameArr.length;i++){
|
|
|
|
var timeInSec = keyFrameArr[i].keypoint;
|
|
|
|
//timeInSec *= $('.currentline .baseline').width() / (video.duration) //*100
|
|
timeInSec = timeInSec / video.duration * 100;
|
|
$('.currentline').append('<div class="frame" rel="'+i+'" style=left:'+timeInSec+'%;><img src="img/puces.png" alt="puces" class="" height="" width=""></div>')
|
|
|
|
}
|
|
|
|
setVideoTime = function(init){
|
|
|
|
if(init){
|
|
var tTime = video.duration;
|
|
var minutes = Math.floor(tTime / 60);
|
|
var seconds = Math.floor(tTime - minutes * 60);
|
|
seconds = seconds < 10 ? '0'+ seconds : seconds;
|
|
|
|
$('.timeline .totalTime').html(minutes +' : '+ seconds);
|
|
}
|
|
|
|
var cTime = video.currentTime;
|
|
var minutes = Math.floor(cTime / 60);
|
|
var seconds = Math.floor(cTime % 60);
|
|
seconds = seconds < 10 ? '0'+ seconds : seconds;
|
|
|
|
$('.timeline .currentTime').html(minutes +' : '+ seconds);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$('.currentline .frame').click(function(e){
|
|
|
|
var pos = $(this).position();
|
|
video.currentTime = pos.left / $('.currentline .baseline').width() * video.duration;
|
|
|
|
});
|
|
|
|
showBubbles = function(kf){
|
|
|
|
clearTimeout(bubbleTimeOut);
|
|
$('.bulle').unbind('click',bubbleGetAnnexe);
|
|
|
|
var pos = $('.currentline .frame').eq(kf).position();
|
|
|
|
$('.bulle').css('left',pos.left+'px');
|
|
$('.bulle .annextt').html(keyFrameArr[kf].titre);
|
|
$('.bulle .annexdesc').html(''/*keyFrameArr[kf].texte*/);
|
|
$('.bulle .anneximg').attr('src',keyFrameArr[kf].image);
|
|
TweenLite.fromTo($('.bulle'), .5, {css:{display:'none',opacity:0}}, {css:{display:'block',opacity:1},delay:.4, ease:Sine.easeOut});
|
|
|
|
$('.bulle').bind('click',function () {
|
|
document.location = keyFrameArr[kf].url;
|
|
});
|
|
|
|
// FadeOut Bubble after X time.
|
|
bubbleTimeOut = setTimeout(function(){
|
|
TweenLite.to($('.bulle'), .3, {css:{display:'none',opacity:0}, ease:Sine.easeOut});
|
|
},5000);
|
|
|
|
}
|
|
|
|
$('.diapo').click(function(){
|
|
|
|
|
|
if (!video.paused) {
|
|
$('.timeline img.play').attr('src','img/pause.png');
|
|
videoPlaying = false;
|
|
video.pause();
|
|
}else{
|
|
$('.timeline img.play').attr('src','img/play.png');
|
|
videoPlaying = true;
|
|
video.play();
|
|
}
|
|
|
|
});
|
|
|
|
|
|
bubbleGetAnnexe = function(e){
|
|
|
|
console.log(e.data.url);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
updateAudio = function(){
|
|
progressAudio = audio.currentTime * 100 / audio.duration
|
|
$(audio).parent().find('.currentline.audio .line').css('width',progressAudio+'%');
|
|
setAudioTime();
|
|
|
|
|
|
}
|
|
|
|
setAudioTime = function(init,aa){
|
|
|
|
if(init){
|
|
//alert(audio)
|
|
var tTime = aa.duration;
|
|
var minutes = Math.floor(tTime / 60);
|
|
var seconds = Math.floor(tTime - minutes * 60);
|
|
seconds = seconds < 10 ? '0'+ seconds : seconds;
|
|
|
|
$(aa).parent().find('.totalTime').html(minutes +':'+ seconds);
|
|
$(aa).parent().find('.currentTime').html('0:00');
|
|
}
|
|
|
|
var cTime = audio.currentTime;
|
|
var minutes = Math.floor(cTime / 60);
|
|
var seconds = Math.floor(cTime % 60);
|
|
seconds = seconds < 10 ? '0'+ seconds : seconds;
|
|
|
|
$(audio).parent().find('.currentTime').html(minutes +':'+ seconds);
|
|
//alert($(audio).parent().attr('rel'))
|
|
//alert(audio.duration)
|
|
}
|
|
|
|
|
|
updateVideo = function(){
|
|
progress = video.currentTime * 100 / video.duration
|
|
$('.currentline .line').css('width',progress+'%');
|
|
setVideoTime();
|
|
|
|
var idx=$.map(keyFrameArr, function(item,i){
|
|
//console.log(video.currentTime);
|
|
if(item.keypoint==Math.round(video.currentTime)){
|
|
//console.log(i);
|
|
showBubbles(i);
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
|
|
$('.player').each(function(i) {
|
|
|
|
|
|
var refId = i
|
|
audio = document.getElementsByTagName("audio")[refId];
|
|
audio.addEventListener('loadedmetadata', function(i) {
|
|
//console.log("Playing " + audio.src + ", for: " + audio.duration + "seconds.");
|
|
setAudioTime(true,this);
|
|
});
|
|
$(audio).parent().find('.currentline.audio .line').css('width',0+'%');
|
|
|
|
$(this).find('.play').click(function (i) {
|
|
|
|
cuRRaudio = audio;
|
|
audio = document.getElementsByTagName("audio")[refId];
|
|
|
|
if(cuRRaudio == audio){
|
|
|
|
if (!audio.paused){
|
|
//alert('wew')
|
|
$(this).attr('src','img/play.png');
|
|
audioPlaying = false;
|
|
audio.pause();
|
|
|
|
}else{
|
|
$(this).attr('src','img/pause.png');
|
|
audioPlaying = true;
|
|
audio.play();
|
|
}
|
|
|
|
}else{
|
|
|
|
cuRRaudio.pause();
|
|
cuRRaudio.currentTime = 0;
|
|
$(cuRRaudio).parent().find('img.play').attr('src','img/play.png');
|
|
$(cuRRaudio).parent().find('.currentline.audio .line').css('width',0+'%');
|
|
$(cuRRaudio).parent().find('.currentTime').html('0:00');
|
|
|
|
if (!audio.paused){
|
|
|
|
$(this).attr('src','img/play.png');
|
|
audioPlaying = false;
|
|
audio.pause();
|
|
|
|
}else{
|
|
$(this).attr('src','img/pause.png');
|
|
audioPlaying = true;
|
|
audio.play();
|
|
}
|
|
|
|
}
|
|
|
|
initAudioPlayer();
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
onloaddDiapo = function( pos ){
|
|
|
|
video = document.getElementsByTagName("video")[parseInt(pos) - 1];
|
|
$(video).show();
|
|
|
|
video.play();
|
|
videoPlaying = true;
|
|
|
|
var winH = $(window).height();
|
|
TweenLite.fromTo($('#test'), .7, {css:{top:0,position:'relative'}}, {css:{top:-winH,position:'absolute'}, ease:Sine.easeOut});
|
|
|
|
$('.timeline').css('display','block')
|
|
initPlayer();
|
|
|
|
console.log(video.duration);
|
|
|
|
$('#burger').show();
|
|
|
|
};
|
|
|
|
$('.btn').click(function () {
|
|
var oo = this;
|
|
$.get('/diapo.php?id=' + $(this).attr('idportrait'), function (data) {
|
|
console.log(data);
|
|
keyFrameArr = data.annexes;
|
|
portrait = data;
|
|
onloaddDiapo($(oo).attr('pos'));
|
|
});
|
|
|
|
});
|
|
|
|
|
|
homeOver = function(){
|
|
//console.log('home over')
|
|
var elm = $(this).attr('id');
|
|
$('#home li').each(function(e){
|
|
|
|
if(elm == $(this).attr('id')){
|
|
TweenLite.to($(this), .5, {width:'50%',opacity:1, ease:Sine.easeOut});
|
|
}else{
|
|
TweenLite.to($(this), .5, {width:'25%',opacity:.4, ease:Sine.easeOut});
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
|
|
homeOut = function(){
|
|
//console.log('home over')
|
|
$('#home li').each(function(e){
|
|
TweenLite.to($(this), .5, {width:'33.3333%',opacity:1, ease:Sine.easeOut});
|
|
})
|
|
|
|
}
|
|
|
|
$('#home li').bind('mouseover',homeOver);
|
|
$('#home li').bind('mouseout',homeOut);
|
|
$('#home li').mouseout(function(){
|
|
|
|
})
|
|
|
|
timelineDone = function(elm){
|
|
|
|
$(elm).css('display','none')
|
|
|
|
}
|
|
|
|
displayChar = function(pos, idx){
|
|
|
|
TweenLite.to($('#pres'),.5, {css:{opacity:0},ease:Sine.easeOut,onComplete:function(){
|
|
|
|
|
|
$('#pres').css('display','none');
|
|
if(pos=='right'){
|
|
$('#portrait' + idx + ' .introtitre ').css('left','30%');
|
|
$('#portrait' + idx + ' .introsstitre ').css('left','30%');
|
|
$('#portrait' + idx + ' .introcontent ').css('left','30%');
|
|
}
|
|
TweenLite.fromTo($('#portrait' + idx + '.portrait'),1.5, {css:{opacity:0,display:'none'}},{css:{opacity:1,display:'block'},ease:Sine.easeOut});
|
|
TweenLite.fromTo($('#footer' + idx + '.footer'),1.5, {css:{opacity:0,display:'none'}},{css:{opacity:1,display:'block'},ease:Sine.easeOut});
|
|
|
|
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
timelineDoneBis = function(elm){
|
|
|
|
|
|
switch(elm){
|
|
|
|
case 'img1':
|
|
console.log('img1');
|
|
$('#home ul').css({'left':'0','width':'50%','position':'absolute'})
|
|
$('#home ul li').css({'width':'100%'});
|
|
displayChar('right', 1);
|
|
|
|
break;
|
|
|
|
case 'img2':
|
|
console.log('img2');
|
|
TweenLite.fromTo($('#home ul'), 1, {css:{left:'25%',width:'100%',position:'relative'}},
|
|
{
|
|
css:{
|
|
left:'50%',
|
|
width:'50%',
|
|
position:'absolute'
|
|
},
|
|
ease:Sine.easeOut,
|
|
onComplete:function () { displayChar(0, 2); }
|
|
}
|
|
);
|
|
TweenLite.to($('#home ul li'), 1, {css:{width:'100%'},ease:Sine.easeOut});
|
|
break;
|
|
|
|
case 'img3':
|
|
console.log('img3');
|
|
$('#home ul').css({'left':'50%','width':'50%','position':'absolute'})
|
|
$('#home ul li').css({'width':'100%'});
|
|
displayChar(0, 3);
|
|
break;
|
|
|
|
default:
|
|
console.log("zef")
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
var homeClick = function(){
|
|
|
|
$('#home li').unbind('mouseover',homeOver);
|
|
$('#home li').unbind('mouseout',homeOut);
|
|
$('#home li').unbind('click',homeClick);
|
|
var elm = $(this).attr('id');
|
|
|
|
$('#home li').each(function(e){
|
|
|
|
if(elm == $(this).attr('id')){
|
|
TweenLite.to($(this), .5, {width:'50%',opacity:1, ease:Sine.easeOut,onComplete:timelineDoneBis, onCompleteParams:[elm]});
|
|
|
|
}else{
|
|
TweenLite.to($(this), .5, {width:'25%',opacity:0, ease:Sine.easeOut,onComplete:timelineDone, onCompleteParams:[$(this)]});
|
|
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
|
|
$('.descvideo').css('height',$('.descvideo').find('iframe').height()+$('.descvideo').find('span').height())
|
|
|
|
$('#home li').bind('click',homeClick);
|
|
|
|
$(window).resize(function(){
|
|
var winH = $(window).height();
|
|
$('#home li').find('img').css('height',winH)
|
|
//resizeKeyFrames();
|
|
})
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
})(jQuery);
|