Description: In the tutorial, we will create an animated flip down clock inspired by the 70’s. Using the Mootools framework, we are trying to replicate the flip action of the pads and make it as lifelike as possible. With it’s retro styling, it could be a really neat thing to add to your website.
To Search:
- [jQuery] - Sharp jQuery book example of source code
- [MooScroll_0.59] - MooScroll using mootools in AJAX. A very
File list (Check if you may need any files):
Source
......\animate.js
__MACOSX
........\Source
........\......\._animate.js
Source\Double
......\......\Down
......\......\....\Left
......\......\....\....\0.png
__MACOSX\Source\Double
........\......\......\Down
........\......\......\....\Left
........\......\......\....\....\._0.png
Source\Double\Down\Left\1.png
__MACOSX\Source\Double\Down\Left\._1.png
Source\Double\Down\Left\2.png
__MACOSX\Source\Double\Down\Left\._2.png
Source\Double\Down\Left\3.png
__MACOSX\Source\Double\Down\Left\._3.png
Source\Double\Down\Left\4.png
__MACOSX\Source\Double\Down\Left\._4.png
Source\Double\Down\Left\5.png
__MACOSX\Source\Double\Down\Left\._5.png
........\......\......\....\._Left
Source\Double\Down\Right
......\......\....\.....\0.png
__MACOSX\Source\Double\Down\Right
........\......\......\....\.....\._0.png
Source\Double\Down\Right\1.png
__MACOSX\Source\Double\Down\Right\._1.png
Source\Double\Down\Right\2.png
__MACOSX\Source\Double\Down\Right\._2.png
Source\Double\Down\Right\3.png
__MACOSX\Source\Double\Down\Right\._3.png
Source\Double\Down\Right\4.png
__MACOSX\Source\Double\Down\Right\._4.png
Source\Double\Down\Right\5.png
__MACOSX\Source\Double\Down\Right\._5.png
Source\Double\Down\Right\6.png
__MACOSX\Source\Double\Down\Right\._6.png
Source\Double\Down\Right\7.png
__MACOSX\Source\Double\Down\Right\._7.png
Source\Double\Down\Right\8.png
__MACOSX\Source\Double\Down\Right\._8.png
Source\Double\Down\Right\9.png
__MACOSX\Source\Double\Down\Right\._9.png
........\......\......\....\._Right
........\......\......\._Down
Source\Double\Up
......\......\..\Left
......\......\..\....\0.png
__MACOSX\Source\Double\Up
........\......\......\..\Left
........\......\......\..\....\._0.png
Source\Double\Up\Left\1.png
__MACOSX\Source\Double\Up\Left\._1.png
Source\Double\Up\Left\2.png
__MACOSX\Source\Double\Up\Left\._2.png
Source\Double\Up\Left\3.png
__MACOSX\Source\Double\Up\Left\._3.png
Source\Double\Up\Left\4.png
__MACOSX\Source\Double\Up\Left\._4.png
Source\Double\Up\Left\5.png
__MACOSX\Source\Double\Up\Left\._5.png
........\......\......\..\._Left
Source\Double\Up\Right
......\......\..\.....\0.png
__MACOSX\Source\Double\Up\Right
........\......\......\..\.....\._0.png
Source\Double\Up\Right\1.png
__MACOSX\Source\Double\Up\Right\._1.png
Source\Double\Up\Right\2.png
__MACOSX\Source\Double\Up\Right\._2.png
Source\Double\Up\Right\3.png
__MACOSX\Source\Double\Up\Right\._3.png
Source\Double\Up\Right\4.png
__MACOSX\Source\Double\Up\Right\._4.png
Source\Double\Up\Right\5.png
__MACOSX\Source\Double\Up\Right\._5.png
Source\Double\Up\Right\6.png
__MACOSX\Source\Double\Up\Right\._6.png
Source\Double\Up\Right\7.png
__MACOSX\Source\Double\Up\Right\._7.png
Source\Double\Up\Right\8.png
__MACOSX\Source\Double\Up\Right\._8.png
Source\Double\Up\Right\9.png
__MACOSX\Source\Double\Up\Right\._9.png
........\......\......\..\._Right
........\......\......\._Up
........\......\._Double
Source\index.html
__MACOSX\Source\._index.html
Source\mootools.js
__MACOSX\Source\._mootools.js
Source\ReadMe.txt
__MACOSX\Source\._ReadMe.txt
Source\Single
......\......\Down
......\......\....\AM
......\......\....\..\0.png
Download