# Perspective Marquee Table

**URL:** <https://forum.inductiveautomation.com/t/perspective-marquee-table/59555>\
**Category:** Ignition\
**Tags:** ignition81, scripting, perspective\
**Created:** [May 13, 2022, 6:20pm UTC](https://forum.inductiveautomation.com/t/perspective-marquee-table/59555 "2022-05-13T18:20:31Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [May 13, 2022, 8:07pm UTC](https://forum.inductiveautomation.com/t/perspective-marquee-table/59555/3 "2022-05-13T20:07:15Z")

</div>

Here’s a CSS solution.

![Marquee vertical](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/a/ea1563953310dd5872effdcd58cb7829eb1b6b2a.gif)

It consists of a label inside a flex container and a style class “marquee”.

Paste the code below into your view’s root.

> **Marquee components JSON**
>
> ```auto
> [
> {
> "type": "ia.container.flex",
> "version": 0,
> "props": {
> "style": {
> "overflow": "hidden",
> "borderStyle": "solid",
> "borderWidth": 1,
> "borderColor": "#058823",
> "padding-left": "8px"
> }
> },
> "meta": {
> "name": "FlexContainer"
> },
> "position": {
> "x": 302,
> "y": 127,
> "height": 63,
> "width": 258
> },
> "custom": {},
> "children": [
> {
> "type": "ia.display.label",
> "version": 0,
> "props": {
> "text": "Text line 1\nText line 2\nText line 3\nText line 4",
> "textStyle": {
> "classes": "marquee",
> "whiteSpace": "pre",
> "overflow": "visible",
> "animation": "marquee 4s linear infinite"
> }
> },
> "meta": {
> "name": "Label"
> },
> "position": {
> "grow": 1,
> "basis": 400
> },
> "custom": {}
> }
> ]
> }
> ]
> 
> ```

- Create a new style called “marquee”.
- Set **Background** , **Background Image** to  
` } @keyframes marquee {from { transform: translateY(100%); } to {transform: translateY(-100%); } } {`
- Add a bit of left and right padding to the style class to suit.

It should all work.  
Modify to suit.  
Start at [W3Schools](https://www.w3schools.com/css/css3_animations.asp) if you want to learn more.

---

_[View the full topic](https://forum.inductiveautomation.com/t/perspective-marquee-table/59555)._