Главная » Языки программирования

Marquee in html codes

На чтение 10 мин
Содержание
  1. Marquees
  2. HTML Tag
  3. CSS Animations
  4. HTML Marquees vs CSS Marquees
  5. More Marquee Codes
  6. Marquee Generator
  7. Marquee Usability
  8. : The Marquee element
  9. Attributes
  10. Event handlers
  11. Methods
  12. Examples
  13. Result
  14. Technical summary
  15. HTML Tag
  16. Alternatives of the HTML tag
  17. Syntax
  18. Example of using HTML tag:
  19. Example of a scrolling text:
  20. Example of a scrolling image:
  21. Example of creating a scrolling text with HTML tag:
  22. Attributes
  23. How to style tag?
  24. Common properties to alter the visual weight/emphasis/size of text in tag:
  25. Coloring text in tag:
  26. Text layout styles for tag:
  27. Other properties worth looking at for tag:
  28. HTML Marquee Code
  29. CSS Marquee
  30. Bootstrap Carousel
  31. HTML Marquees
  32. Continuous scrolling text
  33. Slide-in text
  34. Text bouncing back and forth
  35. Text Scrolling Upwards
  36. Change the Scrolling Speed
  37. Scrolling Images
  38. Images & Text (Both Scrolling)
  39. Cool Effects with Marquees!
  40. Related

Marquees

Sometimes you might want your text or photos to continuously «scroll» across the screen. Or maybe you’d like it to zoom in from the side, then stay there. Or perhaps you’d like it to bounce back and forth across the screen. All these things are possible using marquees.

There are two main methods for creating marquees (without using JavaScript). These are:

HTML Tag

The tag allows you to create marquees with a minimum of fuss. Simply add the tag, include some attributes, and there’s your marquee.

See HTML marquee for more about this method.

Source Code Result
Scrolling text.

In the above example, everything between the tags scrolls across the page. You could also make the text bounce, slide—in, or you could even make a scrolling image.

CSS Animations

You can also use CSS animations to create a marquee. In fact, this is the recommended option. CSS animations are being included in the official CSS specifications (from CSS3) and it’s expected that this will be the default method for creating marquees in the future.

Here’s an example of using CSS animations to create the same effect as the above example.

See CSS marquee for more about this method.

HTML Marquees vs CSS Marquees

CSS animations are the recommended option for creating marquees. This is because animations are being included in the official CSS specifications, whereas the HTML element was never in the official HTML specifications (it is a non-standard element).

While HTML marquees are easier to code, they don’t provide the range of possibilities that CSS animations do. Also, browser support for the element is likely to be phased out in favor of CSS animations.

Therefore, CSS marquees are your best option for adding scrolling text, bouncing text, slide—in text, images, etc to your web page.

More Marquee Codes

You can do much more with HTML marquees than is covered on this page. Here’s the full list of marquee codes on this website:

Marquee Generator

Marquee Usability

Try to be careful when using HTML marquees. Many web users dislike websites that contain scrolling or bouncing images and other elements, so try to use them tastefully 🙂

Читайте также:  Web application server for java

Источник

: The Marquee element

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The HTML element is used to insert a scrolling area of text. You can control what happens when the text reaches the edges of its content area using its attributes.

Attributes

Sets how the text is scrolled within the marquee. Possible values are scroll , slide and alternate . If no value is specified, the default value is scroll .

Sets the background color through color name or hexadecimal value.

Sets the direction of the scrolling within the marquee. Possible values are left , right , up and down . If no value is specified, the default value is left .

Sets the height in pixels or percentage value.

Sets the horizontal margin

Sets the number of times the marquee will scroll. If no value is specified, the default value is −1, which means the marquee will scroll continuously.

Sets the amount of scrolling at each interval in pixels. The default value is 6.

Sets the interval between each scroll movement in milliseconds. The default value is 85. Note that any value smaller than 60 is ignored and the value 60 is used instead unless truespeed is specified.

By default, scrolldelay values lower than 60 are ignored. If truespeed is present, those values are not ignored.

Sets the vertical margin in pixels or percentage value.

Sets the width in pixels or percentage value.

Event handlers

Fires when the marquee has reached the end of its scroll position. It can only fire when the behavior attribute is set to alternate .

Fires when the marquee has finished the amount of scrolling that is set by the loop attribute. It can only fire when the loop attribute is set to some number that is greater than 0.

Fires when the marquee starts scrolling.

Methods

Starts scrolling of the marquee.

Stops scrolling of the marquee.

Examples

marquee>This text will scroll from right to leftmarquee> marquee direction="up">This text will scroll from bottom to topmarquee> marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> marquee behavior="alternate"> This text will bounce marquee> marquee>

Result

Technical summary

Источник

HTML Tag

The is a non-standard HTML tag which was used to create a scrolling text or an image. It was used to make the text or image scroll horizontally across or vertically down the web page. Because of its usability problems it was often compared with Netscape’s blink element.

Alternatives of the HTML tag

As it was said above, the HTML tag is deprecated, and the developers often avoid using it. Nowadays, you can achieve the same result with the help of CSS and Javascript. Read our snippet to learn more about this method.

Syntax

