Hello, guys in this tutorial we will create animated text shadow animation on the mouse using shinejs, we will learn into this tutorial how to create awesome text shadow
Shine.js (A library for pretty shadows)
Features
- Dynamic light positions
- Customizable shadows
- No library dependencies, AMD compatible
- Uses text or box shadows based on content
- Works in browsers that support textShadow or boxShadow and auto-prefixes if necessary
Include the script
<script src="path/to/shine.min.js"></script>Instantiate shine.js
var shine = new Shine(document.getElementById('my-shine-object'));
Change the light position:
window.addEventListener('mousemove', function(event) {
shine.light.position.x = event.clientX;
shine.light.position.y = event.clientY;
shine.draw();
}, false);
First we need to create two files index.html and style.css then we need to do code for it.
Animated Shadow Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>shadow animation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/shine.js/0.2.7/shine.min.js" integrity="sha512-qqcCgMiPGAtvUSAAErvR6w8Y0/MdKWW1aO2sjg/TVvpO56Z6o1TTsHf+i+nCMxeCxmRbVlzjPnU8FvDNt+8cOA==" crossorigin="anonymous"></script>
</head>
<body>
<h1 id="shiny-text">Stackfindover</h1>
<script>
var shine = new Shine(document.getElementById('shiny-text'));
window.addEventListener('mousemove', function(event) {
shine.light.position.x = event.clientX;
shine.light.position.y = event.clientY;
shine.draw();
}, false);
</script>
</body>
</html>Animated Shadow Step:2
Then we need to add code for style.css which code I provide in the below screen.
* {
padding: 0;
margin: 0;
outline: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
overflow: hidden;
background-color: #ffffff;
}
h1 {
color: #f7f7f7;
font-size: 150px;
display: table;
text-align: center;
}