Scrolling marquee

Scrolling marquee

Scrolling marquee


the official templates

Photoshop HTML5 Hype



Scrolling marquee
To ensure understanding of readers, always use the arrows in pair by placing them at either end of the marquee with a transparency of about 30% opacity. Do not color the arrows. These icons serve only as visual prompts, not buttons to trigger movement.


Possible directions for this interaction: vertical, horizontal (note that vertical mode with the ⅙ and banner formats is not permitted).


  • The scrolling marquee must not be an infinite loop.
  • Use the 65 px arrows (at around 30% opacity) for full-screen, half-screen, 1/3 vertical and 1/3 horizontal ads. With smaller ads, use the 40 px arrows (at around 30% opacity).

Supported formats

  • Full-screen


    980 x 670
    500 Ko
  • Half-screen


    480 x 670
    400 Ko
  • ¼ vertical

    ¼ vertical

    230 x 670
    200 Ko
  • ¼ horizontal

    ¼ horizontal

    480 x 325
    200 Ko
  • ⅙ horizontal

    ⅙ horizontal

    480 x 210
    200 Ko


Security area used for the screen change.

To facilitate the screen change and prevent accidental opening of the new Slide Over panel in iOS 9, this area placed in full-screen format must be free from any interaction using a sliding movement of the finger on the screen. It is also recommended that any elements displayed at the bottom of the page, such as the company logo, the +WEB target and the call to action, be left static.