Spirit Possession, Windows phone app

Descargar aqui 

Spirit Possession es una aplicacion para windows phone. Es una broma para hacer a tus amigos.

INSTRUCCIONES:
En la primer entrada siempre se escribe "espiritu por 

favor responde:"
En el segundo espacio escribes la pregunta que le 

quieres hacer al espiritu.

TRUCO (como funciona):
En el primer campo de texto presione la tecla enter para

 entrar la respuesta, escribas lo que escribas, irá 

apareciendo "espiritu por favor responde:". Entonces en 

el primer campo de texto usted debe escribir la 

respuesta a la pregunta que harás en el segundo campo y 

presionar enter para finalizar. La respuesta será lo que

 pusiste en el primer campo y sacarás un buen susto a 

tu amigo. Cuando el te pida probar, no sabrá el truco de los enter al principio y 

al final y cuando haga la pregunta el espiritu responderá de forma agresiva o 

negativa, haciendo que el truco solo funcione contigo.

Asegúrate de mentalizar antes a tu amigo para que caiga en la broma y escribir la 

respuesta rápidamente para que no se de cuenta que estás escribiendo algo 

diferente a "espiritu por favor responde:".
Ademas debes saber la pregunta y la respuesta antes de empezar a escribir.
Esta es una divertida broma para hacer a familiares o amigos que puede 

intranquilizar a más de uno.. Qué tan lejos la lleves depende de ti...

//------------------------------------------------------------------------------ 

A joke to your friends.
INSTRUCTIONS:
The first entry is always written "please respond spirit"
In the second space write the question you want to ask the spirit.

TRICK (how it works):
In the first text field, press the Enter key to enter the answer, write what you 

write, will appear "please respond spirit". Then in the first text field you must 

type the answer to the question that you do in the second field and press enter to 

finish. The answer will be what you put in the first field and It will actually 

scare your friend. When he ask for try it self, he will not know the trick of 

press the enter at the beginning and end, and when press answer the question 

button, the spirit will respond aggressive or negative, making the trick only work 

with you.

Make sure your friend mentalize before to fall in the jest and write the answer 

quickly so he will not realize you're writing something other than "please respond 

".
You should know the question and the answer before you start writing.
This is a funny joke to family or friends who can unsettle more than one .. 

How far to take it, is up to you ...

Tutorial Parallax scrolling

 What is parallax (general concept):

Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines The term is derived from the Greek παράλλαξις (parallaxis), meaning "alteration". Nearby objects have a larger parallax than more distant objects when observed from different positions, so parallax can be used to determine distances.

What is parallax scrolling

Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion. The technique grew out of the multiplane camera technique used in traditional animation since the 1940s, and was popularized in the 1982 arcade game Moon Patrol

Libraries:

PARALLAX-JS

There are multiple ways to do parallax scrolling on your website. This library provides a way of scrolling through multiple section tags which have different backgrounds moving a little slower than the content. As author proposes combined with side-nav.js gives your website nice look & feel. All animations are done using CSS3 transformations but if your browser does not support those don’t worry cause it will gently switch to CSS positioning.

https://github.com/razorfish/Parallax-JS

Observaciones:

-It is not flexible, can not customize the animations, are predefined

-Is is easy to implement

-Modifies the url

-It is for scroll parallax

Demo:

http://razorfish.github.com/Parallax-JS/#header

 

JQUERY.PARALLAX

You will be amazed with that little jQuery plugin if your requirement is to move layers in response to mouse movement. The tricky part is that parallax effect is done by differentiating layer sizes making smaller layers move slower, and opposite.  Simple and effective script with good documentation. Try it out, you won’t regret.

https://github.com/stephband/jparallax

Observations:

-It is only to create the parallax effect with mouse movement.

-It is quite easy to implement, you need to have images of different sizes, the largest is the last and moves slower, the smaller is the first and moves faster.

-It is a JQuery  plugin.

DEMO:

http://stephband.info/jparallax/

STELLAR.JS

Stellar is another jQuery plugin that allows you to apply parallax effects on your project. You won’t have problems using it cause all you need to do is to include stellar.js into your website and call $.stellar(); Interesting feature is the way the plugin is configured  - and by all means the word “interesting” was used in the most positive way – because stellar is configured by HTML5 data-* attribute.

http://markdalgleish.com/projects/stellar.js/

Observations:

-It is not flexible, can not customize the animations, are predefined

-It is for scroll parallax

-Based in JQuery

DEMO:

http://markdalgleish.com/projects/stellar.js/

 

SKROLLR

