Rainbow Title

In this example below you will see how to do a Rainbow Title with some HTML / CSS and Javascript

Change the color of the title according to the position of the mouse.

Thumbnail
This awesome code was written by tibomahe, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tibomahe ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Rainbow Title</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' />
 
<h1 class="rainbow">RAINBOW</h1>

<script src="https://code.jquery.com/jquery-latest.js"></script>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/tibomahe/rainbow-title-ayril */
* {margin: 0; padding: 0;}

body {
  background-image: url(http://img15.hostingpics.net/pics/205397cloudsbg.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover; 
	font-family: helvetica, arial;
	overflow: hidden;
}

h1 {
  position:absolute;
	width:650px;
	left:50%;
	top:50%;
	margin:-100px 0 0 -250px;
	font-family:'Lobster';
	font-size:130px;
	color:rgba(153,153,153); /*default color*/
	opacity:0;
	-webkit-transition: opacity 1s ease;
	-moz-transition: opacity 1s ease;
	-ms-transition: opacity 1s ease;
	-o-transition: opacity 1s ease;
	transition: opacity 1s ease;
	}

/*Downloaded from https://www.codeseek.co/tibomahe/rainbow-title-ayril */
(function() {
  $(window).mousemove(function(e) {
    var x, y, maxX, h, s, l;
    x = e.pageX; //Put the abscissa of the mouse in a variable.
    y = e.pageY; //Put the ordinate of the mouse in a variable.
    maxX = window.innerWidth;
//hsl value (hue, saturation, lightness) in relation to the position of the mouse.
    h = (x / maxX * 360); //h is a random hue of the color wheel (360┬░). Its value is thus between 0 and 360. 
    s = 50; //(%) We can set here saturation to its middle.
    l = 50; //(%) We can set here lightness to its middle.
    $('h1').css("opacity", "1");
    $('.rainbow').css("color", "hsl(" + h + ", " + s + "%, " + l + "%)"); //Change the color with its new values.
  });
})();

Comments