<div class="Container">
<!-- last card -->
<div class="Picture">
<img class="Picture-img" src="https://media.licdn.com/dms/image/C4D03AQHjPuY9oi3Www/profile-displayphoto-shrink_800_800/0/1579768452204?e=2147483647&v=beta&t=4ZgTgOkSEu2eKRoLWEVtgL8s2zYu80YMxI_0018U9Dk" alt="" />
<div class="Picture-note"><span>@DeyJordan - <a class="Network" href="https://codepen.io/DeyJordan" target="_top"><img src="https://cdn-icons-png.flaticon.com/512/2111/2111501.png" alt="CodePen" /></a><a class="Network" href="https://twitter.com/DeyJordan" target="_top"><img src="https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png" alt="twitter" /></a></span></div>
</div>
<!-- other cards -->
<div class="Picture">
<img class="Picture-img" src="https://picsum.photos/id/733/400" alt="" />
<div class="Picture-note"><span>Over the clouds</span></div>
</div>
<div class="Picture">
<img class="Picture-img" src="https://picsum.photos/id/613/400" alt="" />
<div class="Picture-note"><span>Golden Gate Bridge - San Francisco</span></div>
</div>
<div class="Picture">
<img class="Picture-img" src="https://picsum.photos/id/40/400" alt="" />
<div class="Picture-note"><span>Cat nose</span></div>
</div>
<div class="Picture">
<img class="Picture-img" src="https://picsum.photos/id/465/400" alt="" />
<div class="Picture-note"><span>Mountain</span></div>
</div>
<div class="Picture">
<img class="Picture-img" src="https://picsum.photos/id/1029/400" alt="" />
<div class="Picture-note"><span>Central Park - New York</span></div>
</div>
<div class="Picture">
<img class="Picture-img" src="https://picsum.photos/id/923/400" alt="" />
<div class="Picture-note"><span>Autumn</span></div>
</div>
<div class="Picture">
<img class="Picture-img" src="https://picsum.photos/id/425/400" alt="" />
<div class="Picture-note"><span>Coffee</span></div>
</div>
<div class="Picture">
<img class="Picture-img" src="https://picsum.photos/id/200/400" alt="" />
<div class="Picture-note"><span>An Irish cow enjoying the wind on the beach</span></div>
</div>
<div class="Picture">
<img class="Picture-img" src="https://picsum.photos/id/244/400" alt="" />
<div class="Picture-note"><span>pelicans at the water's edge</span></div>
</div>
<div class="Picture">
<img class="Picture-img" src="https://picsum.photos/id/15/400" alt="" />
<div class="Picture-note"><span>Waterfall</span></div>
</div>
</div>
<a class="Me" href="https://bit.ly/m/JordanDey" target="_top">CodePen by Jordan Dey</a>
@import url("https://fonts.googleapis.com/css2?family=Caveat");
.Container {
position: absolute;
top: 50%;
left: 50%;
}
.Picture {
display: inline-block;
position: absolute;
top: 0;
left: 0;
border: 5px solid #fff;
border-radius: 3px;
background: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%);
user-select: none;
cursor: pointer;
}
.Picture-img {
display: block;
width: 300px;
height: 300px;
pointer-events: none;
}
.Picture-note {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 70px;
padding: 12px 24px;
font-size: 1.5rem;
text-align: center;
}
.Network {
display: inline-block;
padding: 0 5px;
}
.Network img {
width: 1.5rem;
aspect-ratio: 1 / 1;
vertical-align: middle;
}
/* --------------------- */
/* Other styles */
/* --------------------- */
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Caveat', serif;
overflow: hidden;
}
.Me {
position: fixed;
z-index: 15;
bottom: 20px;
left: 50%;
color: #111;
transform: translateX(-50%);
font-weight: 700;
text-align: center;
opacity: 0.7;
}
const pictures = document.querySelectorAll('.Picture');
var previousTouch = undefined;
function updateElementPosition(element, event) {
var movementX, movementY;
if (event.type === 'touchmove') {
const touch = event.touches[0];
movementX = previousTouch ? touch.clientX - previousTouch.clientX : 0;
movementY = previousTouch ? touch.clientY - previousTouch.clientY : 0;
previousTouch = touch;
} else {
movementX = event.movementX;
movementY = event.movementY;
}
const elementY = parseInt(element.style.top || 0) + movementY;
const elementX = parseInt(element.style.left|| 0) + movementX;
element.style.top = elementY + "px";
element.style.left = elementX + "px";
}
function startDrag(element, event) {
const updateFunction = (event) => updateElementPosition(element, event);
const stopFunction = () => stopDrag({update: updateFunction, stop: stopFunction});
document.addEventListener("mousemove", updateFunction);
document.addEventListener("touchmove", updateFunction);
document.addEventListener("mouseup", stopFunction);
document.addEventListener("touchend", stopFunction);
}
function stopDrag(functions) {
previousTouch = undefined;
document.removeEventListener("mousemove", functions.update);
document.removeEventListener("touchmove", functions.update);
document.removeEventListener("mouseup", functions.stop);
document.removeEventListener("touchend", functions.stop);
}
pictures.forEach(picture => {
const range = 100;
const randomX = Math.random() * (range * 2) - range;
const randomY = Math.random() * (range * 2) - range;
const randomRotate = Math.random() * (range / 2) - range / 4;
const startFunction = (event) => startDrag(picture, event);
picture.style.top = `${randomY}px`;
picture.style.left = `${randomX}px`;
picture.style.transform = `translate(-50%, -50%) rotate(${randomRotate}deg)`;
picture.addEventListener("mousedown", startFunction);
picture.addEventListener("touchstart", startFunction);
});
