JSFiddle - React, Tailwind, and code Playground
HTML
<!Doctype HTML>
<html>
<head>
<style type="text/css">
body {
font-family:trebuchet ms,helvetica,arial,sans-serif;
font-weight:lighter;
letter-spacing:1px;
font-size:14px;
margin:0px;
height:650px;
overflow:hidden;
}
#container {
background:url(http://www.bazingadesigns.com/dope/bazinga.jpg);
background-repeat:no-repeat;
width:500px;
height:600px;
}
h1 {
background:white;width:250px;
font-weight:lighter;
font-size:18px;
color:#4a4a4a;
}
p {
text-indent:5px;
margin:0px 0px 10px 0px;
z-index:0;
padding:10px;
color:#696969;
text-shadow:-1px 0px 0px white;
-moz-text-shadow:-1px 0px 0px white;
-o-text-shadow:-1px 0px 0px white;
-webkit-text-shadow:-1px 0px 0px white;
}
.backgroundPs {
background:rgba(255,255,255,0.8);
}
.leftEye {
position:absolute;
text-shadow:-3px 0px 0px red;
-moz-text-shadow:-3px 0px 0px red;
-webkit-text-shadow:-3px 0px 0px red;
-o-text-shadow:-3px 0px 0px red;
z-index:10;
top:0px;
left:0px;
color:transparent;
background:rgba(255,255,255,0.5);
border-radius:2px;
}
.rightEye {
position:absolute;
text-shadow:3px 0px 0px cyan;
-moz-text-shadow:3px...
JavaScript
/*
2013 3d interface wish sketch
by Bazinga Designs
www.bazingadesigns.com
"Time to go below! Into the liquid abbys! :D"
-Charlie, the Unicorn
*/
function bazingaAnaglyphizah() {
whichContainer=$('.anaglyphize');
whichContainer.css('position','relative');
copyText=whichContainer.html();
$('<p class="leftEye opacity">'+copyText+'</p>').appendTo(whichContainer);
$('<p class="rightEye opacity">'+copyText+'</p>').appendTo(whichContainer);
}
function bazingaAnimate(toAnimate) {
toAnimate.animate({top:height},6000,function(){
$(this).animate({top:0},6000,function(){bazingaAnimate($(this))})});
}
var height=$('#container').height();
bazingaAnaglyphizah();
animatedP=$('p:first');
animatedP.addClass('movable');
bazingaAnimate(animatedP);