JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<script src="https://cdn.rawgit.com/hellogerard/jquery.typer.js/pr-1/src/jquery.typer.js"></script>
<div>
	<div class="navigation">
		<a href="#" class="link link-1" title="amet" data-text="amet">Link 1</a>
		<a href="#" class="link link-2" title="omnis" data-text="omnis">Link 2</a>
		<a href="#" class="link link-3" title="laboris" data-text="laboris">Link 3</a>
	</div>
</div>

<h1>Welcome to my <span class="heading" title="life,story,victory,hack" data-typer-targets="life,story,victory,hack" data-text="website,life,story,victory,hack">website</span></h1>

CSS

html, body {
	height: 100%;
	margin: 0;
}

body {
	position: relative;
	font-family: sans-serif;
}

div {
	background-image: url(https://www.webdesignerhub.com/wp-content/uploads/2016/12/duotone-images-purple-crowd.jpg);
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	width: 100%;
	height: 100%;
}

.link-1, .link-2, .link-3 {
	color: #fff;
	font-weight: bold;
	padding: 1em;
}

h1 {
	width: 100%;
	text-align: center;
	color: #fff;
	margin-top: 2em;
	position: absolute;
	top: 50%;
	margin-top: -2em;
	font-family: Arial Black,Arial Bold,Gadget,sans-serif;
}

[data-typer-targets] span {
	mix-blend-mode: screen;
}

JavaScript

$.typer.options.highlightSpeed = 100;
$.typer.options.highlightColor = '#fff';
$.typer.options.textColor = '#000';
$.typer.options.initialDelay = 1000;
$.typer.options.typerInterval = 2000;
$.typer.options.clearOnHighlight = true;
// $.typer.options.typerOrder = 'sequential';

// Keep track of the heading item, and clone it so we can use it after
var heading = $('.heading');

// Grab the original tokens for reasons
var defaultText = heading.data('text');

$('.link').hover(
	// On hover
	function (event) {
		// Call update heading...
		updateHeading(
			// ...with the text from the link
			$(event.currentTarget).data('text')
		);
	},
	// On blur
	function (event) {
		// Call update heading...
		updateHeading(
			// ...with the text from the link
			defaultText
		);
	}
);

// Function called to update things
function updateHeading(text) {
	// If the text is currently being updated
	if (heading.data('typing')) {
		// End the function here by calling itself using the
		// passed text but do it inside a timeout to prevent
		// javascript bitching about callstack errors
		return setTimeout(function () {
			return updateHeading(text);
		});
	}

	// If we're here then it means the thing isn't typing so...
	heading
		// ...change the tokens
		.attr('data-typer-targets', text)
		// ...re-initiate the typer
		.typer(); 
}

// Initialise the typer
heading.typer();

// We do this in an interval so we can call the same
/* // function many times without JS bitching about call stacks
timeout = setTimeout(function () {
	// Ignore if typing already, or if the update has already happened
	if (heading.data('typing')) {
		return false;
	}

	// call the thing to update the typer...
	updateHeading(
		// ...using the text we specified on the link
		$(event.currentTarget).data('text')
	);

	// clear the interval shit won't keep resetting
	// clearInterval(interval);
}); */

/*
highlightSpeed : 20,
typeSpeed : 100,
clearDelay : 500,
typeDelay : 200,
clearOnHighlight : true,
typerDataAttr...