Realistic Interactive Text Shadow With jQuery And CSS
File Size: | 5.93 KB |
---|---|
Views Total: | 200 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Use the CSS text-shadow property and a little bit of jQuery to create a realistic and interactive shadow that appears to fall depending on where your mouse pointer is located and create an illusion of a text that is falling behind another.
How to use it:
1. Add your text to the page.
<!-- Shadow Text --> <div class="shadow-text lighter"> jQuery </div> <div class="shadow-text bolder"> jQuery </div> <!-- Foreground Text --> <div class="shadow-text text"></div>
2. The necessary CSS for the text shadow.
.shadow-text { font-size: 270px; letter-spacing: 0.2em; width: 100vw; position: absolute; top: 50%; left: calc(50% + 15px); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; } .shadow-text.lighter { mix-blend-mode: multiply; z-index: 2; color: transparent; opacity: 0.9; text-shadow: 0px 0px 10px #1e1e1e; } .shadow-text.bolder { transform: translate(-50%, -50%) scale(1); filter: blur(10px); color: #fff; mix-blend-mode: multiply; z-index: 1; color: transparent; opacity: 0.35; } .shadow-text.text { background-image: url("/path/to/text.png"); background-repeat: no-repeat; background-position: stretch; background-size: contain; z-index: 10; position: absolute; top: 50%; left: 50%; height: 200px; width: 864px; transform: translate(-50%, -50%); text-shadow: none; color: #fff; }
3. Load the required jQuery library at the end of the document.
<script src="/path/to/cdn/jquery.slim.min.js"></script>
4. The main jQuery script to detect mousemove events and apply the shadow to the text based on the cursor position.
$(function () { let $shadow = $(".text"); let $shadowLighter = $(".lighter"); let $shadowBolder = $(".bolder"); //let shadowMax = $(window).innerHeight(); let shadowMax = 450; let shadowMin = shadowMax * -1; let shadowMidPoints = [ $shadow.offset().left + $shadow.width() / 2, $shadow.offset().top + $shadow.height() / 2 ]; let shadowSteps = 20; var shadowBlur = 10; $(document).on("mousemove", (e) => { let shadowX = Math.min( shadowMax, Math.max(shadowMin, shadowMidPoints[0] - e.pageX) ); let shadowY = Math.min( shadowMax, Math.max(shadowMin, shadowMidPoints[1] - e.pageY) ); var shadowValue; var shadowValueBolder; var shadowOpacity; var shadowOpacityBolder; for (var i = 0; i < shadowSteps; i++) { var newOffsetX = Math.floor(((shadowX / 2) * i) / 50); var newOffsetY = Math.floor(((shadowY / 2) * i) / 50); shadowOpacity = 1 - shadowSteps * i * 0.002; shadowOpacityBolder = 1 - shadowSteps * i * 0.005; shadowBlur = i * 1.5; if (shadowValue === undefined) { shadowValue = "0px 0px " + 10 + "px rgba(20, 17, 15, 0.3)"; shadowValueBolder = "0px 0px " + 10 + "px rgba(20, 17, 15, 1)"; } else { shadowValue += ", " + newOffsetX * 2 + "px " + newOffsetY * 2 + "px " + shadowBlur * 1.25 + "px rgba(20, 17, 15, " + shadowOpacity / 5 + ")"; shadowValueBolder += ", " + newOffsetX * 0.25 + "px " + newOffsetY * 0.25 + "px " + shadowBlur * 1.5 + "px rgba(20, 17, 15, " + shadowOpacityBolder / 5 + ")"; } } $shadowLighter.css("text-shadow", shadowValue); $shadowBolder.css("text-shadow", shadowValueBolder); }); });
This awesome jQuery plugin is developed by shadeydave. For more Advanced Usages, please check the demo page or visit the official website.