August 22, 2013
August 12, 2013
June 17, 2013
The Bond, James Bond effect
007 effect
tl;dr? James Bond Effect and look at the github repoHi again, catching title right? After seeing the @ebidel Google I/O 13 talk about the awesome web coming, I really liked a 007's effect he did on stage and I wanted to give it a try and add a little of spice to it. Lets see:
The effect has 2 parts, the "aim" which is done with the clip css property, and for part 2 of the post, the shot effect, with canvas.
First the setup, in my case hbp5. I removed jQuery because I didn't need it. Then I found a nice 007 image of the famous gun barrel scene to apply the effect.
AIM
As I said, the aim effect is done with the clip css property. I used ebidel gist with the effect, I copy the adaptation of the script here:(function() {
"use strict";
var background = document.getElementById("background"),
titleHeight = 40; //h1#title height
var radius = 120; // px
function move(x, y) {
// CSS clip path - http://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html#the-clip-path
background.style.webkitClipPath = 'circle('+x+'px, '+y+'px, '+radius+'px)';
background.style.mozClipPath = 'circle('+x+'px, '+y+'px, '+radius+'px)';
background.style.msClipPath = 'circle('+x+'px, '+y+'px, '+radius+'px)';
background.style.oClipPath = 'circle('+x+'px, '+y+'px, '+radius+'px)';
background.style.clipPath = 'circle('+x+'px, '+y+'px, '+radius+'px)';
}
window.addEventListener('mousemove', function(e) {
move(e.pageX, e.pageY - titleHeight); // - titleHeight because the listener is the window and we want the coordinates relative to the backgound which is 40px down.
});
// Holding down SHIFT and scrolling grows/shrinks the circle.
window.addEventListener('mousewheel', function(e) {
if (!e.shiftKey) {
return;
}
e.preventDefault(); // Prevent scrolling.
var deltaY = e.wheelDeltaY;
radius += -deltaY;
if (deltaY > 0) { // up / shrink
radius = Math.max(90, radius);
} else {
radius = Math.min(radius, window.innerHeight / 2);
}
move(e.pageX, e.pageY);
});
})();
SHOOT
The shoot animation I will leave it to the 2nd part of the post, because I don't know how to do it yet :p
Any suggestions? Please comment!
Any suggestions? Please comment!
Posts
