10 examples of JavaScript effects make your site more appealing

We have three main methods (from hard to Easy): Write your own scripts, use a JavaScript framework similar to jquery and MooTools (which makes it easier to write code); Use a pre-built script that works in an existing JavaScript framework or a creator who develops from scratch. This article is for those who intend to improve their productivity or are reluctant to develop scripts from scratch.

You can also refer to the following Javascript/ajax related tutorials and resources:
"10 great Ajax and JavaScript instance resource sites"
12 ways to solve common browser compatibility issues with JavaScript
"300+jquery, CSS, MooTools and JS navigation menu Resources"

1.GreyBox

Greybox allows you to run other Web sites in the form of a modal window (similar to pop-up windows, but not new browser windows). If you have some other sites on your site that have export links, but you don't want your users to leave your site or want them to open another browser window, This is really a good solution. Using Greybox is very simple.

Here is a key page about Greybox: download page, description page, instance, installation, and advanced usage (if you are a JavaScript master, after reading some tips on this page, you can expand its library of functions)

2.instant.js

Instant.js effects dynamically add polarization-like (polaroid-like) effects to your photos (tilt the photos and add shadows and borders). Now we can use this photo effect to simulate Photoshop's digital photo processing.

This scripting technology can be used to have a lot of photos on your site, but do not want to manually handle the situation. (Perhaps you will use batch processing, but that is only built in a single action, such as resizing, cropping, etc...) ）

3.mooTable

Mootable allows you to sort the data in the table (without refreshing the page), using the DOM to replace the database's request with a modern sorting method. Simple to use, only a slight configuration is required.

This scripting library requires support from the MooTools framework, which you can download here. You can also find some ways to create mootable in the MooTools section of the forum, and there will be a lot of feedback from mootools developers.

4.FancyForm

Fancyform can replace tedious form controls such as radio buttons and check boxes. The basic use takes only two steps: (1) Call the JavaScript file (2) in the page to specify the class name for your form control, such as the check box to specify class= "checked" or class= "unchecked", and the Radio box to specify Class= "selected" and class= "unselected". Very unobtrusive JavaScript.

The script requires MooTools support (version 1.1)

5.image Menu

Image menu, developed using Phatfusion. Very beautiful horizontal menu, when you hover over a menu item, the picture expands.

You can use this technique for a montage effect for the hidden part of a photo, but when the user hovers over it, it will show all.

The script requires MooTools support (version 1.1)

6.amberjack:site Tour Creator

This is a lightweight Javascipt library that allows you to add a quick tour of the site to the implementation. Allow user facts to view a brief description of each page when viewed.

You can use this technique to demonstrate how to get users to use the site, and the user can just click on the Next button to see every step that needs to be done.

7.ImageFlow

Inspired by the ipod's "Coverflow", Imageflow is a special effect for displaying collections of pictures. The user can drag the scroll bar below to control the display of the picture.

After the user clicks on the picture, it will turn to the real-world clear big picture page.

8.shadowbox.js Media Viewer

Shadowbox is a "cross-browser, cross-platform, code-concise, and document-complete media viewing application that is written entirely using Javascipt" (How about this? A breath to say so many advantages. )

Shadowbox differs from other model boxes (such as Lightbox 2) in that it also supports many other file types, such as Flash video, inline YouTube videos, apple.com trailers, and Web pages, in addition to images ( This allows users to log in and register without having to go to another page. This is a very valuable script.

9.TJPzoom 3–image Magnifier

Tjpzoom allows you to enlarge the local magnification of a high-definition image. You can change the size of the magnified area by pressing and dragging the mouse.

10.mootools Tips

MooTools tips is part of the MooTools framework that allows you to provide users with a highly configurable tooltip that, when the user hovers over a link or picture, some additional hints about the element appear on the screen.

Some ways to adjust: CSS styles (You can modify the default black background white text), the speed of the ramp, the style that the ToolTip will appear on the screen, and how long you want the ToolTip to appear. This script requires support from the MooTools framework.

English Original: JavaScript Effects to Boost Your Website ' s fanciness Factor
Reproduced in original: 10 JavaScript effect instances make your site more appealing

10 examples of JavaScript effects make your site more appealing