Permalink
Browse files

first commit

  • Loading branch information...
0 parents commit b641ba14b8cd0e6b1da051adf299f527f7e2e7c2 @urielhdz committed Jun 24, 2012
Showing with 154 additions and 0 deletions.
  1. +4 −0 jquery-1.7.1.min.js
  2. +40 −0 mainScripttuto.js
  3. +82 −0 stylesheet.css
  4. +28 −0 tutorial.html
Oops, something went wrong.
@@ -0,0 +1,40 @@
+var canvas,ctx;
+$(document).on("ready",startApp);
+
+function startApp()
+{
+ canvas = document.getElementById('miCanvas');
+ canvas.width = screen.availWidth;
+ canvas.height = screen.availHeight;
+ ctx = canvas.getContext('2d');
+ $('#contenido').css({
+ 'margin-top':(screen.availHeight - $('#contenido').height())/2
+ });
+ $('html').on('mousemove',moveFocus);
+}
+
+function moveFocus(e)
+{
+ canvas.width = canvas.width;
+ ctx.fillStyle='rgb(0,0,0)';
+ ctx.fillRect(0,0,canvas.width,canvas.height);
+ var mX = e.screenX;
+ var mY = e.screenY;
+ ctx.clearRect(mX-300,mY-300,600,600);
+ ctx.arc(mX,mY,350,0,7);
+ ctx.lineWidth = 200;
+ ctx.stroke();
+ ctx.fillStyle = 'rgba(0,0,0,0.7)';
+ ctx.arc(mX,mY,350,0,7);
+ ctx.fill();
+ var cX = -(canvas.width/2 - mX);
+ var cY = -(canvas.height/2 - mY);
+ cX = -(cX/20);
+ cY = (cY/5);
+ $('body').css({
+ 'text-shadow':cX+"px "+cY+"px 5px rgba(0,0,0,1)"
+ });
+ $('a, input').css({
+ 'box-shadow':cX+"px "+cY+"px 5px rgba(0,0,0,1)"
+ });
+}
@@ -0,0 +1,82 @@
+body
+{
+ background-color:#4E5252;
+ color:#996892;
+ font-family:"Helvetica",Arial;
+ margin:0px;
+ text-shadow:0px 0px 10px rgba(0,0,0,1);
+ font-weight:bold;
+ overflow: hidden;
+}
+h1
+{
+ color:#E64D38;
+}
+#contenido
+{
+ width:960px;
+ margin:0 auto;
+ text-align:center;
+}
+#miForm input
+{
+ width:700px;
+ font-size:30px;
+ border:none;
+ border-radius:10px;
+ padding:10px;
+ outline:none;
+
+ transition:all 0.5s linear;
+ -webkit-transition:all 0.5s linear;
+ -moz-transition:all 0.5s linear;
+ -o-transition:all 0.5s linear;
+}
+#miForm input:focus
+{
+ font-size:38px;
+}
+#miCanvas
+{
+ position: absolute;
+ top:0px;
+ left:0px;
+ pointer-events:none;
+}
+#donacion
+{
+ border:none;
+ background-color:none;
+ font-size:14px;
+ box-shadow:2px 2px 5px rgba(0,0,0,0.8);
+ cursor: pointer;
+}
+#social_btns a
+{
+ text-decoration:none;
+}
+#social_btns img
+{
+ border:none;
+}
+.twitter-share-button,#donacion
+{
+ vertical-align: middle;
+}
+#answer
+{
+ display: none;
+ color:#E64D38;
+}
+#aRadio
+{
+ color:#E64D38;
+ font-size:24px;
+}
+#publicidad
+{
+ position: absolute;
+ z-index:-2;
+ top:0px;
+ right:200px;
+}
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang='es'>
+<head>
+ <meta charset='utf-8'>
+ <title>Foco</title>
+ <link rel="stylesheet" href="stylesheet.css">
+ <script src='jquery-1.7.1.min.js'></script>
+ <script src='mainScripttuto.js'></script>
+</head>
+<body>
+ <canvas id='miCanvas'></canvas>
+ <div id='contenido'>
+ <header>
+ <hgroup>
+ <h1>Ejemplo con Canvas</h1>
+ <h2>Mueve el mouse</h2>
+ </hgroup>
+ </header>
+ <section>
+ <form id='miForm'>
+ <input type='text' id='mail' name='mail' placeholder='Type something here' >
+ </form>
+ <p id='answer'>Comparte el ejemplo y pronto tendrás el tutorial, apóyanos invitándonos un café. RND</p>
+ <p>Este ejemplo está utilizando Canvas, CSS3 y javaScript</p>
+ </section>
+ </div>
+</body>
+</html>

0 comments on commit b641ba1

Please sign in to comment.