A simple proof-of-concept: a slideshow animation using CSS3 only
See the demo by Fabrizio Calderan.
/* | |
* 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"); |
# 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; |
/* 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"); |
/** | |
* 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 |
<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> |
@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), |
@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; |
#!/bin/sh | |
CMD="$1" | |
RATE="$2" | |
DELAY="$3" | |
if [ "$RATE" = "" ] ; then | |
RATE=500 | |
fi | |
if [ "$DELAY" = "" ] ; then |
# 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" |
A simple proof-of-concept: a slideshow animation using CSS3 only
See the demo by Fabrizio Calderan.