Webentwicklung||flexibel + nachhaltig ...
Content Management||Wordpress, Joomla, Drupal
Design||modern und individuell
Service / Support||für Ihr gesundes Web!
Busines Partner||unser Angebot an Agenturen
Retina Ready||mobile Bilder + Grafiken
Mobile First||Standards + Framework
Mobile Starter||Ihr mobiles Web
User Experience||Click or Touch?
Strategien||Web-App - Responsive - Adaptive
Web-Paper Plugin||Text mobilisieren
Web-Planer||Erfolg durch Planung
WebTec||Html, CSS, ...Mit der Angabe 'steps(n)' wird eine CSS3 Animation in (n) Teile ihrer Dauer zerteilt. Statt der normal gewünschten flüssigen Animation, können so getaktete Animationen erzeugt werden.
Als Beispiel habe ich hier eine Uhr in HTML geschrieben, deren Zeiger wie bei einer klassischen Analog Uhr von einem Ziffernblatt Strich zum nächsten springen.
<div id="clock">
<!-- Stundenzeiger -->
<div id="hubH" class="hub">
<div id="indicatorH"></div>
</div>
<!-- Minutenzeiger -->
<div id="hubM" class="hub">
<div id="indicatorM"></div>
</div>
<!-- Sekundenzeiger -->
<div id="hubS" class="hub">
<div id="indicatorS"></div>
</div>
</div>
Jeder Zeiger ist absolut zur Zeigerachse (class="hub") positioniert. Auf dem Ziffernblatt entspricht jeder Strich 6deg.
Die Steps für die Zeiger:
- Sekunde: 60s für eine Drehung (360deg) verteilt auf 60 Steps = 6deg/sek
- Minute: 3600s (=60min) für 360deg mit 60 Steps = 6deg/min
- Stunde: 86400s (=12h) für 360deg mit 96 Steps = 6deg/12min
#clock {background:url(clockface.png) no-repeat; background-size:90%; background-position:50% 50%; position:relative; padding:0;}
.hub {width:1px; height:1px; position:absolute; left:50%; top:50%;}
#indicatorS {position:absolute; width:1px; background:#C33;}
#indicatorM {position:absolute; left-1; width:3px; background:#aaaaaa; border-radius:2px;}
#indicatorH {position:absolute; left:-2px; width:5px; background:#777; border-radius:2px;}
#hubS{animation: indicatorS 60s steps(60, end) infinite;}
#hubM{animation: indicatorM 3600s steps(60, end) infinite;}
#hubH{animation: indicatorH 86400s steps(96, end) infinite;}
#hubS:after{transform:rotate(-45deg); content:''; position:absolute; top:-12px; left:-12px; background:url(logo.png); background-size: cover; width:24px; height:24px;}
@keyframes indicatorS{
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
@keyframes indicatorM{
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
@keyframes indicatorH{
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
Die Uhr stellen
Allein mit der CSS Deklaration würde die Uhr immer um 00:00:00 starten. Mit diesem JQuery Script wird die Uhr bei Seitenaufruf mit der tatsächlichen (Browser)-Zeit gestartet. Da JQuery nicht auf die CSS Keyframes Deklaration zugreifen kann, wird das Script mit dem PreFixFree.js Plugin erweitert.
(function($){
$(window).load(function(){
var d = new Date();
var s = d.getSeconds();
var m = d.getMinutes();
var h = d.getHours();$(function(){
var startS = s*6
var endS = startS+360
$.keyframe.define([{
name: 'indicatorS',
'0%': {'transform' : 'rotate('+startS+'deg)'},
'100%': {'transform' : 'rotate('+endS+'deg)'}
}]);
})
var startM = m*6;
$('#hubM').css({'animation-delay':61-s+'s','transform':'rotate('+startM+'deg)'});
$(function(){
var startMdelay = (m+1)*6
var endM = startMdelay+360
$.keyframe.define([{
name: 'indicatorM',
'0%': {'transform' : 'rotate('+startMdelay+'deg)'},
'100%': {'transform' : 'rotate('+endM+'deg)'}
}]);
})
$(function(){
var startH = h*30+m/2
var endH = startH+360
$.keyframe.define([{
name: 'indicatorH',
'0%': {'transform' : 'rotate('+startH+'deg)'},
'100%': {'transform' : 'rotate('+endH+'deg)'}
}]);
})
})
(function($){
$(window).on("load resize orientationchange",function(e){
var rWidth = 0;
var rWidth = $('#clock').outerWidth();
$('#clock').css('height',rWidth);
$('#indicatorS').css({'height':rWidth/2+20,'top':-rWidth/2+rWidth/8-20});
$('#indicatorM').css({'height':rWidth/2-30,'top':-rWidth/2+rWidth/15+30});
$('#indicatorH').css({'height':rWidth/2-70,'top':-rWidth/2+rWidth/15+70});
console.log('width'+rWidth)
});
})(jQuery);