|
Project Information
Links
|
JAME is a library that aims at offering a cross-browser, multi-builds enable, rock-solid javascript tool to build rich web applications. The animations are based on your stylesheet definitions or for further tweaking thru javascript css definitions. FX exampleA simple example of what you can do :
<body>
<script type="text/javascript">
//Explanations below code
JAME.DOM.Ready(function() {
var letters;
var animTarget = $J("#main h2.title");
animTarget.txt(function(str){
this.empty();
letters =$J(str.split("")).wrap('span').css({opacity:0,top:-10,position:"relative"})
.filter(function(elm){
animTarget.append(elm);
if(/[^\s]/.test(elm.innerHTML)) return true;
}).elms;
}).mouseover(function(e) {
this.removeListeners('mouseover');
$J(letters).tween({opacity:1,top:0},{duration:40}).addListener('onTween',function() {
this.removeListener('onTween',arguments.callee);
J$("li.title").innerHTML+="boOM";
});
});
});
</script>
<div id="main">
<h2 class="title">JAME : Javascript Animation Made Easy</h2>
<div id="intro2">
<ul>
<li class="title">Lightweight</li>
<li>Easy</li>
<li>Fast</li>
<li>Unobstruptive</li>
</ul>
</div>
</div>
</body>
/*
- Animation created:
mouse over the "JAME : Javascript Animation Made Easy" to see its letters jumps up/down one after an other
- Explanation of the code below:
- we wait for the DOM to be ready
->this fires as soon as we can interact with the dom structure
without waiting for assets like pictures to be loaded as with the onload event
- then, we get the h2 tag with "title" as a class name
- we then get the text within it
- empty the element of its content
- split each letters to wrap them within a span tag.
- we add some css styles to those spans
- then we reinsert each span within the title element
- in the same time we eliminate the spaces from the animation (animating empty space won't do much)
- we get all the spans created/filtered into the letters variable
- we added a mouse over event on the title element
- when the mouse over event fires:
- we remove the listener (in fact all the listeners that may have been attached) right away
as we want to animate the letters only the first time
- animate each span tags
- we listen to the first tweening event fired by the animation and when fired:
- we remove the listener
- then add the boOM letters into the li tag with "light" as id
*/
FX Core Features- queueing effects one after an other - bezier curve settings - animation can be defined in your stylesheet (stay DRY) - custom events (onStart, onTween,onComplete,onStop...) - multiple html elements animation made async or sync - easing (transition effects) at the animation level and css property level - animations presets (common fades, slides...) - animation behavior settings (what to do if animations conflict?) We intend to add text effects presets too, soon. Obviously in order to ease the development of the framework, we had to create some helpers: Javascript Extension Core Features- DOM helpers to navigate and manipulate the DOM - Native Event normalisation and extension - Custom Events class (observer pattern) for custom events - Basic queue class - Ajax function with custom events, queue, retry... And to make life even easier: - CSS parser to get what you want easily : $("#animtion > div p") - E4CSS class to deal with the stylesheet definitions - Namespace simulation thru objects Development entirely explained: Don't just use it, learn how to create it! Buggy but hey, you will understand all the inner of it. It will be a real community framework. It is as stated above a Beta... Better wait for it to be at a stable released! JAME RulesHere are a set of rules, JAME will try to stick to : (mostly from :http://dean.edwards.name/weblog/2007/03/rules/) 1. Unobtrusive behavior 2. No globals 3. No native objects extension 4. No over-extension 5. Modular 6. Easy to plug 7. Small 8. Documented 9. Open 10. By all for all In order to extend easily JAME, we use the strategy pattern as a base. (css properties supported are string, numeric, multipart, colors...) Everyone can redefine or create elements using the extension points. Therefore you can extend the library without having to care about the core. Example: You want to use the background-position to do some animation. Create a BackgroundPosition.js file, put it in the JAME.FX.CSS folder and do whatever you need and obviously load it. (well, we have already done this css property for you!) TODO LISTBelow are elements that needs to be implemented/written before we can consider the project ready for a 1.0: - Speed performance improvements (selector parser & animation) - Garbage Collector - Better documentation - Test suite - Fix bugs - Support Opera (?) help needed I am looking for people who could help in one or several of the following fields:
Feel free to contact me: shirirulestheworld/at/gmail/com |
|