Matthew Bozanich bozzin

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.

a custom mouse cursor cursor colors are invertet with mix-blend-mode attribute

I'm a little late to the blob party, but I'm having fun
Do not use this for real projects with this amount of blobs, use 24 of them or less 😛
_

	<div id="page-wrap">
	<!-- div that will hold our WebGL canvas -->
	<!--<nav class="main-nav">
	<div class="logo"><img src="" alt="" class="img-logo">AB</div>
	<ul class="main-menu">
	<li><a href="">HOME</a></li>
	<li><a href="">ABOUT</a></li>
	<li><a href="">WORKS</a></li>
	<li><a href="">CONTACT</a></li>
	</ul>

	<!--comments in JS-->
	<script id="vertexShader" type="x-shader/x-vertex">
	varying vec2 v_uv;
	void main() {
	v_uv = uv;
	gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.);
	}
	</script>
	<!-- FragmentShader code here -->
	<!-- // built from the tutorial https://www.youtube.com/watch?v=dhuigO4A7RY -->

	<body class="demo-1 loading">
	<main>
	<div class="message">Some message for mobile (if needed).</div>
	<div class="frame">
	<div class="frame__title-wrap">
	<h1 class="frame__title">rgbKineticSlider</h1>
	<p class="frame__tagline">Demo 1</a></p>
	</div>
	<div class="frame__links">
	<a href="https://github.com/hmongouachon/rgbKineticSlider">View this project on GitHub</a>

	<div class="image__tl" id="tl"></div>
	<div class="image__bl" id="bl"></div>
	<div class="image__tr" id="tr"></div>
	<div class="image__br" id="br"></div>
	<div class="image__svt" id="svt">
	<div class="image__inner" id="svt-inner"></div>
	</div>
	<div class="image__svb" id="svb">
	<div class="image__inner" id="svb-inner"></div>
	</div>

	(function() {
	'use strict';
	/* 'To actually be able to display anything with Three.js, we need three things:
	A scene, a camera, and a renderer so we can render the scene with the camera.'

	- https://threejs.org/docs/#Manual/Introduction/Creating_a_scene */

	var scene, camera, renderer;

	/* We need this stuff too */