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

Example of a blinking text using CSS within a marquee

Содержание
  1. Marquee scroll text html
  2. Атрибут
  3. Обработчики событий
  4. Методы
  5. Examples
  6. Спецификации
  7. Совместимость с браузерами
  8. Found a content problem with this page?
  9. HTML Marquee Tag
  10. The Marquee Tag
  11. Scroll Up
  12. Scroll Down
  13. Scroll Left to Right
  14. Scroll Right to Left
  15. Scrolling Speed
  16. Blinking Text Within Marquee
  17. HTML Tag
  18. Alternatives of the HTML tag
  19. Syntax
  20. Example of using HTML tag:
  21. Example of a scrolling text:
  22. Example of a scrolling image:
  23. Example of creating a scrolling text with HTML tag:
  24. Attributes
  25. How to style tag?
  26. Common properties to alter the visual weight/emphasis/size of text in tag:
  27. Coloring text in tag:
  28. Text layout styles for tag:
  29. Other properties worth looking at for tag:
  30. HTML Marquee Code
  31. CSS Marquee
  32. Bootstrap Carousel
  33. HTML Marquees
  34. Continuous scrolling text
  35. Slide-in text
  36. Text bouncing back and forth
  37. Text Scrolling Upwards
  38. Change the Scrolling Speed
  39. Scrolling Images
  40. Images & Text (Both Scrolling)
  41. Cool Effects with Marquees!
  42. Related
  43. CSS Marquee
  44. What are Marquees?
  45. Scrolling Text Using CSS
  46. Scrolling Images Using CSS
  47. Bouncing Texts Effect

Marquee scroll text html

HTML-элемент используется для создания на странице прокручивающегося текста (бегущей строки).

Атрибут

Описывает поведение прокрутки. Допустимые значения: scroll , slide и alternate . Если значение не указано, то используется scroll .

Задаёт цвет фона (можно использовать имя цвета или шестнадцатеричное значение).

Задаёт направление прокрутки. Допустимые значения: left , right , up и down . Если значение не указано, то используется left .

Задаёт высоту в пикселях или процентах.

Задаёт количество прокруток. Если значение не указано, то используется -1, что означает бесконечную прокрутку

Задаёт сдвиг на каждом шаге в пикселях. По умолчанию 6.

Задаёт интервал между каждым шагом в миллисекундах. По умолчанию 85. Обратите внимание, что значения меньше 60 будут проигнорированы и будет использовано 60, если не присутствует атрибут truespeed .

Читайте также:  Integer диапазон значений python

По умолчанию значения меньше 60 в scrolldelay игнорируются. Однако, если присутствует truespeed , то они не игнорируются

Задаёт вертикальный отступ (margin) в пикселях или процентах.

Задаёт ширину в пикселях или процентах.

Обработчики событий

Срабатывает, когда marquee достиг конечного состояния. Срабатывает только в случаях, когда behavior имеет значение alternate .

Срабатывает, когда marquee прокрутился столько раз, сколько было задано в атрибуте loop . Срабатывает только тогда, когда атрибут loop имеет положительное значение.

Срабатывает в начале прокрутки.

Методы

Запускает прокрутку marquee.

Останавливает прокрутку 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>

Спецификации

Совместимость с браузерами

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on 17 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

HTML Marquee Tag

Marquee is one of the important tags introduced in HTML to support such scrollable texts and images within a web page. In this tutorial, you will be learning about the Marquee tag and its different attributes for developing a well-groomed static website.

The Marquee Tag

The tag is a container tag of HTML is implemented for creating scrollable text or images within a web page from either left to right or vice versa, or top to bottom or vice versa. But this tag has been deprecated in the new version of HTML, i.e., HTML 5.

The different attributes of tag are:

Here’s are some example of how to use tag in HTML:

Scroll Up

 This is a sample scrolling text that has scrolls in the upper direction.

Scroll Down

 This is a sample scrolling text that has scrolls texts to down.

Scroll Left to Right

 This is a sample scrolling text that has scrolls texts to right.

Scroll Right to Left

 This is a sample scrolling text that has scrolls texts to left.

Scrolling Speed

Marquee speed can be changed using the «scrollmount» attribute. For example, if you are using scrollmount=»1″ then it sets the marque to scroll very slowly, and as you increase the «scrollmount,» the scrolling speed will also increase.

Slow Scrolling Little Fast Scrolling Fast Scrolling Very Fast Scrolling

Marquee can also be implemented using CSS. Read the CSS Marquee chapter to learn more about it.

Blinking Text Within Marquee

         
Источник
 
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)
    •  
 
Источник
 
CSS Marquee
 
HTML marquee provides a standard way of creating scroll texts, slide-in, and bouncy texts, as well as images on your web page. In this chapter, you will learn about the marquee, but the implementation will be done with CSS.
 
What are Marquees?
 
Marquee is an animation effect for web pages used to create horizontal or vertical scrolling text and images. The element of HTML is not a standard-compliant, ie the element is not part of the W3 HTML specifications.
 
For creating a marquee using CSS, you have to use the CSS animation property together with the @keyframes rule. Let us now see its variations with implementation.
 
Scrolling Text Using CSS
 
Here you have to implement translateX() for determining the position of the text at the beginning or end of the animation. Your text will then move among these two assigned points as the animation progresses.
 
       
Marquee in CSS
 
  
 
Scrolling Images Using CSS
 
For making a scrolling image or animated content for your page, you have to replace your text (from the previous example) simply with any image of your choice. In addition, you have to make use of the element and as a nested tag put the tag within the .
 
Bouncing Texts Effect
 
This animation feature of the marquee will bounce back once it reaches the end (left or right) of your page.
 
       
Bouncy Marquee
 
  
 
Источник
 
   
 
Оцените статью
 
 
 
  
     
       
 
 
 
 
 
 
 
 
 
 © 2024 Программирование