Gradual.js
How do I make an gradual.js?
A slightly refined plugin based on work done by Michael McMillan. See the original at http://bit.ly/10EDU9K, which was stolen from http://bit.ly/KvWBTK. Good times.. What is a gradual.js? How do you make a gradual.js? This script and codes were developed by Kyle Foster on 04 September 2022, Sunday.
Gradual.js - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gradual.js</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 class="gradient"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Gradual.js - Script Codes CSS Codes
.gradient { position: fixed; width: 100%; height: 100%;
}
Gradual.js - Script Codes JS Codes
/** * Gradual: Transitioned gradient backgrounds * MIT license https://www.opensource.org/licenses/mit-license.php/ * @author Kyle Foster http://kylefoster.me * Stolen from https://bit.ly/10EDU9K & https://bit.ly/KvWBTK */
;(function ( $, window, document, undefined ) { $.fn.gradual = function ( options ) { options = $.extend( {}, $.fn.gradual.options, options ); return this.each(function () { // Define our variables var step = 0, element = $(this), colorIndex = [0,1,2,3], transSpeed = options.transSpeed / 1000, colors = new Array([62,35,255],[60,255,60],[255,35,98],[45,175,230],[255,0,255],[255,128,0]); // Gradient update function function updateGradient() { var istep = 1 - step, c0x0 = colors[colorIndex[0]], c0x1 = colors[colorIndex[1]], c1x0 = colors[colorIndex[2]], c1x1 = colors[colorIndex[3]], r1 = Math.round(istep * c0x0[0] + step * c0x1[0]), g1 = Math.round(istep * c0x0[1] + step * c0x1[1]), b1 = Math.round(istep * c0x0[2] + step * c0x1[2]), r2 = Math.round(istep * c1x0[0] + step * c1x1[0]), g2 = Math.round(istep * c1x0[1] + step * c1x1[1]), b2 = Math.round(istep * c1x0[2] + step * c1x1[2]), color1 = '#' + ((r1 << 16) | (g1 << 8) | b1).toString(16), color2 = '#' + ((r2 << 16) | (g2 << 8) | b2).toString(16), prefix = (/mozilla/.test(navigator.userAgent.toLowerCase()) && !/webkit/.test(navigator.userAgent.toLowerCase())) ? '-moz-' : (/webkit/.test(navigator.userAgent.toLowerCase())) ? '-webkit-' : (/msie/.test(navigator.userAgent.toLowerCase() )) ? '-ms-' : (/opera/.test(navigator.userAgent.toLowerCase() )) ? '-o-' : ''; // Set our gradient element.css({ background : prefix + 'linear-gradient(left top, ' + color1 + ' 0%, ' + color2 + ' 100%)' }); step += transSpeed; if ( step >= 1 ) { step %= 1; colorIndex[0] = colorIndex[1]; colorIndex[2] = colorIndex[3]; colorIndex[1] = (colorIndex[1] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length; colorIndex[3] = (colorIndex[3] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length; } } // Kick off timed intervals setInterval(updateGradient, 10); }); } // Overridable default options $.fn.gradual.options = { transSpeed : 2 // Higher number = faster transition }
})( jQuery, window, document );
// Instantiate plugin
$('.gradient').gradual();
Developer | Kyle Foster |
Username | hkfoster |
Uploaded | September 04, 2022 |
Rating | 3.5 |
Size | 2,685 Kb |
Views | 28,336 |
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!
Name | Size |
Rift.js | 3,311 Kb |
Vanilla FlowType.js | 4,247 Kb |
Messing Around with CSS3 Shadows | 2,202 Kb |
Rumble on Hover | 150,889 Kb |
SVG Optimization Breakdown | 8,022 Kb |
Super Simple Fader | 2,014 Kb |
Smart Fixed Header | 4,519 Kb |
Ken Burns Banner | 3,817 Kb |
Vanilla Flavored Unorphanize | 5,098 Kb |
Slimslider.js | 3,870 Kb |
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!
Name | Username | Size |
Blank Starter | Mhartington | 2,171 Kb |
Navcube | Wbarlow | 4,775 Kb |
Shopping cart | Andiio | 6,581 Kb |
Price Comparison Table | Orrinward | 3,459 Kb |
Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
Scifi-style Radio-based Tab | Aaronchuo | 4,427 Kb |
Funny menu | AxeLVaisper | 4,671 Kb |
A Pen by Mike Otis | Mikeotis | 3,185 Kb |
Reviews and Ratings Star | Zbnmstry | 1,591 Kb |
Commuter Line Tokyu 8500 | Pedox | 7,031 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!