|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
|
<title</title>
|
|
|
|
|
|
<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="animaz">
|
|
|
|
|
|
<img src="ale.png" alt="">
|
|
|
|
|
|
<!-- <div class="maskContainer"> -->
|
|
|
|
|
|
<img class="mask uno draggable" src="mask.png" alt="">
|
|
|
|
|
|
<img class="mask due draggable" src="mask2.png" alt="">
|
|
|
|
|
|
<!-- </div> -->
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<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 dell’evento ;)</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
const bodyWidth = document.body.clientWidth;
|
|
|
|
|
|
let currentZIndex = 1; // Initialize a variable to keep track of the highest z-index
|
|
|
|
|
|
|
|
|
|
|
|
document.querySelectorAll('.draggable').forEach(draggable => {
|
|
|
|
|
|
|
|
|
|
|
|
draggable.addEventListener('touchstart', (event) => {
|
|
|
|
|
|
draggable.style.zIndex = ++currentZIndex; // Set the z-index to a higher value
|
|
|
|
|
|
|
|
|
|
|
|
const shiftX = event.clientX - draggable.getBoundingClientRect().left;
|
|
|
|
|
|
const shiftY = event.clientY - draggable.getBoundingClientRect().top;
|
|
|
|
|
|
|
|
|
|
|
|
function moveAt(pageX, pageY) {
|
|
|
|
|
|
draggable.style.left = `${pageX - shiftX}px`;
|
|
|
|
|
|
draggable.style.top = `${pageY - shiftY}px`;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function onMouseMove(event) {
|
|
|
|
|
|
moveAt(event.pageX, event.pageY);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// document.addEventListener('mousemove', onMouseMove);
|
|
|
|
|
|
|
|
|
|
|
|
draggable.addEventListener('touchstart', () => {
|
|
|
|
|
|
document.removeEventListener('touchend', onMouseMove);
|
|
|
|
|
|
}, { once: true });
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
draggable.addEventListener('dragstart', () => false);
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
