Perspective Marquee Table

Ignition
, ,
3

Here’s a CSS solution.

Marquee vertical

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 
[
  {
    "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 if you want to learn more.

3 Likes