<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.review {
position: absolute;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
/* padding: 20px; */
/* width: 250px; */
/* height: 150px; */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: transform 0.2s;
z-index: -999;
}
.review img {
width: 350px;
/* height: 100px; */
margin-bottom: 10px;
}
.reviews {
position: relative;
overflow: hidden;
height: 100vh;
}
</style>
</head>
<body>
<section class="reviews">
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
<div class="review">
<img
src="https://optim.tildacdn.com/tild6261-6363-4631-b939-316233363966/-/resize/808x/-/format/webp/__2022-03-14__174717.png"
alt="Reviewer 1"
/>
</div>
</section>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script>
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function positionAndRotateReviews() {
const reviews = document.querySelectorAll(".review");
const rows = Math.ceil(Math.sqrt(reviews.length));
const cols = rows;
const cellWidth = window.innerWidth / cols;
const cellHeight = window.innerHeight / rows;
let positions = [];
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
positions.push({ x: col * cellWidth, y: row * cellHeight });
}
}
reviews.forEach((review) => {
if (positions.length > 0) {
const randomIndex = getRandomInt(0, positions.length - 1);
const pos = positions.splice(randomIndex, 1)[0];
const randomRotation = getRandomInt(-15, 15);
const offsetX = getRandomInt(0, cellWidth - review.offsetWidth);
const offsetY = getRandomInt(0, cellHeight - review.offsetHeight);
review.style.transform = `translate(${pos.x + offsetX}px, ${
pos.y + offsetY
}px) rotate(${randomRotation}deg)`;
}
});
}
window.addEventListener("load", positionAndRotateReviews);
window.addEventListener("resize", positionAndRotateReviews);
</script>
</body>
</html>
Digər dildə:
EN