|
|
|
@ -3,7 +3,8 @@
|
|
|
|
<head>
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
|
|
<meta charset="utf-8">
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
<title</title>
|
|
|
|
<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="description" content="">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
@ -13,53 +14,99 @@
|
|
|
|
<p><i>26 Luglio<br> Civitanova Marche</i></p>
|
|
|
|
<p><i>26 Luglio<br> Civitanova Marche</i></p>
|
|
|
|
|
|
|
|
|
|
|
|
<h2><marquee behavior="" direction="left">MASKED FACE EDITION</marquee></h2>
|
|
|
|
<h2><marquee behavior="" direction="left">MASKED FACE EDITION</marquee></h2>
|
|
|
|
|
|
|
|
<button onclick="ale()">Cambia Ale</button>
|
|
|
|
<div class="animaz">
|
|
|
|
<div class="animaz">
|
|
|
|
<img src="ale.png" alt="">
|
|
|
|
<img id="ale" src="ale/1.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>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<p>Sposta la maschera!</p>
|
|
|
|
|
|
|
|
|
|
|
|
<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) => {
|
|
|
|
<div class="maskContainer">
|
|
|
|
draggable.style.zIndex = ++currentZIndex; // Set the z-index to a higher value
|
|
|
|
<img class="mask uno draggable" draggable="true" src="mask/mask.png" alt="">
|
|
|
|
|
|
|
|
<img class="mask due draggable" draggable="true" src="mask/mask2.png" alt="">
|
|
|
|
const shiftX = event.clientX - draggable.getBoundingClientRect().left;
|
|
|
|
<img class="mask tre draggable" draggable="true" src="mask/mask3.png" alt="">
|
|
|
|
const shiftY = event.clientY - draggable.getBoundingClientRect().top;
|
|
|
|
<img class="mask quattro draggable" draggable="true" src="mask/mask4.png" alt="">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
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);
|
|
|
|
<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 dell’evento ;)</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
draggable.addEventListener('touchstart', () => {
|
|
|
|
|
|
|
|
document.removeEventListener('touchend', onMouseMove);
|
|
|
|
|
|
|
|
}, { once: true });
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
draggable.addEventListener('dragstart', () => false);
|
|
|
|
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>
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
</html>
|
|
|
|
|
poni
6 months ago
