jmpressjs / jmpress.js

A jQuery plugin to build a website on the infinite canvas
http://jmpressjs.github.com/jmpress.js
1.5k stars 237 forks source link

Activation + Jquery events #59

Closed LeHibou closed 12 years ago

LeHibou commented 12 years ago

Hi,

i have got two questions :

1) how could we manage to have the opacity down of non focused elements, like http://bartaz.github.com/impress.js/#/step-2 ?

2) I would like to move elements on the page when leaving the step :

How could I animate a div with this code ? $('#mydiv') .on('enterStep', function(event) { what should be put here to animate my div called #toto ? }) .on('leaveStep', function(event) { what should be put here to animate my div called #toto ? });

Many thanks,

LeHibou

shama commented 12 years ago

1) This is done in your CSS:

.step { opacity: 0.3; } /* All steps are faded out */
.step.active { opacity: 1; } /* The active step is faded in */

2) The easiest way to apply animations, imo, is to do animations in your CSS and use the data-jmpress attribute to trigger them. Here is an example: http://shama.github.com/jmpress.js/examples/animation/#/basic

Or you could use jQuery.animate within the code you have above. There are a lot of CSS and jQuery animations out there via a google search. Here is a good CSS based one: http://daneden.me/animate/

LeHibou commented 12 years ago

Ok, so I forget the story of jquery events ? (I am not a pro, just a code-struggling-guy-who-would-rather-prefer-to-go-to-the-beach)

And start the animation the easy way.

Thanks Shama

shama commented 12 years ago

I'm not a pro either... although @sokra is ;)

Closing. Just let us know if you have any issues with animations. Thanks!