Headlight.js - text and box shading based on cursor movement

Developer
Twixes
Size
3,343 Kb
Views
40,480
  1. Headlight.js - text and box shading based on cursor movement Previews
  2. Headlight.js - text and box shading based on cursor movement HTML Codes
  3. Headlight.js - text and box shading based on cursor movement CSS Codes
  4. Headlight.js - text and box shading based on cursor movement JS Codes

How do I make an headlight.js - text and box shading based on cursor movement?

The cursor is a source of light.Uses text-shadow and box-shadow. Requires jQuery.. What is a headlight.js - text and box shading based on cursor movement? How do you make a headlight.js - text and box shading based on cursor movement? This script and codes were developed by Twixes on 16 September 2022, Friday.

Headlight.js - text and box shading based on cursor movement Previews
IQ Test

Headlight.js - text and box shading based on cursor movement - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Headlight.js - text and box shading based on cursor movement</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:600|Roboto:700i'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="headlight-field"> <div id="headlight-text">Twixes</div>
</div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Headlight.js - text and box shading based on cursor movement - Script Codes CSS Codes

html,
body { width: 100%; height: 100%; margin: 0; background: #fff;
}
#headlight-field { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%;
}
#headlight-text { will-change: text-shadow; color: #fff; font: 700 italic 24vmin "Roboto"; text-rendering: optimizeLegibility;
}

Headlight.js - text and box shading based on cursor movement - Script Codes JS Codes

// # WORKS WELL ONLY ON LARGE TEXT
// # variable glossary:
// outerId = the ID of the mouse tracking plane (can be the same as innerId)
// innerId = the ID of the shaded element (can be the same as outerId)
// shadowType = determines if the shadow is a text or box one (possible values: 'text', 'box')
// shadowLevelOfDetail = the number of shadows generated (possible values: any natural number)
// shadowLengthLimit = shadow length limit (possible values: any positive number)
// shadowScattering = determines how scattered will the shadow be (possible values: any non-negative number)
// shadowOpacity = shadow opacity, 0 is fully transparent and 1 is fully opaque (possible values: any number between 0 and 1)
// # Headlight's shading function
function HeadlightShade(x, y, innerId, shadowType, shadowLevelOfDetail, shadowLengthLimit, shadowScattering, shadowOpacity) { var shadowSettings = []; var shadows = []; var shadow; x = x - $('#' + innerId).offset().left - $('#' + innerId).width() / 2; y = y - $('#' + innerId).offset().top - $('#' + innerId).height() / 2; // ## Y axis shadow length limiting if (y < 0 && y < -shadowLengthLimit) { y = -shadowLengthLimit; } else if (y > shadowLengthLimit) { y = shadowLengthLimit; } // ## X axis shadow length limiting if (x < 0 && x < -shadowLengthLimit) { x = -shadowLengthLimit; } else if (x > shadowLengthLimit) { x = shadowLengthLimit; } // ## configuring shadows for (i = 0; i < shadowLevelOfDetail; i++) { shadowSettings.push({ x: (-x) / shadowLevelOfDetail * i, y: (-y) / shadowLevelOfDetail * i, width: shadowScattering * i, opacity: shadowOpacity - (shadowOpacity / shadowLevelOfDetail ) * i }); } // ## setting shadows up for (i in shadowSettings) { shadows.push(shadowSettings[i].x + 'px ' + shadowSettings[i].y + 'px ' + shadowSettings[i].width + 'px rgba(0, 0, 0,' + shadowSettings[i].opacity + ')'); } // ## applying shadows if (shadowType === 'text') { $('#' + innerId).css({ 'text-shadow': shadows.join(', ') }); } else if (shadowType === 'box') { $('#' + innerId).css({ 'box-shadow': shadows.join(', ') }); }
}
// # mouse tracking function
function HeadlightTrack(outerId, innerId, shadowType, shadowLevelOfDetail, shadowLengthLimit, shadowScattering, shadowOpacity) { // ## shade basing on the cursor's position $('#' + outerId).mousemove(function (e) { HeadlightShade(e.pageX, e.pageY, innerId, shadowType, shadowLevelOfDetail, shadowLengthLimit, shadowScattering, shadowOpacity); }); // ## default shading settings (used when no input was provided) HeadlightShade(0, 70, innerId, shadowType, shadowLevelOfDetail, shadowLengthLimit, shadowScattering, shadowOpacity);
}
// # Headlight activation and configuration
HeadlightTrack('headlight-field', 'headlight-text', 'text', 20, 175, 8, 0.275);
Headlight.js - text and box shading based on cursor movement - Script Codes
Headlight.js - text and box shading based on cursor movement - Script Codes
Home Page Home
Developer Twixes
Username Twixes
Uploaded September 16, 2022
Rating 4.5
Size 3,343 Kb
Views 40,480
Do you need developer help for Headlight.js - text and box shading based on cursor movement?

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!

Twixes (Twixes) Script Codes
Name
Layers
Inspire - an adjustable color generator
Responsify - a breakpoint tester
Nordic flags
A configurable bouncing Google logo
Helio
Create amazing marketing copy 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!