Square Effect
Here, we create a square effect using HTML, CSS and JS.
Project Folder Structure
Before we start coding we take a look at the project folder structure. We start by creating a folder called – “Square Effect” Inside this folder, we have 3 files. Create these files like below:
- index.html
- style.css
- script.js
HTML
We create square effect using HTML code. Copy the code below and paste it into your index.html file.
<body>
<div class="conatiner">
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
<div class="boxs" id="box1"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
</body>
CSS
We create square effect using CSS code. Copy the code below and paste it into your style.css file.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
}
.conatiner {
display: grid;
grid-template-columns: repeat(7, 10vw);
grid-template-rows: repeat(7, 10vw);
gap: 0.25em;
}
.boxs {
height: 10vw;
width:10vw;
}
.boxs:nth-child(odd) {
background-color: black;
}
.boxs:nth-child(even) {
background-color: red;
}
JS
Finally, we add functionality in square effect using JavaScript. Copy the code below and paste it into your script.js file.
gsap.fromTo(
".boxs",
{
// duration:1,
borderRadius: "0%",
scale: 0.2
},
{
borderRadius: "10%",
rotate: 180,
scale: 1,
repeat: -1,
yoyo: true,
stagger: {
grid: "auto",
from: "center",
amount: 1
}
}
);
CODEPEN
Watch Some Other Topics