Monday, April 4, 2016

Cara Membuat Spot Light

Spotlight merupakan efek yang akan menyorot atau memfokuskan suatu titik objek berdasarkan letak mouse yang kita arahkan.

Buka Notepad atau Wordpad....
Masukan script berikut:
@font-face { /* A nice web font */
    font-family: 'LeagueGothicRegular';
    src: url('League-Gothic-fontfacekit/League_Gothic.eot');
    src: local('League Gothic'), local('LeagueGothic'), url('League-Gothic-fontfacekit/League_Gothic.woff') format('woff'), url('League-Gothic-fontfacekit/League_Gothic.ttf') format('truetype'), url('League-Gothic-fontfacekit/League_Gothic.svg#LeagueGothic') format('svg');
}
* {
margin: 0;
padding: 0;
}
html, body {
overflow: hidden;
background: #C23;
}
div {
margin-top: 6em;
font-family: "LeagueGothicRegular";
color: #FFF;
-webkit-transform: rotate(-10deg); /* Make it more dynamic! */
-moz-transform: rotate(-10deg);
text-align: center;
}
h1 {
font-size: 24pt;
letter-spacing: 4pt;
}
p {
font-size: 48pt;
line-height: 48pt;
}
p + p {
font-size: 18pt;
color: #800;
}
strong {
display: block;
font-size: 100pt;
line-height: 100pt;
}
.spotlight {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid #000;
pointer-events: none;
/* this is the sweet spot */
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.8)), color-stop(0.8, rgba(0,0,0,0)));
background-image: -moz-radial-gradient(50% 50% 45deg,circle closest-side,transparent 0,transparent 100px,rgba(0, 0, 0, 0.8) 120px);
}

Simpan dengan  Nama style.css

selanjutnya buka baru notepad atau wordpad
masukan script berikut:
<html>
<head>
    <title>Spotlight</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
<div>
<h1>Spotlight SIDARY</h1>
<p>Turn on the <strong>light!</strong></p>
<p>Works with Webkit &amp; Firefox</p>
</div>

<span id="spot" class="spotlight"></span>

<script type="text/javascript">
var spot = document.getElementById('spot');
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
   
/* A bit of JS to respond to mouse events */
function moveSpot(e){
    var x = 0;
    var y = 0;

    if (!e) var e = window.event;
    if (e.pageX || e.pageY)
    {
        x = e.pageX;
        y = e.pageY;
    }
    else if (e.clientX || e.clientY)
    {
        x = e.clientX + document.body.scrollLeft;
        y = e.clientY + document.body.scrollTop;
    }
   
    if (navigator.userAgent.match('AppleWebKit')) {
        var style = '-webkit-gradient(radial, '+x+' '+y+', 0, '+x+' '+y+', 100, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.8)), color-stop(0.8, rgba(0,0,0,0)))';
    } else {
        var style = '-moz-radial-gradient('+x+'px '+y+'px 45deg,circle closest-side,transparent 0,transparent 100px,rgba(0, 0, 0, 0.8) 120px)';
    }
    spot.style.backgroundImage = style;
}

window.onload = function() {
    window.onmousemove = moveSpot;
}
</script>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-572751-1");
pageTracker._setDomainName(".svay.com");
pageTracker._trackPageview();
} catch(err) {}</script>

</body>
</html>

simpan dengan nama spotlight.html
Kunjungi Terus Sidary.

Peraturan :
1. Dilarang Menggunakan Link
2. Dilarang Membuat Kata-kata Sex, porn, Dsb
3. Komentar Yang Positif.

EmoticonEmoticon