jdm_javascript_dom_manipulator
Version:
framework javascript
174 lines (160 loc) • 8.51 kB
HTML
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animazioni</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
#box {
width: 150px;
height: 150px;
background-color: #0d6efd;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 100px auto 0 auto;
border-radius: 0.5rem;
font-weight: bold;
font-size: 1.2rem;
}
</style>
</head>
<body>
<script src="../dist/jdm.js"></script>
<script>
const dom = JDM(
// language=html
`
<div class="container my-4">
<div class="row">
<div class="col d-flex align-items-center mb-3">
<h2 class="">Animazioni</h2>
</div>
<hr>
</div>
<div class="row g-3">
<div class="col-md-4">
<label class="form-label">Animazione</label>
<select id="animationSelector" class="form-select" data-name="animationName">
<option value="jdm_fadeIn">fadeIn</option>
<option value="jdm_fadeOut">fadeOut</option>
<option value="jdm_fadeInUp">fadeInUp</option>
<option value="jdm_fadeInDown">fadeInDown</option>
<option value="jdm_fadeInLeft">fadeInLeft</option>
<option value="jdm_fadeInRight">fadeInRight</option>
<option value="jdm_fadeOutUp">fadeOutUp</option>
<option value="jdm_fadeOutDown">fadeOutDown</option>
<option value="jdm_fadeOutLeft">fadeOutLeft</option>
<option value="jdm_fadeOutRight">fadeOutRight</option>
<option value=jdm_"bounce">bounce</option>
<option value="jdm_tada">tada</option>
<option value="jdm_zoomIn">zoomIn</option>
<option value="jdm_zoomOut">zoomOut</option>
<option value="jdm_rotation">rotation</option>
</select>
<div class="form-text">Seleziona il tipo di animazione da applicare al box.</div>
</div>
<div class="col-md-4">
<label class="form-label">Durata (ms)</label>
<input type="number" data-name="duration" id="duration" class="form-control" placeholder="1000">
<div class="form-text">Durata dell'animazione in millisecondi.</div>
</div>
<div class="col-md-4">
<label class="form-label">Delay (ms)</label>
<input type="number" data-name="delay" id="delay" class="form-control" placeholder="es. 0">
<div class="form-text">Ritardo prima dell'inizio dell'animazione.</div>
</div>
<div class="col-md-4">
<label class="form-label">Easing</label>
<select id="easing" data-name="easing" class="form-select">
<option value="">(default)</option>
<option value="ease">ease</option>
<option value="ease-in">ease-in</option>
<option value="ease-out">ease-out</option>
<option value="ease-in-out">ease-in-out</option>
<option value="linear">linear</option>
<option value="step-start">step-start</option>
<option value="step-end">step-end</option>
</select>
<div class="form-text">Definisce la funzione di temporizzazione dell'animazione.</div>
</div>
<div class="col-md-4">
<label class="form-label">Fill</label>
<select id="fill" data-name="fill" class="form-select">
<option value="">(default)</option>
<option value="none">none</option>
<option value="forwards">forwards</option>
<option value="backwards">backwards</option>
<option value="both">both</option>
<option value="auto">auto</option>
</select>
<div class="form-text">Determina lo stile dell'elemento fuori dal tempo attivo.</div>
</div>
<div class="col-md-4">
<label class="form-label">Composite</label>
<select id="composite" data-name="composite" class="form-select">
<option value="">(default)</option>
<option value="replace">replace</option>
<option value="add">add</option>
<option value="accumulate">accumulate</option>
</select>
<div class="form-text">Combinazione dell'animazione con lo stile esistente.</div>
</div>
<div class="col-md-4">
<label class="form-label">Direction</label>
<select id="direction" data-name="direction" class="form-select">
<option value="">(default)</option>
<option value="normal">normal</option>
<option value="reverse">reverse</option>
<option value="alternate">alternate</option>
<option value="alternate-reverse">alternate-reverse</option>
</select>
<div class="form-text">Direzione di riproduzione dell'animazione.</div>
</div>
<div class="col-md-4">
<label class="form-label">Iterazioni</label>
<input type="text" id="iterations" data-name="iterations" class="form-control" placeholder="es. 1, 3, Infinity">
<div class="form-text">Numero di volte che l’animazione verrà eseguita.</div>
</div>
</div>
<div class="mt-5 d-flex justify-content-center">
<button id="box" data-name="box" class="btn btn-primary text-white p-5 rounded "><span class="display-1">▶</span>
</button>
</div>
</div>
`, document.body).jdm_extendChildNode();
box.addEventListener("click", () => {
box.jdm_clearAnimations();
const animationName = dom.animationName.jdm_getValue();
const duration = parseInt( dom.duration.jdm_getValue()) || 1000;
const delay = parseInt(dom.delay.jdm_getValue()) || 0;
const easing = dom.easing.jdm_getValue() || undefined;
const fill = dom.fill.jdm_getValue() || undefined;
const composite = dom.composite.jdm_getValue() || undefined;
const direction = dom.direction.jdm_getValue() || undefined;
let iterations = dom.iterations.jdm_getValue()
iterations = iterations === "Infinity" ? Infinity : parseInt(iterations) || 1;
const options = {
duration: duration,
delay: delay,
fill: fill,
easing: easing,
composite: composite,
direction: direction,
iterations: iterations,
};
if (typeof box[animationName] === "function") {
if (animationName === "jdm_rotation") {
box[animationName]( () => { console.log(`${animationName} complete`) }, 360, options );
} else {
box[animationName]( () => { console.log(`${animationName} complete`) }, options );
}
} else {
console.warn(`Metodo ${animationName} non trovato su box`);
}
});
</script>
</body>
</html>