colorwave
Version:
A lightweight JavaScript and CSS library for creating animated gradient backgrounds with ease.
122 lines (109 loc) • 3.94 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Gradient Library Demo</title>
<link rel="stylesheet" href="../src/gradient-styles.css">
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #f8f8f8; /* A subtle background for contrast */
}
.gradient-container {
width: 90%;
max-width: 600px;
height: 250px;
margin: 20px auto;
border-radius: 12px;
overflow: hidden; /* Important for gradient to stay within bounds */
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.8em;
font-weight: bold;
text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
transition: transform 0.3s ease; /* Smooth hover effect */
}
.gradient-container:hover {
transform: translateY(-5px);
}
h1 {
color: #333;
margin-bottom: 30px;
font-size: 2.5em;
}
p {
color: #666;
margin-top: 5px;
font-size: 0.9em;
}
</style>
</head>
<body>
<h1>My Awesome Website</h1>
<p>Powered by the Animated Gradient Library</p>
<div
class="animated-gradient-base gradient-container gradient-sunrise">
Awesome Hero Section
</div>
<div id="hero-gradient" class="gradient-container">
Awesome Hero Section
</div>
<div id="secondary-gradient" class="gradient-container"
style="height: 150px;">
Another Animated Background
</div>
<div id="fast-gradient" class="gradient-container"
style="height: 100px;">
Faster Animation!
</div>
<script src="../src/gradient-library.js"></script>
<script>
// Initialize the first gradient on the 'hero-gradient' element
AnimatedGradientJS.init({
target: 'hero-gradient',
colors: ['#29323c', '#485563', '#80d3fe', '#7ea0c4'], // Example: Grey-blue to light blue
speed: '10s',
direction: 'to right',
size: '300%',
timingFunction: 'ease-in-out'
});
// Initialize a second gradient on the 'secondary-gradient' element
AnimatedGradientJS.init({
target: 'secondary-gradient',
colors: ['#FF6B6B', '#556270'], // Example: Red to dark grey
speed: '5s',
direction: '45deg', // Diagonal
size: '200%',
timingFunction: 'linear'
});
// Initialize a third, faster gradient
AnimatedGradientJS.init({
target: 'fast-gradient',
colors: ['#ADD100', '#7B920A', '#B3FFAB', '#12FFF7'], // Greenish tones
speed: '10s', // Much faster
direction: 'to right',
size: '500%' // Even larger size for more movement
});
// You could even use an HTMLElement directly if you have it
// const myDiv = document.querySelector('.some-class');
// if (myDiv) {
// AnimatedGradientJS.init({
// target: myDiv,
// colors: ['#eecda3', '#ef629f']
// });
// }
</script>
</body>
</html>