Pubblicato da Oggi vi propongo un breve script javascript che consente di creare un effetto terremoto sulle vostre pagine web.
Il suddetto codice, da inserire in una pagina html, consente di ottenere l'effetto tremolio su uno specifico elemento, ad esempio un box div.
Vediamo subito come fare.
Come ottenere l'effetto terremoto in Javascript
Per poter far tremare un box html al click del mouse, basta creare una pagina html inserendo il suddetto codice:
<html>
<head>
<title>Effetto terremoto</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
#box
{
width: 200px;
height: 200px;
background: #ff0ccc;
}
</style>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="box">box</div>
<script>
$( document ).click(function() {
$("#box").effect("shake");
});
</script>
</body>
</html>
Senza bisogno quindi di copiare alcuna libreria sul vostro server, ma semplicemente usando la sacra scuola jquery, inglobabile in remoto, potrete ottenere l'effetto terremoto al click del mouse, tramite la proprietà js shake, della suddetta libreria.
Per vedere questo script all'opera, ho girato per voi un mini video, che linko ed inglobo qui sotto:
https://youtu.be/tubwX6sONkc
Fine breve tutorial javascript.
Ovviamente questo effetto potrebbe essere applicato anche ad altri elementi html, ed anche partire in automatico al caricamento della pagina.
Piaciuto l'articolo? Lascia un commento!
EmoticonEmoticon