10 examples of JavaScript special effects make your website more attractive

10 examples of JavaScript special effects make your website more attractive

Today's topic is how to improve the interface of your website or improve the visual experience of your website, so that users can still remember it.

There are three main methods (from hard to easy): writing scripts by yourself; using JavaScript frameworks similar to jquery and mootools (you can writeCodeIt is easier to use); Use a pre-preset script that can work under the existing JavaScript framework or the creator of the development from scratch. This articleArticleSuitable for those who intend to improve work efficiency or are unwilling to develop scripts from scratch.

We have collected 10 powerful and easy-to-use JavaScript special effects to improve your website interface and get more user experience. These 10 typesJavascriptSpecial effects review your website with an unexpected visual feast, and it is easy to install and use.

You can also refer to the following JavaScript/ajax tutorials and resources:

12 Javascript methods to solve common browser compatibility problems

Navigation menu resources of 300 + jquery, CSS, mootools and JS

1. greybox

Greybox allows you to run other websites in the form of a Mode window (similar to a pop-up window, but not a new browser window ). If your website has export links for some other websites, but you do not want your users to leave your website or open another browser window, this is really a good solution. Using greybox is very simple.

Here is a key page for greybox: Download Page, description page, instance, installation, and advanced usage (if you are a javascript master, read some tips on this page, you can expand its function library)

2. Instant. js

The instant. js special effect dynamically adds a Polaroid-like effect to your photos (skews the photos and adds shadows and borders ). Now we can use this photo effect to simulate the digital photo processing of Photoshop.

This script technology can be used when there are a lot of photos on your website, but you don't want to manually process them one by one. (You may use batch processing, but it is only based on a single action, such as resizing, cropping, etc ...)

3. mootable

Mootable allows you to sort data in a table (without refreshing the page) and use Dom to replace the new sorting method of database requests. Easy to use, only requires slight configuration.

This script library must be supported by the mootools framework. You can download it here. You can also find some mootable creation methods in the mootools section of the Forum, with feedback from many mootools developers.

4. fancyform

Fancyform can replace monotonous form controls such as single-choice buttons and check boxes. The basic usage only takes two steps: (1) Calling the Javascript file on the page (2) specifying the class name for your form control, for example, the check box specifies class = "checked" or class = "unchecked", and the single sequence specifies class = "selected" and class = "unselected ". Very inconspicuous JavaScript.

This script requires support from mootools (Version 1.1)

5. Image menu

Image menu, developed using phatfusion. A very nice horizontal menu. When you hover over a menu item, the image will be expanded.

You can use this technology to apply the effect on the hidden part of the photo, but when you hover your mouse over it, it will show all.

This script requires support from mootools (Version 1.1)

6. amberjack: site tour creator

This is a lightweight javascipt library that allows you to add a quick tour for your website. Allows users to view brief descriptions when viewing each page.

You can use this technology to demonstrate how to use this website. You only need to click the next button to understand every step that needs to be done.

7. imageflow

Inspired by the iPod "coverflow", imageflow is a special effect used to display an image set. You can drag the scroll bar below to control the display of images.

After clicking an image, the user will go to a webpage with a clear picture.

8. shadowbox. js media Viewer

Shadowbox is a cross-browser, cross-platform, simple code, and complete media viewing application that is fully written using javascipt.Program"(How? In one breath, there are so many advantages .)

The difference between shadowbox and other model boxes (such as lightbox 2) Is that shadowbox supports many file types other than images, such as flash videos, embedded YouTube videos, apple.com trailers, and webpages (this allows users to log on and register without having to go to another page ). This is a valuable script.

9. tjpzoom 3-image magnifier

Tjpzoom allows you to partially zoom in a high-definition image. Press and drag the mouse to change the size of the enlarged area.

10. mootools tips

Mootools tips is part of the mootools framework. It allows you to provide users with a highly configurable tooltip. When you hover your mouse over a link or image, some additional prompts about this element will be displayed on the screen.

You can adjust the following methods: CSS style (you can modify the default black background and white text), gradient speed, style of the tooltip displayed on the screen, and how long you want the tooltip to be displayed. This script must be supported by the mootools framework.