below featured

v

How to add marquee effect

Posted by HANIF Friday, June 05, 2009
Marquee effect is implemented through simple html scripts. The marquee effect will allow you to move your text, links and images from one end to another end. Marquee effects are quite often used in most of the sites, reason that this simple script allows you to enhance the style of your site and also allowing you to make your readers to peek on. So before studying the different methods of marquee, will first learn the attributes that is related to marquee.

Marquee Attributes

behavior="alternate" --> The attribute alternate allows you to move your text, link or images back and forth.
behavior="scroll" --> The attribute scroll allows you to define how the text, links or images will move.
behavior="slide" --> The slide effect in Firefox browser works similar as to scroll attribute, but in Internet explorer this make and effect on moving your text, links or images to an end stops.
direction="left" --> This attribute defines the movement of your object from right to left.
direction="right" --> This attribute defines the movement of your object from left to right.
direction="up" --> This attribute defines the movement of your object from bottom to up.
direction="down" --> This attribute defines the movement of your object from up to bottom.
scrollamount="1" --> scrollamount attribute defines the scrolling speed.
scrolldelay="100" --> scrolldelay attribute defines the time gap between each scroll movement, and is defined through milliseconds.
loop="5" --> Defines the number of times the marquee or the looping will occur and then stop.
marquee bg#cc0000">#xxxxxx" --> This attribute defines the background color of your marquee object.
height="100px" --> The height attribute allows you to define the height of your marquee effect, and this can be set with pixels or on percentage values.
width="100px" --> The width attribute allows you to define the width of your marquee effect, and this can be set with pixels or on percentage values.


Now we have learned the attributes of marquee, and now let us see some samples of these atttributes when implemented.
Example 1 on Marquee
Bloggers-university.blogspot.com

bloggers-university.blogspot.com
This example is tested working using no attributes, but then it still moves from right to left using its default direction and behavior attribute.

Example 2 on Marquee
Bloggers-university.blogspot.com

Bloggers-university.blogspot.com
This script work as the same effect applied to marquee example 1, defining its attributes. And also remember that this marquee effect can be changed from its direction, its scrollamount speed and etc.

Example 3 on Marquee
Bloggers-university.blogspot.com

Bloggers-university.blogspot.com
Here in this example we have used one of the behavior attributes making the text to move back and forth.

Example 4 on Marquee
Bloggers-university.blogspot.com

Bloggers-university.blogspot.com
This script allows you to align your marquee your objects in the middle, allowing your direction from bottom to up, having a background color with its behavior changed to scroll.

Example 5 on Marquee

Bloggers University

Google

Blogger

Bloggers University
Google
Blogger

This script will allow you to make a marquee link list scrolling from bottom to up.

Example 6 on Marquee

Bloggers University

Google

Blogger

Bloggers University
Google
Blogger

In this part of the code your able to add marquee of links with a background color and also color to your fonts.

Example 7 on Marquee
scrollamount="2" direction="down" width="100%" height="200"> Bloggers-university.blogspot.com

Bloggers-university.blogspot.com
In this piece of code your adding two functions one is to stop on mouse over to the marquee object and another function to start the marquee effect again on mouse out of your marquee object.

Example 8 on Marquee
how to add marquee effect


how to add marquee effect on images


images marquee effect


how to add marquee effect
how to add marquee effect on images
images marquee effect

Here in our final example marquee effect has been made on images instead of text or link, and also followed by link.
5 / 5 stars
Comments
0 Comments

Post a Comment

Blog Archive

x

Get Our Latest Posts Via Facebook - It's Free