From 7ab487a8316aa97a31c25377fd74d880c6ce7a05 Mon Sep 17 00:00:00 2001 From: AragurDEV Date: Thu, 5 Oct 2017 20:36:35 +0200 Subject: [PATCH] Add time offset, reorganize, snyc animation --- css/clock.css | 37 ++++++++++++++--------------- index.php => index.html | 15 ++++++------ js/clock.js | 29 ++++++++++++++++++++++ {plugins => js}/jquery-3.2.1.min.js | 0 load.js => js/load.js | 0 particles.js => js/particles.js | 0 plugins/clock.js | 34 -------------------------- 7 files changed, 55 insertions(+), 60 deletions(-) rename index.php => index.html (64%) create mode 100644 js/clock.js rename {plugins => js}/jquery-3.2.1.min.js (100%) rename load.js => js/load.js (100%) rename particles.js => js/particles.js (100%) delete mode 100644 plugins/clock.js diff --git a/css/clock.css b/css/clock.css index 31eb2fd..cc55224 100644 --- a/css/clock.css +++ b/css/clock.css @@ -28,12 +28,11 @@ body, html { z-index: 10; opacity: 0; animation-name: show; - animation-delay: 3s; animation-duration: 3s; animation-fill-mode: forwards; } -#Date { +#date { font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; font-size: 36px; text-align: center; @@ -57,27 +56,28 @@ ul li { text-shadow: 0 0 5px #00c6ff; } -#point { +.point { position: relative; - animation: mymove 1s ease infinite; padding-left: 10px; padding-right: 10px; + animation: flash 1s ease infinite; + top: -11px; + opacity: 0; } -/* Simple Animation */ -@keyframes mymove { - 0% { - opacity: 1.0; - text-shadow: 0 0 20px #00c6ff; - } - 50% { - opacity: 0; - text-shadow: none; - } - 100% { - opacity: 1.0; - text-shadow: 0 0 20px #00c6ff; - } +@keyframes flash { + 0% { + opacity: 0; + text-shadow: none; + } + 50% { + opacity: 1.0; + text-shadow: 0 0 20px #00c6ff; + } + 100% { + opacity: 0; + text-shadow: none; + } } @keyframes show { @@ -87,5 +87,4 @@ ul li { 100% { opacity: 1; } - } diff --git a/index.php b/index.html similarity index 64% rename from index.php rename to index.html index a9dacb5..145c5e8 100644 --- a/index.php +++ b/index.html @@ -1,6 +1,7 @@ + Global Cliffbreak Time @@ -8,8 +9,8 @@ - - + + @@ -17,18 +18,18 @@
-
+
- - + + diff --git a/js/clock.js b/js/clock.js new file mode 100644 index 0000000..1791864 --- /dev/null +++ b/js/clock.js @@ -0,0 +1,29 @@ + +$(document).ready(function() { + // Create two variable with the names of the months and days in an array + var monthNames = [ "Januar" , "Febuar" , "März" , "April" , "Mai" , "Juni" , "Juli" , "August" , "September" , "Oktober" , "November" , "Dezember" ]; + var dayNames= [ "Sonntag" , "Montag" , "Dienstag" , "Mittwoch" , "Donnerstag" , "Freitag" , "Samstag" ]; + var offset = 49020000; + + timeTick(); + setInterval(timeTick, 1000); + + + function timeTick() { + $('.point').css('animation-name', 'none'); + var date = new Date(); + date.setTime(date.getTime() - offset); + + var seconds = date.getSeconds(); + var minutes = date.getMinutes(); + var hours = date.getHours(); + + + $('#date').html(dayNames[date.getDay()] + " " + date.getDate() + ' ' + monthNames[date.getMonth()] + ' ' + date.getFullYear()); + $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds); + $("#min").html(( minutes < 10 ? "0" : "" ) + minutes); + $("#hours").html(( hours < 10 ? "0" : "" ) + hours); + + $('.point').css('animation-name', 'flash'); + } +}) diff --git a/plugins/jquery-3.2.1.min.js b/js/jquery-3.2.1.min.js similarity index 100% rename from plugins/jquery-3.2.1.min.js rename to js/jquery-3.2.1.min.js diff --git a/load.js b/js/load.js similarity index 100% rename from load.js rename to js/load.js diff --git a/particles.js b/js/particles.js similarity index 100% rename from particles.js rename to js/particles.js diff --git a/plugins/clock.js b/plugins/clock.js deleted file mode 100644 index 04bc8c0..0000000 --- a/plugins/clock.js +++ /dev/null @@ -1,34 +0,0 @@ - -$(document).ready(function() { -// Create two variable with the names of the months and days in an array -var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; -var dayNames= ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"] - -// Create a newDate() object -var newDate = new Date(); -// Extract the current date from Date object -newDate.setDate(newDate.getDate()); -// Output the day, date, month and year -$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear()); - -setInterval( function() { - // Create a newDate() object and extract the seconds of the current time on the visitor's - var seconds = new Date().getSeconds(); - // Add a leading zero to seconds value - $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds); - },1000); - -setInterval( function() { - // Create a newDate() object and extract the minutes of the current time on the visitor's - var minutes = new Date().getMinutes(); - // Add a leading zero to the minutes value - $("#min").html(( minutes < 10 ? "0" : "" ) + minutes); - },1000); - -setInterval( function() { - // Create a newDate() object and extract the hours of the current time on the visitor's - var hours = new Date().getHours(); - // Add a leading zero to the hours value - $("#hours").html(( hours < 10 ? "0" : "" ) + hours); - }, 1000); -});