Buongiorno, mi sono impelagato nel progettare la mia pagina web. Ho fatto davvero molte ricerche e tentativi ma sono ad un punto morto. Vi sarei veramente grato per un aiuto.
Sto cercando un modo per far partire l'animazione di una div al click di un bottone e fare il reverse dell'animazione ad un nuovo click dello stesso pulsante o anche su di uno differente.
In sostanza ho una div container ed una div content. La div content è proporzionata in percentuale rispetto al container. Vorrei che il content si rimpicciolisse con un click e tornasse alla sua dimensione originale con un nuovo click.
Usando la funzione :hover e :focus l'animazione parte tranquillamente ma ho bisogno che parta ad un click.
[HTML]<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style type="text/css">
.container {position: absolute; width:90%; height:100%; left:5%; min-width:1000px; border: 1px solid #000}
.content {position:relative; width:60%; height:90%; top:1%; left:35%; border: 1px solid}
.nav {position:absolute; width:20%; height:90%; min-height:700px; top:1%; left:1%; padding:1%; border: 1px solid}
.bottone {position:relative; width:90%; height:10%; border:1px solid red;text-align:center;}
.nav:hover ~ .content {transform-origin:right top; -webkit-transform-origin:right top;transform:scale(0.5);-webkit-transform:scale(0.5); transition:all 2s ease-in; -webkit-transition:all 2s ease-in;}
</style>
</head>
<body>
<div class="container">
<div class="nav">
</div>
<div class="content"></div>
</div>
</body>
</html>
[/HTML]
Ho provato quindi ad inserire un label ma così non parte:
[HTML]
#start:checked ~ .content {transform-origin:right top; -webkit-transform-origin:right top;transform:scale(0.5);-webkit-transform:scale(0.5); transition:all 2s ease-in; -webkit-transition:all 2s ease-in;}
<label for="start">Clicca qui</label>
[/HTML]
Ho quindi optato per creare un @keyframes, mettere in pausa l'animazione all'avvio e con un codice java cambiare lo state dell'animazione in running:
[HTML]
.content { transform-origin: right top; animation: ridurre 1s ease-out; animation-direction: alternate; animation-fill-mode:forwards; animation-play-state: paused;}
@keyframes ridurre{
from {transform:scale(1.0);
}
to {transform:scale(0.5);
}
}
window.onload = function () {
document.getElementById('riduci').onclick = function () {
var elems = document.getElementsByClassName('content');
for (var i = 0; i < elems.length; i++) { elems*.style.animationPlayState = 'running';};
}
}
<label id="riduci">
<div id="bottone"><img src="riduci.png" alt="riduci" width="100%"></div>
</label>
[/HTML]
In questa maniera l'animazione parte e si interrompe all'ultimo frame, ma siccome non conosco java non ho idea di come dirgli di riprendere l'animazione al nuovo click in reverse.
Qualche consiglio per continuare su questa strada o c'è qualche altro modo che conoscete?
Grazie mille!!