Tutorial Home Page Design Using JavaScript Gradient Navigation Html and CSS :
in this We Have create 3 files there are
1.index.html
2.style.css
3.function.js
in the Navigation part We have to add Text or Images.
Index.html:
= = = = = = =
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>JavaScript Gradient Navigation</title>
<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css'>
<link rel="stylesheet" href="style.css">
</head>
<body bgcolor="black">
<center><h1>Choose Gradient Direction</h1></center>
<div class="content">
<div class="wrap">
<div class="inner-sec">
<div class="btns">
<button class="btn btn top active" type="button" data-dir="top"><i class="fas fa-long-arrow-alt-right"></i></button>
<button class="btn btn left" type="button" data-dir="left"><i class="fas fa-long-arrow-alt-right"></i></button>
<button class="btn btn bottom" type="button" data-dir="bottom"><i class="fas fa-long-arrow-alt-right"></i></button>
<button class="btn btn" type="button" data-dir="right"><i class="fas fa-long-arrow-alt-right"></i></button>
<button class="btn btn top-left" type="button" data-dir="top left"><i class="fas fa-long-arrow-alt-right"></i></button>
<button class="btn btn top-right" type="button" data-dir="top right"><i class="fas fa-long-arrow-alt-right"></i></button>
<button class="btn btn bottom-left" type="button" data-dir="bottom left"><i class="fas fa-long-arrow-alt-right"></i></button>
<button class="btn btn bottom-right" type="button" data-dir="bottom right"><i class="fas fa-long-arrow-alt-right"></i></button>
</div>
</div>
</div>
<div class="wrap">
<div class="inner-sec area" data-gradient="#FF3434, #FFC41E 40%, #009EE3 80%" data-gradient-direction="top">
<div class="items">
<a href="https://www.javatpoint.com/html-tutorial">
<img src="img1.png" height=120 width=150/>
</a>
</div>
<div class="items">
<a href="https://www.javatpoint.com/css-tutorial">
<img src="img2.png" height=120 width=150/>
</a>
</div>
<div class="items">
<a href="https://www.javatpoint.com/javascript-tutorial">
<img src="img3.jpg" height=120 width=150/>
</a>
</div>
<div class="items">
<a href="https://www.javatpoint.com/java-tutorial">
<img src="img4.jpg" height=120 width=150/>
</a>
</div>
<div class="items">
<a href="https://www.javatpoint.com/net-framework">
<img src="img12.jpg" height=120 width=150/>
</a>
</div>
<div class="items">
<a href="https://www.javatpoint.com/angularjs-tutorial">
<img src="img6.png" height=120 width=150/>
</a>
</div>
<div class="items">
<a href="https://www.javatpoint.com/php-tutorial">
<img src="img7.png" height=120 width=150/>
</a>
</div>
<div class="items">
<a href="https://www.javatpoint.com/jquery-tutorial">
<img src="img8.jpg" height=120 width=150/>
</a>
</div>
<div class="items">
<a href="https://www.javatpoint.com/jsp-tutorial">
<img src="img9.jpg" height=120 width=150/>
</a>
</div>
<div class="items">
<a href="https://www.javatpoint.com/nodejs-tutorial">
<img src="img10.png" height=120 width=150/>
</a>
</div>
<div class="items">
<a href="https://www.javatpoint.com/oracle-tutorial">
<img src="img11.png" height=120 width=150/>
</a>
</div>
<div class="items">
<a href="https://www.javatpoint.com/c-programming-language-tutorial">
<img src="img12.png" height=120 width=150/>
</a>
</div>
</div>
</div>
</div>
<script src="function.js"></script>
</body>
</html>
Style.Css :
= = = = = =
body {
font-family: 'Anton', sans-serif;
color: #212121;
letter-spacing: 2px;
}
body a {
color: inherit;
text-decoration: none;
}
h1
{
color:white;
}
.btns {
display: flex;
justify-content: center;
}
.btn {
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
padding: 20px 20px;
margin-right: 10px;
background-color: #fff;
border: 2px solid #212121;
border-radius: 50%;
cursor: pointer;
outline: none;
}
.btn:last-child {
margin-right: 0;
}
.btn:hover, .btn.active {
color: #fff;
background-color: red;
}
.btn i {
font-size: 1rem;
}
.content {
max-width: 700px;
margin: auto;
}
.wrap {
margin-bottom: 50px;
}
h2 {
font-weight: 500;
text-align: center;
}
.top i {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.bottom i {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.left i {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.top-left i {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.top-right i {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.bottom-left i {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.bottom-right i {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.area {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.items {
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
padding: 40px 20px;
height: 100px;
line-height: 100px;
font-size: 2rem;
text-align: center;
color: #fff;
border: 2px solid #212121;
border-radius: 5px;
cursor: pointer;
}
.items:hover {
transform: scale(1.5);
z-index: 9999;
}
Function.js:
= = = = = = =
const Area = document.querySelector('.area');
const Items = document.querySelectorAll('.items');
const gradValue = () => {
return Area.dataset.gradient;
};
const gradDir = () => {
return Area.dataset.gradientDirection;
};
const buildGrad = (value, direction) => {
return `to ${direction}, ${value}`;
};
const gradSize = () => {
let firstItemPosX = Items[0].getBoundingClientRect().left;
let cols = 1;
for (let i = 1; i < Items.length; i++) {
if (Items[i].getBoundingClientRect().left > firstItemPosX) {
cols++;
} else {
break;
}
}
let itemPosY = Items[0].getBoundingClientRect().top;
let rows = 1;
for (let i = 1; i < Items.length; i++) {
if (Items[i].getBoundingClientRect().top > itemPosY) {
rows++;
itemPosY = Items[i].getBoundingClientRect().top;
}
}
const itemWidth = Items[0].offsetWidth;
const itemHeight = Items[0].offsetHeight;
let gradSizeX = itemWidth * cols;
let gradSizeY = itemHeight * rows;
return [gradSizeX, gradSizeY, cols, rows];
};
const colRow = () => {
let row = 1;
let col = 1;
let xItemPos = Items[0].getBoundingClientRect().left;
for (let i = 0; i < Items.length; i++) {
if (Items[i].getBoundingClientRect().left > xItemPos) {
col++;
} else {
col = 1;
}
Items[i].dataset.col = col;
}
let yItemPos = Items[0].getBoundingClientRect().top;
for (let i = 0; i < Items.length; i++) {
if (Items[i].getBoundingClientRect().top > yItemPos) {
row++;
yItemPos = Items[i].getBoundingClientRect().top;
}
Items[i].dataset.row = row;
}
};
const setGrad = elem => {
const bgImg = `linear-gradient(${buildGrad(gradValue(), gradDir())})`;
elem.style.backgroundImage = bgImg;
const bgSizeX = `${gradSize()[0]}`;
const bgSizeY = `${gradSize()[1] + 5}`;
elem.style.backgroundSize = `${bgSizeX}px ${bgSizeY}px`;
const bgPosX = bgSizeX * (elem.dataset.col - 1) / gradSize()[2];
const bgPosY = bgSizeY * (elem.dataset.row - 1) / gradSize()[3];
elem.style.backgroundPosition = `${-bgPosX}px ${-bgPosY}px`;
};
const setGradientBg = () => {
Items.forEach(elem => {
colRow();
setGrad(elem);
});
};
setGradientBg();
window.addEventListener('resize', setGradientBg);
const dirBtns = document.querySelectorAll('.btn');
dirBtns.forEach(elem => {
elem.addEventListener('click', () => {
const dir = elem.dataset.dir;
Area.dataset.gradientDirection = dir;
setGradientBg();
dirBtns.forEach(elem => elem.classList.remove('active'));
elem.classList.add('active');
});
});
