diff --git a/assets/js/home.logic.js b/assets/js/home.logic.js new file mode 100644 index 00000000..63330ec0 --- /dev/null +++ b/assets/js/home.logic.js @@ -0,0 +1,135 @@ + +var delta = Math.floor((Math.random() * 10) + 1) - 5; +var d; + +$( window ).resize(function() { + initSize(); +}); + +$( document ).ready(function() { + + $("#demo-third-step").hide(); + $("#demo-fourth-step").hide(); + + initSize(); + + + $('video,audio').mediaelementplayer({features: []}); + + $(".continue").click(function(){ + setTimeout(countDownDisplay, 1000); + }); + + $( "#demo-cta" ).click(function() { + + var result = delta; + + $("#demo-pointer").hide(); + $("#demo-third-step").hide(); + $("#demo-fourth-step").fadeToggle(); + console.log(); + $(".watch-accuracy").html(result.toFixed(0)); + }); + + +}); + +function initSize(){ + + var windowHeight = $(window).height(); + var headerHeight = $('header').height(); + var sloganHeight = $(".slogan-home"); + var windowRealHeight = windowHeight - headerHeight; + //var align = dispoDisplay / 2 - sloganHeight / 2; + + $(".slogan-home").css("margin-top", -windowRealHeight + windowRealHeight/2); + $(".home-picto").css("margin-top", Math.abs(-windowRealHeight + windowRealHeight/2)); + + var ratio = $("#mosa-picture-1").width() / 800 ; + + $(".home-mosa").css("height", 450*ratio*2); + + $(".home-mosa-stats").css("left", $(window).width()/2-$(".home-mosa-stats").width()/2 - 20); + $(".home-mosa-stats").css("marginTop", (450*ratio*2)/2 - $(".home-mosa-stats").height()/2 - 20); + + $( ".slogan-home" ).animate({ + marginTop: "-=300" + }, 2000); + +} + +function countDownDisplay(){ + var countdown = $("#demo-sync-time").html(); + + $("#demo-sync-time").html(countdown - 1); + if(countdown > 1){ + setTimeout(countDownDisplay, 1000); + }else{ + d = new Date(new Date().getTime()); + similateInput(); + } +} + +function similateInput(){ + $("#demo-second-step").hide(); + $("#demo-third-step").fadeToggle("slow", function (){ + + var leftDelta = $("#demo-pointer").position().left + - $("#inputUserTime").position().left; + + var topDelta = $("#demo-pointer").position().top + - $("#inputUserTime").position().top - $("#inputUserTime").height() /2; + + $( "#demo-pointer" ).animate({ + marginTop: "-="+topDelta, + marginLeft: "-="+leftDelta + }, 2000, function(){ + + $("#inputUserTime").focus(); + + var seconds = (d.getSeconds() + Math.abs(delta)); + if(seconds <= 9){ + seconds = "0"+seconds; + } + + var hours = d.getHours(); + + if(hours <= 9){ + hours = "0"+seconds; + } + + var minutes = d.getMinutes(); + + if(minutes <= 9){ + minutes = "0"+minutes; + } + + var date = hours + ':' + minutes + ':' + seconds; + writeToInput(date, 0); + }); + }); +} + +function writeToInput(text, i){ + + if(i < text.length){ + $("#inputUserTime").val($("#inputUserTime").val() + text.charAt(i)); + i = i +1; + setTimeout(writeToInput, Math.round(Math.random() * (300 - 100) + 100), text, i); + }else{ + clickCTA(); + } +} + +function clickCTA(){ + var leftDelta = $("#demo-pointer").position().left - $("#demo-cta").position().left + $("#demo-cta").width() * 2 + 30; + + var topDelta = $("#demo-pointer").position().top - $("#demo-cta").position().top + $("#demo-cta").height() * 3; + + $( "#demo-pointer" ).animate({ + marginTop: "+="+topDelta, + marginLeft: "+="+leftDelta + }, 2000, function(){ + $("#demo-cta").click(); + }); +} \ No newline at end of file diff --git a/assets/js/home.logic.mobile.js b/assets/js/home.logic.mobile.js new file mode 100644 index 00000000..3c22b08b --- /dev/null +++ b/assets/js/home.logic.mobile.js @@ -0,0 +1,5 @@ +$( document ).ready(function() { + $( ".slogan-home" ).animate({ + marginTop: "-="+$("video").height()/2 + }, 2000); +}); \ No newline at end of file