Anyway, I am still in the middle of introduction to JS OOP thru a queue example but I thought it could be nice to sum up all the entries written so for regarding javascript effects and javascript.
These entries, far to be perfect, can be a good base to understand how javascript libraries do their magic (like JQuery,Mootools,scriptaculous,etc) and will indeed allow you to almost create your own library with a little work.
Javascript basics:
These are some side entries that relate to javascript and some cross-browsers fix required, you should read them before getting in the animation series:My inner request for outer
This entry deals with the basic of javascript closure,anonymous functions which will be used during the animation effect function creation.
Javascript Literal Notation: basics
This entry deals with the basic of javascript literal notation which is the based of JSON and will be used during the animation effect function.
Setting html element style thru Javascript
This entry deals with cross-browser issues that one must deal when setting the style of an html element thru javascript. You will see camelCase, hypenize string and also that some people, in comments, thinks that teaching this is a waste of time. How nice isn't it?
Javascript scoping : Things to keep in mind
This entry deals with javascript scoping issues. If you were to read only one entry above all in these pre-introduction, I will choose this one as you will get a deeper understanding of the this keyword, what is var, when to use it...
javascript : memoizing - caching functions result
This entry deals with the ability of javascript to memoize or overwrite itself to remember a function result. Very usefull for branching functions and could help to improve further some of your functions that needs cross-browser branching for example.
Javascript : Simulating namespaces basic approach, part 1
Javascript : Simulating namespaces thru prototyping part 2
Javascript Namespaces : Import and Export methods
Javascript Namespaces : Privacy thru closure or how to type less!
This entry deals with something that misses in javascript language, the possibility to create namespaces. You will learn what is a namespace, why it is so important in javascript and how to simulate them thru objects. You should enforce your understanding of anonymous function and relate these entries to the javascript function scoping base nature.This hasn't be used while during the animation function but this is definitly something you should be aware of and use if you plan to share your scripts.
Javascript Effects:
These entries will hopefully teach you the basic of javascript animations. These entries will require basic understanding of closure, literal notation,etc. They will teach how works easing and css animation,so go on and read:1. Javascript Animation : basics of easing
2. Javascript Animation : Controlling time (2)
3. Javascript Animation : take it ease-y ! (3)
4. Javascript Animation : Make things move smoothly (4)
5. Javascript Animation : Changing Colors (5)
6. Javascript Animation : Several elements at once (6)
7. Javascript Animation : Curving the path (7)
8. Javascript Animation : Strategy and Factory Pattern at the rescue (8)
9. Javascript Animation : Implementing Margin and Padding
10. Javascript Animation : dynamic fps with setInterval
I hope these entries will be helpfull to some of view! There are still many things to be seen like effect queuing, custom events, dom ready,namespacing everything, DOM traversial, canvas, etc,etc,etc!!! Therefore, I will update this page when I write a new entry regarding this subject.
If you'd like to get more entries regarding these topics, please leave a comment with some details of what you would like to read!
3 comments:
Hey Shiriru, I can say two words about your animation series, Simply Great!. It really is a great opening for anyone who wants to learn about how, animation is done using javascript and the javascript language itself.
If you could write tutorials about other topics such as dom ready, effects etc. in the context of jQuery(how they implement the magic using pure javascript), it would be greatly appreciated.
Hoping to see more tutorials in the future...
Hi Ahsan,
Thank you for the encouraging comment!
I have to say that I did not write articles for quite a long time now...
But your comment is exactly what will give me the motivation to write some more!
This is a shot in the dark since the tutorials were done so long ago. First, thank you for blogging your learning. They have helped a lot in the animation department. To the question: The box example, once the element reaches its end point, how would you have the function repeat inserting the new start and end points? Ex, say the first movement left was to 100 and the second movement left you want to go to 200.
Does this make sense? It is easily achieved with copying, pasting, changing a few things and renaming the function but there must be a lighter wight way. THank you in advance!
Post a Comment