Rotating Gradient Overlay

Developer
Jay Karlsven
Size
3,022 Kb
Views
22,264
  1. Rotating Gradient Overlay Previews
  2. Rotating Gradient Overlay HTML Codes
  3. Rotating Gradient Overlay CSS Codes
  4. Rotating Gradient Overlay JS Codes

How do I make an rotating gradient overlay?

Testing a linear gradient background that rotates colors and deg rotation over time. . What is a rotating gradient overlay? How do you make a rotating gradient overlay? This script and codes were developed by Jay Karlsven on 14 October 2022, Friday.

Rotating Gradient Overlay Previews
IQ Test

Rotating Gradient Overlay - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rotating Gradient Overlay</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="gradient-overlay"></div>
<div class="centering-container"> <div id="logo"> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Rotating Gradient Overlay - Script Codes CSS Codes

html, body { margin: 0; height: 100%;
}
body { background: url("https://s3.amazonaws.com/jpk-image-hosting/s4-stuff/library2.jpg"); background-size: cover; background-repeat: no-repeat; overflow: hidden;
}
#gradient-overlay { background: #fc354c; /* fallback for old browsers */ background: -webkit-linear-gradient(#fc354c, #0abfbc); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(#fc354c, #0abfbc); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ height: 100%; width: 100%; position: absolute; opacity: 0.6; z-index: 10;
}
.centering-container { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
#logo { position: relative; width: 200px; z-index: 20; background: rgba(55, 55, 55, 0.5); border-radius: 3px;
}
#logo img { width: 100%;
}

Rotating Gradient Overlay - Script Codes JS Codes

var target = $("#gradient-overlay");
console.log(target);
var deg = 0;
var red1 = {val:252, inc:"pos"};
var green1 = {val:53, inc:"neg"};
var blue1 = {val:76, inc:"pos"};
var red2 = {val:10, inc:"neg"};
var green2 = {val:191, inc:"pos"};
var blue2 = {val:188, inc:"neg"};
setInterval(function() { target.css("background", "linear-gradient("+ deg +"deg,rgb("+red1.val+","+green1.val+","+blue1.val+"),rgb("+red2.val+","+green2.val+","+blue2.val+"))"); cycleColorVals(red1); cycleColorVals(green1); cycleColorVals(blue1); cycleColorVals(red2); cycleColorVals(green2); cycleColorVals(blue2); if (deg === 360) { deg = 1; } else { deg++; }
}, 70);
function cycleColorVals(colorObj) { if (colorObj.val === 255) colorObj.inc = "neg"; if (colorObj.val === 0) colorObj.inc = "pos"; if (colorObj.inc === "neg") colorObj.val--; if (colorObj.inc === "pos") colorObj.val++;
}
Rotating Gradient Overlay - Script Codes
Rotating Gradient Overlay - Script Codes
Home Page Home
Developer Jay Karlsven
Username JayV30
Uploaded October 14, 2022
Rating 3
Size 3,022 Kb
Views 22,264
Do you need developer help for Rotating Gradient Overlay?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jay Karlsven (JayV30) Script Codes
Name
SVG Animated Text Stroke
Profile CSS
A Pen by Jay Karlsven
LESS MIXINS for Highlighting Images
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!