A simple proof-of-concept: a slideshow animation using CSS3 only
See the demo by Fabrizio Calderan.
Fabrizio Calderan fcalderan
fcalderan
/ inception-javascript.js
Created
November 2, 2010 09:42
inception explained as a 4 nested javascript closures
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * Fabrizio Calderan, twitter @fcalderan, 2010.11.02 | |
| * I had an idea: could Inception movie be explained by a few javascript closures | |
| * and variable resolution scope (just for fun)? | |
| * | |
| * Activate javascript console =) | |
| */ | |
| <script> | |
| console.group("inception movie"); |
fcalderan
/ JamiroquaiVideos
Created
December 10, 2010 11:22
Typical Jamiroquai video explained by a context-free grammar
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Description: | |
| # Typical Jamiroquai video explained by a context-free grammar (just for fun) | |
| JV ::= <epsilon> | <Someone> <Does> <Something> in a <Place> | <Exceptions> ; | |
| Someone ::= He | the invisible man ; | |
| SomeoneElse ::= Him | another invisible man ; | |
| Does ::= (runs away with | follows | drives) a ; | |
| Something ::= (porsche | ferrari | moto | helicopter) followed by <SomeoneElse> <Consequence> ; | |
| Consequence ::= wasting fuel | polluting environment | making roads insecure ; | |
| Place ::= dull desertic land | desert | bright floor; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* with this snippet you can create a raw silhouette of an image, it works transforming | |
| non-white pixels (with a small tolerance) into black pixels */ | |
| <img id="canvassource" src="your-image-300x300.jpg" /> | |
| <canvas id="area" width="300" height="300"></canvas> | |
| <script> | |
| window.onload = function() { | |
| var canvas = document.getElementById("area"); | |
| var context = canvas.getContext("2d"); |
fcalderan
/ deferred-img.js
Created
May 6, 2011 09:25
Image loader / preloader achieved by deferred objects in jQuery 1.6
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * For a current project I need to wait to execute a code until some images have been loaded. | |
| * Beside, I also need to execute a callback (in my specific code I want to show the image | |
| * with a fade-in effect) every time a single image has been loaded. | |
| * | |
| * So basically I used two deferred objects: the nested one which is resolved for a single | |
| * image successfull load event (or when image has been discarded) and the outside one, | |
| * which is resolved when all deferred objects on single images have been resolved or rejected. | |
| * | |
| * This snippet also takes care all frequent issues when trying to load an image (excessive |
fcalderan
/ inline-block-example.html
Created
July 21, 2011 10:07
A helper class for an easy and crossbrowser inline-blocks usage (with H5BP).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ul class="ibw"> | |
| <li>inline block</li> | |
| <li>inline block</li> | |
| <li>inline block</li> | |
| </ul> | |
| <section class="ibw"> | |
| <article class="ib">...</article> | |
| <aside class="ib">...</aside> | |
| </section> |
fcalderan
/ mq.css
Created
October 4, 2012 09:28
— forked from chriscoyier/mq.css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media only screen and (min-width: 320px) { | |
| /* Small screen, non-retina */ | |
| } | |
| @media | |
| only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), | |
| only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px), | |
| only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px), |
fcalderan
/ _mixin.scss
Created
October 4, 2012 14:20
— forked from electricg/_mixin.scss
My SCSS mixin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin box-sizing ($box) { | |
| -webkit-box-sizing: $box; | |
| -moz-box-sizing: $box; | |
| box-sizing: $box; | |
| } | |
| @mixin border-radius ($val) { | |
| -webkit-border-radius: $val; | |
| -moz-border-radius: $val; | |
| border-radius: $val; |
fcalderan
/ perftest.sh
Last active
March 8, 2017 14:37
A small bash utility for testing slower connection. Use chmod +x perftest.sh to make the script executable. Thanks to Matteo Rosati for sharing basic commands
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/bin/sh | |
| CMD="$1" | |
| RATE="$2" | |
| DELAY="$3" | |
| if [ "$RATE" = "" ] ; then | |
| RATE=500 | |
| fi | |
| if [ "$DELAY" = "" ] ; then |
fcalderan
/ rakefile.rb
Last active
March 25, 2018 04:30
This code iterates through every .html file contained in a given folder and, for each template found, it looks for every image (<img>) contained (with Nokogiri gem) in the document. Then it dynamically calculates the image size (with fastimage gem) adding the “height” and “width” attributes. Finally it saves the template. Colorize gem is only us…
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Tested on Ruby v.1.9.3 - Author: Fabrizio Calderan, 3.14.2013 | |
| # | |
| # Install these gems with | |
| # $> sudo gem install fastimage nokogiri colorize | |
| # | |
| # Then copy this source into a file named “rakefile” and run with | |
| # $> rake | |
| # | |
| require "fastimage" | |
| require "nokogiri" |
fcalderan
/ Slideshow-with-CSS3-Animations.markdown
Last active
December 25, 2015 16:19
A Pen by Fabrizio Calderan.
OlderNewer