Text With Mouse Reactive Soft Shadow

Developer
Keegan Brown
Size
2,692 Kb
Views
22,264
  1. Text With Mouse Reactive Soft Shadow Previews
  2. Text With Mouse Reactive Soft Shadow HTML Codes
  3. Text With Mouse Reactive Soft Shadow CSS Codes
  4. Text With Mouse Reactive Soft Shadow JS Codes

How do I make an text with mouse reactive soft shadow?

What is a text with mouse reactive soft shadow? How do you make a text with mouse reactive soft shadow? This script and codes were developed by Keegan Brown on 16 October 2022, Sunday.

Text With Mouse Reactive Soft Shadow Previews
IQ Test

Text With Mouse Reactive Soft Shadow - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Text With Mouse Reactive Soft Shadow</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ h1{ font-family: "Avant Garde", "Avantgarde", "Century Gothic", "CenturyGothic", "AppleGothic", "sans-serif"; font-size: 92px; padding: 0 50px; text-align: center; text-transform: uppercase; /*text-rendering: optimizeLegibility;*/ color: #FFFFFF; font-weight:900; letter-spacing: 0.4em; transform: translate3d(0,0,10px); top: 30%; position: relative;
}
html, body { background-color: #fdfdfd; width:100%; height:100%; overflow:hidden; perspective: 300px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1 id="main" class="">Text with Shadow</h1> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Text With Mouse Reactive Soft Shadow - Script Codes CSS Codes

h1{ font-family: "Avant Garde", "Avantgarde", "Century Gothic", "CenturyGothic", "AppleGothic", "sans-serif"; font-size: 92px; padding: 0 50px; text-align: center; text-transform: uppercase; /*text-rendering: optimizeLegibility;*/ color: #FFFFFF; font-weight:900; letter-spacing: 0.4em; transform: translate3d(0,0,10px); top: 30%; position: relative;
}
html, body { background-color: #fdfdfd; width:100%; height:100%; overflow:hidden; perspective: 300px;
}

Text With Mouse Reactive Soft Shadow - Script Codes JS Codes

$(function () {
var mainBlock = $('#main');
var mouse = { x: 0, y: 0 };
var wind = { w:window.innerWidth/2, h: 100+(mainBlock.height()/2) };
var h1 = $("h1");
var sunTween = TweenMax.fromTo( mouse, 3, { x:mainBlock.width()/2, y:-100 },{ yoyo:true, repeat: -1, x: mainBlock.width()/2, y: -500, ease: Power3.easeInOut });
document.addEventListener("mousemove", function (e) { sunTween.pause(); mouse.x = e.clientX; mouse.y = e.clientY - h1.offset().top;
});
function ontick () { wind.w = window.innerWidth/2; var shadow = ""; var i = 20; var len = i; while ( i-- ) { shadow += ( Math.round(i*-((mouse.x-(wind.w))/100))+"px "+Math.round(i*-((mouse.y-wind.h)/100))+"px "+(i*4)+"px hsla(0,0%,0%,"+1/(len-1)+")," ); } //console.log(shadow); TweenMax.set(h1, { textShadow: shadow } );
}
//ontick();
TweenMax.ticker.addEventListener("tick", ontick);
});
Text With Mouse Reactive Soft Shadow - Script Codes
Text With Mouse Reactive Soft Shadow - Script Codes
Home Page Home
Developer Keegan Brown
Username keeganbrown
Uploaded October 16, 2022
Rating 3.5
Size 2,692 Kb
Views 22,264
Do you need developer help for Text With Mouse Reactive Soft Shadow?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Keegan Brown (keeganbrown) Script Codes
Name
A CSS Trip through outer space
Paint drips up the wall, sometimes.
Meteor Shower
Easy-peasy 3D Scrolling Parallax with GSAP
Trying out GSAP 1.19
Particles with GSAP and SketchJS
GreenSock SplitText Contest Entry
Lava Tiles
Parallaxy Background images
Particles with pixi.js
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!