The tag comes in pairs. The content is written between the opening () and closing () tags.

Example of using HTML tag:

html> html> head> title>Title of the document title> style> marquee< font-size: 30px; font-weight: 800; color: #8ebf42; font-family: sans-serif; > style> head> body> marquee>A scrolling text created with HTML Marquee element. marquee> body> html>

Use direction attribute of element to change the direction of the text/image. See another example where the text scrolls from up to down.

Example of a scrolling text:

html> html> head> title>Title of the document title> head> body> marquee direction="down">A scrolling text created with HTML Marquee element. marquee> body> html>

Now let’s see an example of using element for setting a scrolling image:

Example of a scrolling image:

html> html> head> title>Title of the document title> head> body> marquee behavior="scroll" direction="up"> img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="W3docs" /> marquee> body> html>

Example of creating a scrolling text with HTML tag:

html> html> head> title>Title of the document title> head> body> style> marquee < width: 100%; padding: 10px 0; background-color: lightblue; > style> marquee direction="scroll">This scrolling text is created with HTML Marquee element and styled with CSS properties. marquee> body> html>

Attributes

The following attributes can be used to adjust the appearance of the element.

Attribute Value Description
behavior scroll
slide
alternate		 Defines the scrolling type.
bgcolor rgb(x,x,x)
#xxxxxx
colorname		 Is used to give a background color.
direction up
down
left
right		 Sets the direction for the scrolling content.
height pixels
%		 Defines the marquee’s height.
hspace pixels Defines horizontal space around the marquee.
loop number Defines how many times the content will scroll. If we don’t define this, the content will scroll forever.
scrollamount number Defines the scrolling amount at each interval in pixels. Default value is 6.
scrolldelay seconds Defines how long delay will be between each jump. The default value is 85 and smaller amounts than 60 will be ignored.
truespeed seconds Is used to delay the scroll lesser than 60.
vspace pixels Defines vertical space around the marquee.
width pixels
%		 Defines the marquee’s width.

How to style tag?

Common properties to alter the visual weight/emphasis/size of text in tag:

  • CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
  • CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
  • CSS font-size property sets the size of the font.
  • CSS font-weight property defines whether the font should be bold or thick.
  • CSS text-transform property controls text case and capitalization.
  • CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in tag:

  • CSS color property describes the color of the text content and text decorations.
  • CSS background-color property sets the background color of an element.

Text layout styles for tag:

  • CSS text-indent property specifies the indentation of the first line in a text block.
  • CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
  • CSS white-space property specifies how white-space inside an element is handled.
  • CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for tag:

  • CSS text-shadow property adds shadow to text.
  • CSS text-align-last property sets the alignment of the last line of the text.
  • CSS line-height property specifies the height of a line.
  • CSS letter-spacing property defines the spaces between letters/characters in a text.
  • CSS word-spacing property sets the spacing between words.

Источник

HTML Marquee Code

Code for adding scrolling text & images to your website or blog.

CSS Marquee

CSS marquees are the standards-compliant way of creating marquees in HTML.

The Bootstrap carousel is also standards-compliant, as it is basically a Bootstrap version of a CSS marquee.

HTML Marquees

You can also use the tag to create a marquee. You can make the text/images scroll from right to left, left to right, top to bottom, or bottom to top.

The tag is non-standard HTML. Despite this, it has enjoyed widespread browser support. For a standards-compliant method, see CSS Marquees or Bootstrap Carousels.

If you can’t view the examples, it’s likely that your browser doesn’t support the tag.

Continuous scrolling text

This marquee causes the text to scroll continuously from right to left. Once it disappears from the left, it re-appears from the right.

Slide-in text

This text slides in from the right, then stays where it is. You will need to refresh this page to see the effect again.

Text bouncing back and forth

Text Scrolling Upwards

Change the Scrolling Speed

Scrolling Images

Simply replace the src https://www.quackit.com/preview/preview_example_code.cfm» method=»post» target=»result8″ name=»formEditor8″>

Images & Text (Both Scrolling)

Simply add your text under the image tag (but still within the marquee tags).

Cool Effects with Marquees!

You can use HTML marquees for some cool effects. Check out this falling text (generated with the Falling Text Generator).

Marquee effects. cool! Marquee effects. cool! . cool! Marquee effects. cool! Marquee effects. cool! Marquee effects. cool! Marquee effects. cool! Marquees. Marquee effects. cool! Marquee effects. cool! Marquee effects. cool! Marquee effects. cool! Marquee effects. cool! . effects. Marquee effects. cool! Marquee effects. cool! Marquee effects. cool! Marquee effects. cool! Marquee effects. cool! Marquee effects. cool! Marquee effects. cool!

  • CSS Marquees
  • Bootstrap Carousel
  • Stop a Marquee Automatically (CSS)
  • Pause a Marquee on Hover (CSS)
  • JavaScript Marquee
  • Scrolling Images (HTML)
  • Stop/Start Marquee (HTML)
  • Slow Down Marquee (HTML)
  • Marquee Generator (HTML)
  • Falling-Text Generator (HTML)
  • Falling Images Generator (HTML)

Источник

Оцените статью
© 2023 Программирование