moving-shadow
Version:
A JavaScript module, which creates a responsive text shadow based on mouse position (desktop) or device orientation (mobile)
73 lines (66 loc) • 1.61 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css2?family=Raleway+Dots&display=swap" rel="stylesheet">
<!-- <script src="../movingShadow.js"></script> -->
<script src="https://unpkg.com/moving-shadow"></script>
<title>Shadow Example | Moving Shadow</title>
</head>
<body>
<div class="container">
<h2>walking on pins and needles</h3>
</div>
</body>
</html>
<style>
html, body {
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
height: 100vh;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
background-color: #fff;
color: #5af;
font-family: 'Raleway Dots', cursive;
font-size: 4rem;
}
@media (max-width: 600px) {
.container {
font-size: 3rem;
}
}
h2, h3 {
margin: 10px auto;
text-align: center;
max-width: 80%;
font-weight: 200;
}
</style>
<script>
const fixedColor = "#ccc";
const settings = {
selector: "h2, h3", // targets class or id
color: "rgba(191, 191, 191, 0.4)", // shadow-color
xOffset: 7, // X offset value
yOffset: 7, // Y offset value
fixedShadow: `
0px 0px ${fixedColor},
1px 1px ${fixedColor},
2px 2px ${fixedColor},
3px 3px ${fixedColor},
4px 4px ${fixedColor},
5px 5px ${fixedColor},
6px 6px ${fixedColor},
7px 7px ${fixedColor}`// "5px 5px #555" if you want to includ an optional fixed shadow
}
movingShadow(settings);
</script>