This is an easy way to make a motion blur mouse movement.
A Pen by Ignacio Correia on CodePen.
#intro | |
h1 MOUSE MOVEMENT<br/><b>MOTION BLUR</b> | |
h2 Move the cursor fast and slooooooooowww | |
-for (var x = 0; x < 30; x++) | |
.box | |
#copy <a href="https://twitter.com/igcorreia" target="_blank">Crafted by: <b>@igcorreia</b><br/>Searching for a Dribbble invite :)</a> |
This is an easy way to make a motion blur mouse movement.
A Pen by Ignacio Correia on CodePen.
/* | |
* Hi and Welcome to Codepen! | |
* | |
* My name is Ignacio and I am looking for a Dribble invitation. | |
* Please contact me via twitter if you have 1, | |
* I would like to have 1 hehe :) | |
* | |
* | |
* Finally I can reproduce in CSS what I managed to design in Photoshop. | |
* Still not all browsers allow for the creatives to reproduce everything. | |
* We still have browser compatibility problems. | |
* | |
* I will keep publishing examples to help push the web foward. | |
* PLEASE Like, Heart or Share if you like, and don't forget to follow. | |
* Thanks. | |
* | |
* Now let's animate it :) | |
*/ | |
var $box = $('.box'), | |
inter = 30, | |
speed = 0; | |
function moveBox(e) { | |
TweenMax.killTweensOf(); | |
$box.each(function(index, val) { | |
TweenLite.to($(this), 0.05, { css: { left: e.pageX, top: e.pageY},delay:0+(index/750)}); | |
}); | |
} | |
$(window).on('mousemove', moveBox); | |
$box.each(function(index, val) { | |
index = index + 1; | |
TweenMax.set( | |
$(this),{ | |
autoAlpha: 1 - (0.0333 * index), | |
delay:0 | |
}); | |
}); | |
TweenMax.set( | |
$('.text:nth-child(30)'), { | |
autoAlpha: 1.5, | |
delay: 0 | |
} | |
); |
@link: #898989; | |
@transition: all 0.3s ease-in-out 0s; | |
@linkhover: #fff; | |
@iterations: 30; | |
*{cursor:none;} | |
html { | |
font-family: 'Lato', sans-serif; | |
min-height: 100%; | |
height: 100%; | |
background: #000; | |
overflow: hidden; | |
cursor: none; | |
body { | |
min-height: 100%; | |
height: 100%; | |
cursor: none; | |
margin: 0; | |
padding: 0; | |
background: rgb(74, 74, 74); | |
/* Old browsers */ | |
background: -moz-radial-gradient(center, ellipse cover, rgba(74, 74, 74, 1) 0%, rgba(42, 42, 42, 1) 100%); | |
/* FF3.6+ */ | |
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(74, 74, 74, 1)), color-stop(100%, rgba(42, 42, 42, 1))); | |
/* Chrome,Safari4+ */ | |
background: -webkit-radial-gradient(center, ellipse cover, rgba(74, 74, 74, 1) 0%, rgba(42, 42, 42, 1) 100%); | |
/* Chrome10+,Safari5.1+ */ | |
background: -o-radial-gradient(center, ellipse cover, rgba(74, 74, 74, 1) 0%, rgba(42, 42, 42, 1) 100%); | |
/* Opera 12+ */ | |
background: -ms-radial-gradient(center, ellipse cover, rgba(74, 74, 74, 1) 0%, rgba(42, 42, 42, 1) 100%); | |
/* IE10+ */ | |
background: radial-gradient(ellipse at center, rgba(74, 74, 74, 1) 0%, rgba(42, 42, 42, 1) 100%); | |
/* W3C */ | |
#copy{ | |
position:absolute; | |
bottom:0; | |
height: 40px; | |
width: 100%; | |
text-align:center; | |
text-transform:uppercase; | |
line-height: 14px; | |
font-size:10px; | |
font-weight:400; | |
z-index:999; | |
a{ | |
color:@link; | |
text-decoration:none; | |
transition:@transition; | |
cursor:none; | |
b{ | |
font-weight: 700; | |
} | |
&:hover{ | |
color:@linkhover | |
} | |
} | |
} | |
.box { | |
position: absolute; | |
width: 25px; | |
height: 25px; | |
top: 50%; | |
left: 50%; | |
margin: -50 0 0 -50px; | |
background: rgba(255, 255, 255, 0.2); | |
border-radius: 50px; | |
-webkit-backface-visibility: hidden; | |
opacity: 0; | |
cursor: none; | |
} | |
} | |
#intro { | |
position: relative; | |
font-size: 20px; | |
font-weight: 100; | |
text-align: center; | |
float: none; | |
display: block; | |
width: 100%; | |
color: #767676; | |
cursor: none; | |
padding-top: 20px; | |
//text-shadow: 0 1px 0 #fff; | |
text-transform:uppercase; | |
h1{ | |
margin: 0;padding: 0; | |
color:#eee; | |
font-weight:100; | |
letter-spacing:10px; | |
font-size:120%; | |
b{ | |
font-size:260%; | |
letter-spacing:-0.4px; | |
font-weight:700; | |
display: block; | |
overflow-y: hidden; | |
text-shadow: 10px 0 106px rgba(255, 255, 255, 0.96),-10px 0 106px rgba(255, 255, 255, 0.96), | |
0 0 20px rgba(255, 255, 255, 1),0 0 5px rgba(255, 255, 255, 1); | |
overflow-x: visible; | |
height: 45px; | |
line-height: 42px; | |
margin-top: 10px; | |
box-shadow: 0 0 50px 20px rgba(0, 0, 0, 0.07); | |
} | |
} | |
h2{ | |
margin: 10px 0 0 0;padding: 0; | |
color:#999; | |
font-size:80%; | |
font-weight:300; | |
} | |
} | |
} |