Showing posts with label tutorial. Show all posts
Showing posts with label tutorial. Show all posts

June 17, 2013

The Bond, James Bond effect

By Unknown 19:40 , , , , Leave a Comment

007 effect

tl;dr? James Bond Effect and look at the github repo

Hi 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!
Read More...

June 3, 2013

How to register your library or component in Bower

By Unknown 11:36 , , , , Leave a Comment
Read More...

May 28, 2013

SVG/VML views in your Backbone app with Raphael

By Unknown 13:06 , , , , , , Leave a Comment
Read More...

May 13, 2013

Use RaphaëlJS with AMD (recent official feature)

By Unknown 12:53 , , , , Leave a Comment
Hi all, I'm the collaborator of RaphaëlJS github repo. (Don't know SVG or Raphaël?? Check it out!, really cool things can be done with it).
Thanks to our contributors now it's easy to add the library using AMD, something difficult to do before.
Here is how and an example!

tl;dr? Check my raphael-boilerplate repo.

The example

First the html, we will use require.js so you need to add it in you project structure. The same with your main javascript file, where require will start to download the js.

<html>
<head>
 <title>Raphael Dev testing html</title>
 <script data-main="main" src="require.js"></script>
</head>
<body>
        <!-- Here is the container for Raphael -->
 <div id="container"></div>
</body>
</html>

We have in the body the div that will work as the container of Raphael, notice that there are other ways of creating the svg/vml root element.

Then the main.js file:

require([ "path/to/raphael" ], function (Raphael) {
    console.log(Raphael);
});

Here you set the path to Raphael and you are ready to go!

Or set this configuration in your configuration:

require.config({
  paths: {
    raphael: "libs/raphael"
  }
});

And you can require the module like this:

require([ "raphael" ], function (Raphael) {
    console.log(Raphael);
});


This is the simplest of the examples, in my repo I have some variants:
  • Global use (window.Raphael)
  • This example of AMD
  • HTML5 Boilerplate with Raphael

Enjoy!!


Read More...

February 17, 2013

Convert SVG to Raphael in one step

By Unknown 05:23 , , , 2 comments
Read More...

January 24, 2013

Turn off the lights! getUserMedia API experiment

By Unknown 20:27 , , , , , Leave a Comment
Read More...