Skip to main content

How to use marquee tag in website

Marquee





<marquee> use for scrolling object in web browser
In The HTML element is <marquee> used to scrolling area of text, Images, and others. You can control scrolling behavior or direction also in a simple way just added some attributes.

This is Default Marquee Scroll


Marquee Attributes :

Behavior : mentioned how the objects is scrolling with the help of marquee tag.
in this attribute you can use this mentioned value =" (scroll, slide and alternate) ". If no value mentioned is specified, the default value is scroll.

Marquee Behavior Scroll
Marquee Behavior Slide
Marquee Behavior Alternate


bgcolor: You can sets the marquee tag area background color with the help of color name or hexadecimal value or RGB format.

Marquee bgcolor pink with default behavior scroll

<marquee bgcolor="pink">Marquee bgcolor pink with default behavior scroll</marquee>

direction : You can also sets the direction of the scrolling objects in marquee tag. 
in this attribute you can use this mentioned value ="(left, right, up and down)".If no value mentioned is specified, the default value is left.
Marquee direction left Marquee direction right Marquee direction up with height 200 Marquee direction down with height 200


<marquee direction ="left"> Marquee direction left </marquee>
<marquee direction ="right">Marquee direction right</marquee>
<marquee direction ="up" height="200">Marquee direction up with height 200</marquee>
<marquee direction ="down" height="200">Marquee direction down with height 200</marquee>


loop : Mentioned the how many times the marquee will scroll. If you not set the value is specified, the default value is −1, which means the marquee will scroll continuously.

 This is Marquee Loop 2

<marquee loop="2">This is Marquee Loop 2</marquee>

 Here I set the marquee loop value 2 after scrolling 2 times the marquee object will disappear the web page . and when you again reload the page the marquee will show you again scroll 2 times.


Scrollamount : The is attribute define the speed of scrolling marquee object. if you not use Scrollamount marquee runs defaults scrolling speed 6
marquee with scrollamount 10 marquee with scrollamount 25 marquee with scrollamount 20 marquee with scrollamount 110

<marquee scrollamount="10"> marquee with scrollamount 10 </marquee>
<marquee scrollamount="25"> marquee with scrollamount 25 </marquee>
<marquee scrollamount="20"> marquee with scrollamount 20 </marquee>
<marquee scrollamount="110"> marquee with scrollamount 110 </marquee>




Some Tricks :
This text will bounce
<marquee direction="up" width="200" height="200" behavior="alternate" style="border:solid">
  <marquee behavior="alternate">
    This text will bounce
  </marquee>
</marquee>

This text will bounce

<marquee behavior="alternate" direction="up" height="200" style="border: solid;" width="200">
This text will bounce
</marquee>

Hover Over to Pause Marquee 

This is example of a Marquee that scrolls some news articles but when the user hover over it marquee it will pause and when the user hovers out of it (onMouseOut) that  start.

Example 1

<marquee onMouseOver="this.stop()" onMouseOut="this.start()">Text</marquee>
Hover Over to Pause Marquee

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

How to Create a secure login panel with PHP & Mysql using parameters and session

Secure Login with PHP & Mysql Download project zip Requirement: you need an Apache and MySQL Server database on your device If your computer has xampp or wamp or mamp  or lamp that's great otherwise you need to install Apache and MySQL server Create a database login Run this query : CREATE TABLE admin ( id INT(6) AUTO_INCREMENT PRIMARY KEY, uname VARCHAR(30) NOT NULL, upass VARCHAR(30) NOT NULL ); INSERT INTO `admin` (`id`, `uname`, `upass`) VALUES (NULL, 'admin', 'admin1993'); That means you set your username =  admin and password = admin1993 Login Page: login.php <!doctype html> <html> <head> <meta charset="utf-8"> <title>Login Getway</title> <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" type="text/css"> <style> * { margin:0px; padding:0px; font-family:ar...
Post a Comment
Read more

Create dynamic table using bootstrap (filter & find records)

Data Table With Bootstrap Download HTML file Into : In this table, you can short, filtering, find the record and many features you have been used but its very easy to use and configure. so don't get late lets introducing data table CSS:  Data table Stylesheet JS:   Data table js download this for your next project. or you can copy and paste bellow con on your project it's definitely working. Source : <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Data Table</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script> <script> $(document).ready(function(){       $('#myTable').DataTable(); }); </script> <link...
Post a Comment
Read more

Which HTML Element helps to SEO Score up viewing result without boost by search engines

Here we discuss SEO and SEO friendly tags in HTML Add caption Meta tags: <meta charset="UTF-8"> <meta name="description" content="Here you can write your website descripsions"> <meta name="keywords" content="here you can write your description and all tahte sapareted by comma like (key1, key2, kay3)"> <meta name="author" content="Here you write website's authers name"> Headline tag: <h1>Headline tag 1</h1> <h2>Headline tag 1</h2> <h3>Headline tag 1</h3> This tag is most importent tag in website for SEO. Use H1 tag in wevery page of your website. its helps to identify content  Attribute : ALT This attribute used to find image form search engine. in this tag, you have to use for your website and type the title of the image. like  <img src="address.jpg" alt="title of your image">   TITLE This attribut...
2 comments
Read more