Menggunakan JavaScript dikombinasikan dengan Grafis Vektor memungkinkan mendapatkan hasil yang sangat menarik. Keuntungan dari grafis vektor lebih raster di skalabilitas. Ketika gambar diperbesar, tidak berubah. Hal ini sangat berguna jika template anda responsive. Berikut adalah contoh SVG-animasi dalam bentuk jam analog by webmaster-ucoz.ru.
Masukan Kode yang ingin munculkan Jam.
<div class="filler"></div>
<svg width="200" height="200">
<filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"/>
<feOffset in="blur" dx="2.5" dy="2.5"/>
</filter>
<g>
<circle id="shadow" style="fill:rgba(0,0,0,0.1)" cx="97" cy="100" r="87" filter="url(#innerShadow)"></circle>
<circle id="circle" style="stroke: #FFF; stroke-width: 12px; fill:#20B7AF" cx="100" cy="100" r="80"></circle>
</g>
<g>
<line x1="100" y1="100" x2="100" y2="55" transform="rotate(80 100 100)" style="stroke-width: 3px; stroke: #fffbf9;" id="hourhand">
<animatetransform attributeName="transform"
attributeType="XML"
type="rotate"
dur="43200s"
repeatCount="indefinite"/>
</line>
<line x1="100" y1="100" x2="100" y2="40" style="stroke-width: 4px; stroke: #fdfdfd;" id="minutehand">
<animatetransform attributeName="transform"
attributeType="XML"
type="rotate"
dur="3600s"
repeatCount="indefinite"/>
</line>
<line x1="100" y1="100" x2="100" y2="30" style="stroke-width: 2px; stroke: #C1EFED;" id="secondhand">
<animatetransform attributeName="transform"
attributeType="XML"
type="rotate"
dur="60s"
repeatCount="indefinite"/>
</line>
</g>
<circle id="center" style="fill:#128A86; stroke: #C1EFED; stroke-width: 2px;" cx="100" cy="100" r="3"></circle>
</svg>
Masukan Kode ini dibawah footer:
<script src='/js/SVG-Clock.js'></script>
<script>var hands = [];
hands.push(document.querySelector('#secondhand > *'));
hands.push(document.querySelector('#minutehand > *'));
hands.push(document.querySelector('#hourhand > *'));
var cx = 100;
var cy = 100;
function shifter(val) {
return [val, cx, cy].join(' ');
}
var date = new Date();
var hoursAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minuteAngle = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;
hands[0].setAttribute('from', shifter(secAngle));
hands[0].setAttribute('to', shifter(secAngle + 360));
hands[1].setAttribute('from', shifter(minuteAngle));
hands[1].setAttribute('to', shifter(minuteAngle + 360));
hands[2].setAttribute('from', shifter(hoursAngle));
hands[2].setAttribute('to', shifter(hoursAngle + 360));
for(var i = 1; i <= 12; i++) {if (window.CP.shouldStopExecution(1)){break;}
var el = document.createElementNS('http://www.w3.org/2000/svg', 'line');
el.setAttribute('x1', '100');
el.setAttribute('y1', '30');
el.setAttribute('x2', '100');
el.setAttribute('y2', '40');
el.setAttribute('transform', 'rotate(' + (i*360/12) + ' 100 100)');
el.setAttribute('style', 'stroke: #ffffff;');
document.querySelector('svg').appendChild(el);
}
window.CP.exitedLoop(1);
</script>
Semoga bermanfaat. sumber : webmaster-ucoz.ru
View: 1205
Rate: 5.0 / 1
Artikel Terbaru
Solusi gagal kirim sms verifikasi Aktivasi Mobile Banking
Solusi mengatasi gagal kirim sms verifikasi Aktiva...
Weedo Dropship Tas Wanita Import dari Batam
Cari Dropship tas wanita import di weedo saja, ber...
Apa Penyebab Suara Rekaman Mic BM 800 Kecil, cara mengatasinya?
Penyebab Suara Mic BM 800 Grafiknya kecil di AudaC...
Bandros Dropship terbaik di Indonesia, Benarkah?
Bandros salah satu dropship terbaik di Indonesia d...
Aplikasi terbaik pembersih dan mempercepat smartphone android
Masalah smartphone menjadi lemot atau berat sehing...