Behavior Attribute in marquee

by

Behavior Attribute in marquee

One of the main attributes of the <marquee> tag was behavior, which determined how the text or image moved across the screen. Here’s a breakdown of its possible values:

  1. Scroll (Default Behavior)
    This is the default setting, where the content scrolls across the screen from one side to the other and repeats itself.htmlSalin kode<marquee behavior="scroll">This is scrolling text.</marquee>
  2. Slide
    In this setting, the text or image slides in from one side and stops once it reaches the other side.htmlSalin kode<marquee behavior="slide">This text slides in.</marquee>
  3. Alternate
    This makes the content bounce back and forth between the two edges of the container.htmlSalin kode<marquee behavior="alternate">This text bounces.</marquee>

Customization Options

The <marquee> tag also had additional attributes for further customization:

  • direction: Specifies the direction of the scroll (e.g., left, right, up, down).
  • scrollamount: Controls the speed of the scroll.
  • scrolldelay: Adds a delay between movements.
  • loop: Determines how many times the text scrolls before stopping.

For example:

htmlSalin kode<marquee behavior="scroll" direction="up" scrollamount="5" scrolldelay="100" loop="3">
   This text scrolls upwards slowly and stops after 3 loops.
</marquee>

Why It Was Deprecated

While the <marquee> tag was a fun way to add dynamic elements to early websites, it presented numerous issues:

  • Poor Accessibility: It made websites harder to navigate for users with disabilities, especially for those using screen readers.
  • Inconsistent Behavior: Different browsers handled the tag inconsistently, leading to unpredictable results.
  • Performance Impact: Scrolling elements could negatively impact page performance, especially on slower devices or browsers.

Modern Alternatives

For modern web design, developers now rely on CSS and JavaScript to create scrolling or animated effects. Here’s an example of how you can create a marquee effect using CSS:

cssSalin kode.marquee {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee p {
  display: inline-block;
  padding-left: 100%;
  animation: scroll-left 10s linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

And in HTML:

htmlSalin kode<div class="marquee">
  <p>This is a modern marquee effect using CSS.</p>
</div>

Conclusion

The <marquee> tag may have been a nostalgic element of the early web, but its limitations led to its eventual deprecation. Today, developers achieve similar effects using more sophisticated and accessible methods such as CSS animations or JavaScript libraries.

If you’re looking to create smooth scrolling effects on modern websites, using these updated techniques ensures better performance, accessibility, and compatibility across browsers.