moving-shadow
Version:
A JavaScript module, which creates a responsive text shadow based on mouse position (desktop) or device orientation (mobile)
81 lines (72 loc) • 1.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <script src="../movingShadow.js"></script> -->
<script src="https://unpkg.com/moving-shadow"></script>
<title>Shadow Example | Moving Shadow</title>
</head>
<body>
<div class="container">
<h1 class="moving-one">day drinking</h1>
<!-- <a href="https://www.pexels.com/photo/close-up-of-a-concrete-wall-4175158/">photo source</a> -->
</div>
</body>
</html>
<style>
html, body {
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
height: 100vh;
background-color: #79a698;
}
.container {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
background-color: #40bf80;
background: url("img/birds-eye.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
color: #fff;
font-family: helvetica;
font-size: 3rem;
}
@media (max-width: 600px) {
.container {
font-size: 1.8rem;
}
}
h1, a {
margin: 10px auto;
text-align: center;
}
a {
position: fixed;
bottom: 0;
right: 0;
margin: 5px;
padding: 5px;
text-decoration: none;
font-size: 16px;
color: #fff;
background-color: rgb(51, 51, 51, 0.5);
}
</style>
<script>
const fixedColor = "#222";
const settings = {
selector: ".moving-one", // targets class or id
shadowType: "dropShadow", // "shadow", "dropShadow", "perspective"
diffusion: 3, // blur-radius
color: "rgb(51, 51, 51, 0.5)", // shadow-color
}
movingShadow(settings);
</script>