Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Hover Alpha Effect

Hover Alpha Effect

Lately, I've seen a lot of alpha opacity text effects on the TV, web, and even on print, that I decided to make my own version.

I created this Hover Alpha Effect with mobile support.

Move your mouse or drag your finger to change the alpha opacity color of the text, and to see 3 colorful text-shadow effects.

The headline is editable, so place your cursor in the text and type anything else you'd like.

Enjoy!

A Pen by Saijo George on CodePen.

License.

.heading
h1(
class="typo"
contenteditable='true'
spellcheck='false'
) You don't learn to walk by following rules. You learn by doing, and by falling over.
p(
class="typo small"
) Richard Branson
p(
class="typo smaller"
) CodeMyUI.com
/*
* HOVER ALPHA EFFECT
* Move your mouse or drag your finger to change the alpha opacity color of the text, and to see 3 colorful text-shadow effects.
*
* Headline is editable, so place your cursor in the text and type anything else you'd like.
*
* #028 - #100DaysOfCode
* By ilithya | 2019
*/
function getTwoDecimal(num) {
// The +0.5 smoothens the transition change
return parseFloat(num.toFixed(2) + 0.5);
}
const mouse = {
decimal(coord) {
return getTwoDecimal(coord / 1000);
},
x(e) {
return Math.abs(e.clientX - (window.innerWidth / 2));
},
y(e) {
return Math.abs(e.clientY - (window.innerHeight / 2));
}
};
const changeTextAlphaVal = (txt, e) => {
const root = document.querySelector(":root");
const cssVar = "--alpha";
const currentAlpha = getComputedStyle(root)
.getPropertyValue(cssVar)
.trim();
const max = parseFloat(currentAlpha);
const dx = mouse.decimal(mouse.x(e));
const dy = mouse.decimal(mouse.y(e));
let alphaVal;
if (dx <= 0) {
alphaVal = dy >= max ? dy : getTwoDecimal(max - dy);
} else {
alphaVal = dx >= max ? dx : getTwoDecimal(max - dx);
}
txt.style.setProperty(cssVar, alphaVal);
};
function createShadow(e, currTarget) {
// Walk effect based on Wes Bos' Mouse Move Shadow Exercise
// https://tinyurl.com/touabxe
const walk = Math.round(Math.max(window.innerWidth, window.innerHeight)/6); // Or use 150?
const coordWalk = (coord, side) => Math.round(coord / side * walk - walk / 2);
const xWalk = coordWalk(e.clientX, currTarget.offsetWidth);
const yWalk = coordWalk(e.clientY, currTarget.offsetHeight);
const pink = [255, 0, 139];
const blue = [0, 86, 255];
const yellow = [255, 240, 0];
const typoAlpha = 0.6;
const typo = currTarget.querySelector(".typo");
changeTextAlphaVal(typo, e); // Comment this if you don't want the text alpha opacity to change on interaction
typo.style.textShadow = `
${xWalk}px ${yWalk}px 0 rgba(${pink}, ${typoAlpha}),
${xWalk * -1}px ${yWalk * 2}px 0 rgba(${blue}, ${typoAlpha}),
${xWalk * -2}px ${yWalk * -1}px 0 rgba(${yellow}, ${typoAlpha})
`;
}
function onMouseMove(e) {
createShadow(e, e.currentTarget);
}
function onTouchMove(e) {
createShadow(e.changedTouches[0], e.currentTarget);
}
const heading = document.querySelector(".heading");
heading.addEventListener("mousemove", onMouseMove);
heading.addEventListener("touchmove", onTouchMove);
:root {
--alpha: 0.8; // We're changing this value via JS with interaction
}
$c_base: #191919; // Black
$c_selection: rgba(255, 0, 139, 0.8); // Hotpink
// You can change the typo color here. Just edit the RGB:
$c_typo: rgba(255, 255, 255, var(--alpha)); // White
$anim: 0.1s linear;
html, body {
height: 100%;
}
body {
background-color: $c_base;
margin: 0;
overflow-x: hidden;
}
::selection {
background-color: $c_selection;
}
.heading {
height: 80%;
display: flex;
align-items: center;
justify-content: center;
}
.small{font-size: 3vmax !important; text-transform: none !important;;}
.smaller{font-size: 1.5vmax !important;; text-transform: none !important;;}
.typo {
color: $c_typo;
cursor: default;
font-family: 'Oswald', Helvetica, Arial, sans-serif;
font-size: 6vmax;
font-weight: bold;
line-height: 1.2;
margin: 0;
outline: none;
padding: 0 10% 1.2% 10%;
text-align: center;
text-transform: uppercase;
transition: color $anim; // To work with JS
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.