Auto Rotate Slider In HTML, CSS And JavaScript

on
0

Single Div Blob AI Loaders In HTML, CSS And JavaScript

on

 

HTML:


<h1>Single Div AI Loaders</h1>
<div class="loaders">
<div class="blob"></div>
<div class="blob" style="filter: hue-rotate(45deg)"></div>
<div class="blob" style="filter: hue-rotate(90deg)"></div>
<div class="blob" style="filter: hue-rotate(135deg)"></div>
<div class="blob" style="filter: hue-rotate(180deg)"></div>
<div class="blob" style="filter: hue-rotate(225deg)"></div>
<div class="blob" style="filter: hue-rotate(270deg)"></div>
<div class="blob" style="filter: hue-rotate(315deg)"></div>
</div>
<p>Made using <b>CSS Blend Modes</b> and <b>Border Radius</b></p>

CSS:


@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;900&display=swap");
* {
margin: 0;
box-sizing: border-box;
color: #09fbd3;
font-family: "Orbitron", sans-serif;
}
body {
background-color: #000;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.loaders {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
place-items: center;
}
.blob {
--d: 15vw;
--b-after: 50%;
--b-before: 50%;
border-radius: 50%;
margin: 10px;
}
.blob,
.blob::after,
.blob::before {
width: var(--d);
height: var(--d);
mix-blend-mode: difference;
transition: border-radius 0.5s linear;
}
.blob::after,
.blob::before {
position: absolute;

content: "";
}
.blob::before {
background-color: #ff1178;
border-radius: var(--b-before);
}
.blob {
background-color: #7cff01;
}
.blob::after {
background-color: #01fff4;
border-radius: var(--b-after);
}
p b {
text-decoration: underline;
}


JavaScript:


const blobs = document.querySelectorAll(".blob");

const randomBorderRadius = () => {
return `${Math.floor(Math.random() * 60) + 40}% ${
Math.floor(Math.random() * 60) + 40
}% ${Math.floor(Math.random() * 60) + 40}% ${
Math.floor(Math.random() * 60) + 40
}% / ${Math.floor(Math.random() * 60) + 40}% ${
Math.floor(Math.random() * 60) + 40
}% ${Math.floor(Math.random() * 60) + 40}% ${
Math.floor(Math.random() * 60) + 40
}%`;
};

Array.from(blobs).forEach((c) =>
setInterval(() => {
c.style.borderRadius = randomBorderRadius();
c.style.setProperty("--b-before", randomBorderRadius());
c.style.setProperty("--b-after", randomBorderRadius());
}, 500)
);

Comments

Post a Comment