How we can change the direction of the gradient using HTML CSS JavaScript? Solution: JavaScript Gradient Direction Navigation Program. Gradient’s Direction Change Program With HTML CSS JS.
I am sure that you know about gradient, and also know to implement using CSS. Previously I have shared a Random Gradient Generator Program using JavaScript. But today’s program is about change the direction of gradient fills by clicking.
Today you will learn to create A gradient direction navigation using Javascript. This is a complete program with navigation buttons to change the direction of the gradient. You can use this on your webpage to change the layout’s theme. In my opinion, set the program as users can change the layout.
So, Today I am sharing a JavaScript Gradient Navigation Program. In other words, Change the direction of gradient filling. I have used HTML & CSS to create the layout and fill colors, and javascript changes the direction of fill dynamically. I have not used any library for creating the program, you can call this pure HTML CSS JS program.
If you are thinking now how this program actually is, then see the preview given below.
Preview Of Gradient’s Direction Change Program
See this video preview to getting an idea of how this gradient direction change program looks like.
Now you can see this visually. If you like this, then get the source code of its.
You May Also Like:
- Active Tab Animation With Icons
- Circular Progress Bar
- Portfolio Filter Gallery
- Image Comparision Slider
JavaScript Gradient Direction Navigation Source Code
Before sharing source code, let’s talk about it. As you can see in the preview, First I have created 8 buttons for different directions. Then I have created the blocks to show gradient. I have placed a font-awesome icon on the direction fields and changed the angle of these. After that, I have created 9 divs you can see in the preview.
I have used HTML Data-* attribute to store gradient color and chose the default active div (info). Using CSS I have placed all elements on the right place and gave all the color, border, etc values. I have added active class on a button to show by default value, In this class, I have changed the button color to red and icon color white.
Also placed these values on buttons hover, & create a separate hover effect for the container divs. As you can see, When I hovered on a div then it becomes larger, for this, I have used CSS transform: scale() property. Now JavaScript detects all the elements using document.querySelectorAll . Now javascript changes the value of gradient direction according to the button click.
The JS part is long, I can’t explain it in writing. You will understand after getting the codes if you have good knowledge of JS. For creating this program you have to create 3 files. First for HTML, second for CSS, & third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>JavaScript Gradient Navigation | Webdevtrick.com</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> <div class="content"> <div class="wrap"> <h2>Choose Gradient Direction</h2> <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"> HTML </div> <div class="items"> CSS </div> <div class="items"> JavaScript </div> <div class="items"> Bootstrap </div> <div class="items"> jQuery </div> <div class="items"> React JS </div> <div class="items"> Angular </div> <div class="items"> PHP </div> <div class="items"> Node JS </div> </div> </div> </div> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ body { font-family: 'Anton', sans-serif; color: #212121; letter-spacing: 2px; } body a { color: inherit; text-decoration: none; } .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
The final step, Create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ 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'); }); }); |
That’s It. Now you have successfully created a JavaScript Gradient Direction Navigation Program With HTML CSS. In other words, change gradient’s direction using buttons. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Thanks Shaan,
I am complete beginner in web development. I always loved code. how many years i can do to be a web developer?
Hey, I allways follow your site for amazing code👌.
Codes that u are posting are very attractive and usefull. Good job👍
thanks, stay connected.