| #intro | |
| h1 MOUSE MOVEMENT<br/><b>MOTION BLUR</b> | |
| h2 Move the cursor fast and slooooooooowww | |
| .select | |
| span(class="circle") Circle | |
| span(class="pointer") Pointer | |
| a(href="http://codepen.io/igcorreia/pen/ZGGzWZ",target="_blank") Also Visit Background Cursor motion blur | |
| -for (var x = 0; x < 30; x++) | |
| .box | |
| #copy <a href="https://twitter.com/igcorreia" target="_blank">Crafted by: <b>@igcorreia</b></a> |
This is an easy way to make a motion blur mouse movement. Here is the complete study of how to simulate motion blur.
http://codepen.io/igcorreia/blog/motion-blur-on-the-web
Forked from Ignacio Correia's Pen Mouse cursor motion blur with TweenMax #html5 #motion #blur #motionblur #css3 #tweenmax @greensock.
A Pen by Captain Anonymous on CodePen.
| /* | |
| * 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. | |
| * | |
| * V2.0 Arrow example | |
| * | |
| * 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 | |
| } | |
| ); | |
| //V2.0 | |
| $('.pointer').mouseover(function(){ | |
| //console.log('cursor'); | |
| $box.addClass('arrow'); | |
| }); | |
| $('.circle').mouseover(function(){ | |
| //console.log('circle'); | |
| $box.removeClass('arrow'); | |
| }); |
| @link: #898989; | |
| @transition: all 0.3s ease-in-out 0s; | |
| @linkhover: #fff; | |
| @iterations: 30; | |
| *{ | |
| cursor:none; | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: 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; | |
| &.arrow{ | |
| background: url('http://lmgtfy.com/assets/mouse_arrow_windows_aero-b118000dc97d4558d6db021793acc613.png') no-repeat 0 0 transparent; | |
| border-radius: 0; | |
| } | |
| } | |
| } | |
| #intro { | |
| position: relative; | |
| font-size: 20px; | |
| font-weight: 100; | |
| text-align: center; | |
| float: none; | |
| display: block; | |
| width: 100%; | |
| color: #767676; | |
| cursor: none; | |
| padding-top: 80px; | |
| //text-shadow: 0 1px 0 #fff; | |
| text-transform:uppercase; | |
| .select{ | |
| margin-top: 20px; | |
| position:relative; | |
| z-index:999999; | |
| span{ | |
| color:#fff; | |
| font-weight:400; | |
| padding:0 20px; | |
| position:relative; | |
| letter-spacing:1px; | |
| } | |
| } | |
| a { | |
| color: #fff; | |
| text-decoration: none; | |
| font-weight: 900; | |
| font-size: 11px; | |
| text-shadow: none; | |
| margin-top: 20px; | |
| display: block; | |
| text-shadow:0 1px 0 #000; | |
| letter-spacing:1px; | |
| cursor:pointer; | |
| position:relative; | |
| z-index:9999; | |
| } | |
| 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; | |
| } | |
| } | |
| } |