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 |
Manipulating SVG With CSS | 3,640 Kb |
Rift.js | 3,311 Kb |
Ken Burns Banner | 3,817 Kb |
Cattywompus - A Subtle Parallax Banner Plugin | 4,486 Kb |
Colored Single-Element Sections | 3,157 Kb |
Smart Fixed Header | 4,519 Kb |
JQuery vs. Native JS Selectors | 2,261 Kb |
Vanilla Flavored Hypher | 22,363 Kb |
SVG Circular Scroll Progress Bar | 7,656 Kb |
Messing Around with CSS3 Shadows | 2,202 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 |
Page Transitions in Backbone | Mikefowler | 3,691 Kb |
Whyutils | LeYvan | 3,752 Kb |
Simple personal profile | Miroot | 2,856 Kb |
Random Gradients - JS | Aldlevine | 2,026 Kb |
A Pen by Patrick Cox | Pcridesagain | 2,899 Kb |
Wikipedia Viewer | Thalpha | 4,426 Kb |
Click Based Rotation Demo | Zeaklous | 2,086 Kb |
Hamburger Menu Animation | Salmanraza | 2,580 Kb |
Cloud upload | Jaflo | 2,774 Kb |
Apple website | Jds317 | 1,835 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!