Risorse
index.html
<!DOCTYPE html>
<!--
=====================================================
JQUERY: ESERCITAZIONE SUI METODI CHE CREANO EFFETTI
=====================================================
In questa esercitazione non vengono utilizzate
le classi bootstrap ma un foglio di stile
personalizzato.
Per uniformare i browser viene caricato il foglio
di stile bootstrap-reboot.min.css che, tra l'altro
imposta i font di migliore leggibilità tra quelli
disponibili si default sui vari sistemi operativi.
Viene creato un foglio di stile personalizzate in
cui vengono definite le classi usate nell'esercizio.
======================================================
-->
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Animazioni con jQuery</title>
<link rel="stylesheet" href="css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="css/stile.css">
</head>
<body>
<!-- Barra contenente i bottoni -->
<nav class="my-nav">
<button class="btn btn-dark" id="show">Show</button>
<button class="btn btn-dark" id="hide">Hide</button>
<button class="btn btn-blue" id="fade-in">Fade in</button>
<button class="btn btn-blue" id="fade-out">Fade out</button>
<button class="btn btn-green" id="slide-down">Slide down</button>
<button class="btn btn-green" id="slide-up">Slide up</button>
</nav>
<!-- Campo di gioco: Area in cui si muove la div#cerchio -->
<div id="campo-di-gioco">
<!-- Elemento che viene animato -->
<div id="cerchio"></div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
css/stile.css
/*
=============================================
Foglio di stile per anim/index.html
=============================================
*/
/*
Barra dei bottoni:
- Posizione fissa relativa alla viewport
- In primo piano (z-index: 100)
*/
.my-nav {
background-color: #eeeedd;
position: fixed;
top: 0;
right: 0;
left: 0;
padding: 1em;
z-index: 100;
}
/*
Caratteristiche generali dei bottoni
- Nessun bordo
- Nessun arrotondamento
- Testo tutto maiuscolo
- Spazio tra le lettere aumentato
- Ombra esterna (usato per il feed-back della pressione)
- Piccolo margine per distanzialo dagli altri bottoni
*/
.btn {
border: 0;
border-radius: 0;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0.5em 1em;
line-height: 1;
-webkit-transition: all 0.3s;
transition: all 0.3s;
cursor: pointer;
-webkit-box-shadow: #000 2px 2px 3px;
box-shadow: #000 2px 2px 3px;
margin: 0.1em;
}
/*
Colorazioni diverse per i bottoni
*/
.btn-dark {
background-color: #333;
color: #eee;
}
.btn-blue {
background-color: #008;
color: #ddf;
}
.btn-green {
background-color: #060;
color: #eee;
}
/*
Stato bottone premuto
- Spostamento a destra e in basso di 2px
- Eliminazione dell'ombra esterna
- Transizione allo stato in 0.3 secondi
*/
.pressed {
-webkit-transform: translate(2px, 2px);
transform: translate(2px, 2px);
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
/*
Elemento campo di gioco
- Alto come la viewport (100vh)
- Non appaiono le barre di scorrimento se gli elementi contenuti escono dal perimetro
- Gli elementi contenuti con posizione 'absolute' sono posizionati relativamente al contenitore
*/
#campo-di-gioco {
height: 100vh;
position: relative;
overflow: hidden;
}
/*
Elemento #cerchio
- Visibile grazie al colore di sfondo
- Appare come un cerchio per la dimensione quadrata e il border-radius: 50%
*/
#cerchio {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f80;
top: 100px;
left: 100px;
position: absolute;
}
js/main.js
$(document).ready(function () {
// Gestione feed-back della pressione del pulsante
// in tutti gli elementi con classe .btn
$('.btn').on ('mousedown mouseenter', function (e) {
// Se il bottone del mouse premeuto è quello principale
// cioè quello sinistro (destro nel caso dei mou impostati per mancini)
if (e.which == 1)
// aggiungo la classe pressed
$(this).addClass('pressed');
}).on('mouseup mouseleave', function() {
// rilascio del bottone o uscita
$(this).removeClass('pressed');
})
// Evento click su button#hide
$('#hide').click(function() {
// Applico metodo $().hide a div#cerchio
$('#cerchio').hide(1500);
});
// Evento click su button#show
$('#show').click(function () {
// Cambio una proprietà css di div#cerchio
// Applico metodo $().show a div#cerchio
// Terminata l'animazione ripristino la proprietà css cambiata
$('#cerchio')
.css('border', '2px red solid')
.show(1500, function() {
$(this).css('border', '0');
});
});
// Evento click su button#fade-in
$('#fade-in').click(function () {
// Applico metodo $().fadeIn a div#cerchio
$('#cerchio').fadeIn(1000);
});
// Evento click su button#fade-out
$('#fade-out').click(function () {
// Applico metodo $().fadeOut a div#cerchio
$('#cerchio').fadeOut();
});
// Evento click su button#slide-down
$('#slide-down').click(function () {
// Applico metodo $().slideDown a div#cerchio
$('#cerchio').slideDown();
});
// Evento click su button#slide-up
$('#slide-up').click(function () {
// Applico metodo $().slideUp a div#cerchio
$('#cerchio').slideUp();
});
// Rilevo il click sul campo si gioco
$('#campo-di-gioco').click(function (e) {
var $cerchio = $('#cerchio');
// Genero un numero casuale tra 50 e 200 che utilizzerò
// come diametro del cerchio
var size = Math.round(Math.random() * 150 + 50);
// Ricavo dall'oggetto evento le coordinate del click
// e le modifico in modo che la posizione cliccata risulti
// al termine dell'animazione al centro del cerchio
var x = e.pageX - size / 2;
var y = e.pageY - size / 2;
// Genero un numero casuale tra 0.5 e 1
var op = Math.random * 0.5 + 0.5;
// Lancio l'animazione che modifica la posizione,
// le dimensioni e l'opacità dell'elemento div#cerchio
$cerchio.animate({
left: x + 'px',
top: y + 'px',
height: size + 'px',
width: size + 'px',
opacity: op
}, 1500);
});
});