Focus Text Hover Effect | HTML+ CSS + jQuery

focus-text-hover-effect-html-css-jquery.markdown

Focus Text Hover Effect | HTML+ CSS + jQuery

Hover jQuery| HTML | CSS effect for text.

*Updated 19/10/2017 Applied a DRY approach, removed unnecessary code.

Influenced by: https://dribbble.com/shots/2076176-Focus

A Pen by Steven Morasky on CodePen.

License.

index.html

<div id="focus-container" class="container">
	<div class="left-side"></div>
	<div class="right-side"></div>
	<div class="hover">
		<div class="tri-1">
			<div class="bit-top"></div>
			<div class="bit-top-left"></div>
		</div>
		<div class="tri-2">
			<div class="bit-top-right"></div>
			<div class="bit-top-right-2"></div>
		</div>
		
		<div class="tri-3">
			<div class="bit-bottom-left"></div>
			<div class="bit-bottom-left-2"></div>
		</div>
		
		<div class="tri-4">
			<div class="bit-bottom-right"></div>
			<div class="bit-bottom-right-2"></div>
		</div>
		
	</div>
	<p class="blur">PixelWerxStudios.com</p>
	<p class="focus">PixelWerxStudios.com</p>
</div>





<div id="made-by-cameron">
	<code>
		<span class="made-by-twitter">🐦 Follow me on <a href="https://twitter.com/cameronjfitz" target="_BLANK">Twitter!</a></span>
		<span class="made-by-author">Made by <a href="https://cameronfitzwilliam.com" target="_BLANK">Cameron Fitzwilliam</a></span>
	</code>
</div>

script.js

(function(){
	var addEvent = function(object, type, callback) {
	    if (object == null || typeof(object) == 'undefined') return;
	    if (object.addEventListener) {
	        object.addEventListener(type, callback, false);
	    } else if (object.attachEvent) {
	        object.attachEvent("on" + type, callback);
	    } else {
	        object["on"+type] = callback;
	    }
	};
	function detectMouseMove() {
		// Initial container width
		var containerWidth = $('.container').outerWidth();
		document.addEventListener('mousemove', function(e) {
			$('.hover').css({
				 left:  e.pageX
			});
			$('.left-side').css({
				left: e.pageX + 75
			});
			var rightSideLeft = containerWidth - e.pageX;
			$('.right-side').css({
				right: rightSideLeft
			});

		})
	}
	detectMouseMove();
	
	
	function detectTouch() {
		// Initial container width
		var containerWidth = $('.container').outerWidth();
		document.addEventListener('mousemove', function(e) {
			$('.hover').css({
				 left:  e.pageX
			});
			$('.left-side').css({
				left: e.pageX + 75
			});
			var rightSideLeft = containerWidth - e.pageX;
			$('.right-side').css({
				right: rightSideLeft
			});
		})
	}
	detectMouseMove();
	
	function touchMove(){
		// Initial container width
		var containerWidth = $('.container').outerWidth();
		document.addEventListener('touchmove', function(e) {
			$('.hover').css({
				 left:  e.pageX
			});
			$('.left-side').css({
				left: e.pageX + 75
			});
			var rightSideLeft = containerWidth - e.pageX;
			$('.right-side').css({
				right: rightSideLeft
			});

		})
	}
	
	touchMove();
	
	function detectInput(inputType){
		// Detect container width after resizing
		addEvent(window, "resize", function(event) {
			var containerWidth = $('.container').outerWidth();
			$(document).bind(inputType, function(e){
				$('.hover').css({
					 left:  e.pageX
				});
				$('.left-side').css({
					left: e.pageX + 75
				});
				var rightSideLeft = containerWidth - e.pageX;
				$('.right-side').css({
					right: rightSideLeft
				});
			});
		});
	}
	
	detectInput('mousemove');
	detectInput('touchmove');
	
})();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Overpass');

.left-side {
    position: absolute;
    height: 100vh;
    width: 100vw;
    background: #000;
    overflow: hidden;
    z-index: 3;
}

.right-side {
    position: absolute;
    height: 100vh;
    width: 100vw;
    background: #000;
    z-index: 3;
    overflow: hidden;
}
.hover {
    position: absolute;
    float: left;
    height: 70px;
    width: 70px;
    cursor: none;
    overflow: hidden;
}

.bit-top {
	position: absolute;
	left: 0%;
	top: 0%;
	height: 5px;
	width: 10px;
	background: #fff;
}

.bit-top-left {
	position: absolute;
	left: 0%;
	top: 5px;
	height: 5px;
	width: 5px;
	background: #fff;
}


.bit-top-right {
	position: absolute;
	right: 0%;
	top: 0%;
	height: 5px;
	width: 10px;
	background: #fff;
}

.bit-top-right-2 {
	position: absolute;
	right: 0%;
	top: 0px;
	height: 10px;
	width: 5px;
	background: #fff;
}

.bit-bottom-left {
	position: absolute;
	bottom: 0%;
	left: 0px;
	height: 10px;
	width: 5px;
	background: #fff;	
}

.bit-bottom-left-2 {
	position: absolute;
	bottom: 0%;
	left: 0px;
	height: 5px;
	width: 10px;
	background: #fff;		
}

.bit-bottom-right {
	position: absolute;
	bottom: 0%;
	right: 0px;
	height: 5px;
	width: 10px;
	background: #fff;			
}
.bit-bottom-right-2 {
	position: absolute;
	bottom: 0%;
	right: 0px;
	height: 10px;
	width: 5px;
	background: #fff;			
}

.blur {
    position: absolute;
    color: #fefefe;
    font-family: 'Overpass', sans-serif;
    font-size: 64px;
    letter-spacing: 20px;
    margin: auto;
    width: 100%;
    filter: blur(5px);
    cursor: none;
    overflow: hidden;
    text-align: center;
    z-index: 3;
}

.focus {
    position: absolute;
    color: #fefefe;
    font-family: 'Overpass', sans-serif;
    font-size: 64px;
    letter-spacing: 20px;
    margin: auto;
    width: 100%;
    filter: blur(0px);
    cursor: none;
    overflow: hidden;
    text-align: center;
    z-index: 2;
}

.container {
	position: absolute;
	height: 80vh;
	padding-top: 20vh;
	width: 100%;
	overflow: hidden;
}


body {
	background: #000;
	margin: 0;
	padding: 0;
	cursor: none;
}



/* Made by */
body {
	margin: 0;
	padding: 0;
}
#made-by-cameron {
	position: fixed;
	bottom: 0%;
	height: 5vh;
	width: 100%;
	font-size: 1.2rem;
	z-index: 9;
	color: #f1f1f1;
}
#made-by-cameron a {
	color: #f1f1f1;
}
.made-by-author {
	position: absolute;
	right: 2%;
	top: 23%;
}
.made-by-twitter {
	position: absolute;
	left: 2%;
	top: 23%;
}