Skrollr is much more that just parallax scrolling library and if your project has to react in response to scroll event Skrollr probably will be the best tool for you. A dozen of examples present quite good what this 3.4k (gzipped) library is capable of. Transforming animating page elements, drawing SVG path, background animation, snapping to “slides” it has all. It’s worth to mention that it was used by The Guardian. Squareup, Happy.is and it rocks. Oh, You will be glad hear that it supports Android and iPhone. Go and grab it.

https://github.com/Prinzhorn/skrollr

Observations:

-It is very flexible, powerful and easy to use.

- CSS, Javascript skills needed

-It is for scroll parallax

-It is compatible with IE8

-Patience

DEMO:

http://www.moxieinteractive.com/our-work

http://pixeljuice.ru/en

http://happy.is/

http://www.guardian.co.uk/world/interactive/2012/dec/21/2012-america-year-review

http://www.evanshalshaw.com/bondcars/

ToolKit

https://github.com/jmendezp/Parallax-ToolKit

-skrollr (v 0.5.14)

-jparallax

-imagePreLoader

Considerations for designing and creating Parallax assets.

-When designing the assets, be aware of the size and resolution of small monitors

- .png files optimisation

-Try to use jpgs when possible

-Define how the transitions are going to happen, mainly the enter and exit ones. One change

after everything is done will affect the rest of the animations.

-Try to use text when possible to reduce the k size of the page.

-Be patient, doing transitions and making everything match is not as easy as programming where you have control of everything.

Como crear un plugin con JQuery

A modo de ejemplo, podemos ver a continuación un código fuente de un plugin muy sencillo:

jQuery.fn.desaparece = function() {

  this.each(function(){

     elem = $(this);

     elem.css("display", "none");

  });   

  return this;

};

Este plugin permitiría hacer desaparecer a los elementos de la página y podríamos invocarlo por ejemplo de la siguiente manera:

$("h1").desaparece();

 Caracteristicas de un plugin:

-El archivo que crees con el código de tu plugin lo debes nombrar como jquery.[nombre de tu plugin].js. Por ejemplo jquery.desaparece.js.

-Añade las funciones como nuevos métodos por medio de la propiedad fn del objeto jQuery, para que se conviertan en métodos del propio objeto jQuery.

-Dentro de los métodos que añades como plugins, la palabra "this" será una referencia al objeto jQuery que recibe el método. Por tanto, podemos utilizar "this" para acceder a cualquier propiedad del elemento de la página con el estamos trabajando.

-Debes colocar un punto y coma ";" al final de cada método que crees como plugin, para que el código fuente se pueda comprimir y siga funcionando correctamente. Ese punto y coma debes colocarlo después de cerrar la llave del código de la función.

-El método debe retornar el propio objeto jQuery sobre el que se solicitó la ejecución del plugin. Esto lo podemos conseguir con un return this; al final del código de la función.

-Se debe usar this.each para iterar sobre todo el conjunto de elementos que puede haber seleccionados. Recordemos que los plugins se invocan sobre objetos que se obtienen con selectores y la función jQuery, por lo que pueden haberse seleccionado varios elementos y no sólo uno. Así pues, con this.each podemos iterar sobre cada uno de esos elementos seleccionados. Esto es interesante para producir código limpio, que además será compatible con selectores que correspondan con varios elementos de la página.

-Asigna el plugin siempre al objeto jQuery, en vez de hacerlo sobre el símbolo $, así los usuarios podrán usar alias personalizados para ese plugin a través del método noConfict(), descartando los problemas que puedan haber si dos plugin tienen el mismo nombre.

noConflict()

Ejemplo:

jQuery.fn.parpadea = function() {

  this.each(function(){

     elem = $(this);

     elem.fadeOut(250, function(){

        $(this).fadeIn(250);

     });

  });

  return this;

};

Ahora veamos cómo podríamos invocar este plugin:

$(document).ready(function(){

  //parpadean los elementos de class CSS "parpadear"

  $(".parpadear").parpadea();

  

  //añado evento clic para un botón. Al pulsar parpadearán los elementos de clase parpadear

  $("#botonparpadear").click(function(){

     $(".parpadear").parpadea();

  });

});

<body>

  <p class="parpadear">Hola que tal, esto parpadeó gracias a jQuery!</p>

  <p>Parafo normal que no va a parpadear.</p>

  <p class="parpadear">Sí parpadea</p>

  <p>Parafo normal que no va a parpadear tampoco...</p>

  

div class="parpadear" style="background-color: #ff9966; padding: 10px;">Esta capa también tiene la clase parpadear, con lo que ya se sabe...</div>

  <p>

<input type="button" value="Parpadea de nuevo" id="botonparpadear">

</p>

</body>