How to animate web page elements with InfoFind Web Tools

About InfoFind Web Tools

InfoFind Web Tools is for web page designers and developers and it is completely free to use in commercial or open source products and for either business or personal web pages. It contains several JavaScript Files that help make web pages more interactive. Many of the features can be used without having to write any JavaScript code and it is designed to work with all popular browsers on Windows, Mac, and Unix/Linux. Some of the features of InfoFind Web Tools include:

• HTML Table Sorting
• Animated Picture Slide Shows
• Web Page Animation
• Advanced Form Validation
• Functions for working with Data Types (Strings, Numbers, Currency, etc)
• Functions for working with Web Pages, CSS Scripts, and Individual Elements
• Page Updates through Web Requests (AJAX)

To see many useful demos of InfoFind Web Tools and to have all versions including InfoFind_Lite then click here to download InfoFind Web Tools, demo files, and documentation.

Special Notice – InfoFind Web Tools is focused on web application development such as database applications. InfoFind Web Tools does have some animation features but if you are looking only for animation scripts or larger control libraries you might want to check out one of the following JavaScript Libraries (script.aculo.us, scripty2, jQuery, MooTools) or JavaScript Frameworks (Yahoo YUI, BBC Glow, Microsoft ASP.NET AJAX Control Toolkit). InfoFind Web Tools is written in a way so that is it easy to modify and copy individual functions that you need for your applications. Many updates will be coming in 2011 so please check back later.

Introduction

InfoFind Web Tools provide a number of functions that allow web page artists or web page developers to add animation to a web page. Many web sites use Flash or similar programs for animation but a problem with using Flash is that not all users have it installed and if they do it sometimes is not stable so it’s frequently turned off. HTML animation is generally harder to write and more limited but it allows for a wider audience. When creating web page animations an artist or developer has to weigh the benefits of each one. If you choose to go with HTML animation then InfoFind Web Tools can make animating a web page much easier to do because the functions are easy to call and it works with all major web browsers on all major operating systems. To see animation with InfoFind click the button and examples below and to see how it works view the source of this web page.

Animation Examples (Click to Demonstrate)

Note - these items start off in a relative position but end up in an absolute position so if you click all items then some may be a few pixels off from where they started. When programming animation for a web page you may want to consider using absolute positioning if possible from the start.

Fade Out and In	Resize	Fade In with Resize	Roll Down	Roll Up	Roll Right
Roll Left	Move to and from Top	Move to and from Bottom	Move to and from Right	Move to and from Left	Move to Random Border with Effects
Move in Circle Up and Counter Clockwise	Move in Circle Up and Circle Clockwise	Move in Circle Down and Counter Clockwise	Move in Circle Down and Clockwise