RainBow Effect | Html Css Javascript
Introduction:
Discover the captivating world of the Rainbow Effect in web development, where the fusion of HTML, CSS, and JavaScript gives rise to stunning visual displays. This technique allows you to infuse your web projects with vibrant and dynamic colors that shift seamlessly, creating an eye-catching and engaging user experience.
In this creative journey, you will delve into the art of manipulating gradients, animations, and interactivity. Through the power of HTML and CSS, you'll learn how to craft mesmerizing gradients that smoothly transition through a spectrum of colors, emulating the enchanting beauty of a rainbow. Harness the potential of JavaScript to introduce interactive elements, enabling users to control and customize the colors as they navigate your webpage.
Whether you're a seasoned developer looking to amplify your design prowess or a budding enthusiast eager to explore the boundless world of web aesthetics, the Rainbow Effect offers an avenue to elevate your projects. Unleash your imagination and breathe life into your designs as you master the synergy of HTML, CSS, and JavaScript, and create digital experiences that leave a lasting impression. Embark on this journey and imbue your web creations with the mesmerizing charm of the Rainbow Effect.
Html Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RainBow</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<canvas></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"
integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+
pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
<script>
const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')
canvas.width = innerWidth
canvas.height = innerHeight
class Ball {
constructor({ position, velocity, angle, distance, color }) {
this.position = position
this.velocity = velocity
this.angle = angle
this.distance = distance
gsap.to(this, {
distance: -50,
yoyo: true,
repeat: -1,
duration: 1,
ease: 'power4.inOut',
})
this.color = color
}
draw() {
c.fillStyle = this.color
c.beginPath()
c.arc(this.position.x, this.position.y, 10, 0, Math.PI * 2, false)
c.closePath()
c.fill()
}
update() {
this.draw()
this.angle += 0.01
this.position.x = canvas.width / 2 + Math.cos(this.angle) * this.distance
this.position.y = canvas.height / 2 + Math.sin(this.angle) * this.distance
}
}
const balls = []
const count = 20
const angleIncrement = (Math.PI * 2) / count
const hueIncrement = 360 / count
for (let j = 0; j < 10; j++) {
const distance = j * 30
for (let i = 0; i < count; i++) {
const angle = angleIncrement * i
balls.push(
new Ball({
position: {
x: canvas.width / 2 + Math.cos(angle) * j,
y: canvas.height / 2 + Math.sin(angle) * j,
},
velocity: {
x: 0,
y: 0,
},
angle,
distance,
color: `hsl(${hueIncrement * i}, 100%, 50%)`,
}),
)
}
}
function animate() {
requestAnimationFrame(animate)
c.fillStyle = 'rgba(0,0,0,0.1)'
c.fillRect(0, 0, canvas.width, canvas.height)
balls.forEach((ball) => {
ball.update()
})
}
animate()
</script>
</html>
.png)
