You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

125 lines
3.4 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ALE 30</title>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.11/lib/draggable.js"></script>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Funnrwood 30</h1>
<p><i>26 Luglio<br> Civitanova Marche</i></p>
<h2><marquee behavior="" direction="left">MASKED FACE EDITION</marquee></h2>
<div class="description">
<p> Portare costume e asciugamano.<br>Chi vuole rimanere a dormire ci saranno delle tende in giardino per accorgliervi ♥️ </p>
<p>Conferma la tua partecipazione entro il 12.07 e avrai tutte le info dellevento ;)</p>
</div>
<button onclick="ale()">Cambia Ale</button>
<div class="animaz">
<img id="ale" src="ale/1.png" alt="">
</div>
<p>Sposta la maschera!</p>
<div class="maskContainer">
<img class="mask uno draggable" draggable="true" src="mask/mask.png" alt="">
<img class="mask due draggable" draggable="true" src="mask/mask2.png" alt="">
<img class="mask tre draggable" draggable="true" src="mask/mask3.png" alt="">
<img class="mask quattro draggable" draggable="true" src="mask/mask4.png" alt="">
</div>
<script>
let alePic = 1
function ale(){
alePic++
if(alePic == 9){
alePic = 1
}
document.querySelector('#ale').src = `ale/${alePic}.png`
}
document.addEventListener('DOMContentLoaded', () => {
const draggables = document.querySelectorAll('.draggable');
draggables.forEach(draggable => {
// HTML5 Drag and Drop Events
draggable.addEventListener('dragstart', handleDragStart);
draggable.addEventListener('dragend', handleDragEnd);
// Touch Events for mobile
draggable.addEventListener('touchstart', handleTouchStart);
draggable.addEventListener('touchmove', handleTouchMove);
draggable.addEventListener('touchend', handleTouchEnd);
});
function handleDragStart(event) {
event.dataTransfer.setData('text/plain', event.target.id);
setTimeout(() => {
event.target.classList.add('hidden');
}, 0);
}
function handleDragEnd(event) {
event.target.classList.remove('hidden');
}
function handleTouchStart(event) {
const touch = event.touches[0];
event.target.style.position = 'absolute';
event.target.style.zIndex = 1000;
moveAt(touch.pageX, touch.pageY, event.target);
function moveAt(pageX, pageY, element) {
element.style.left = pageX - element.offsetWidth / 2 + 'px';
element.style.top = pageY - element.offsetHeight / 2 + 'px';
}
function onTouchMove(event) {
const touch = event.touches[0];
moveAt(touch.pageX, touch.pageY, event.target);
}
document.addEventListener('touchmove', onTouchMove);
event.target.ontouchend = function () {
document.removeEventListener('touchmove', onTouchMove);
event.target.ontouchend = null;
};
}
function handleTouchMove(event) {
event.preventDefault();
}
function handleTouchEnd(event) {
event.preventDefault();
}
});
</script>
</body>
</html>