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.
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.
<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> |
(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'); | |
})(); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> |
@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%; | |
} |