Perspective Marquee Table

Ignition
, ,
1

Hello there is a way to make that in table on perspective??

2

I’m not incredibly experienced, but I was able to create something like this using the View Canvas component. You can set the top property binding like shown in the Inductive University video . I made the reset work by another expression binding on the duration property.

image
image1048Ă—813 54 KB

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
4

wow it works , thankyou but how can i reduce the blank animation a try to reduce the trslation or size of the component but i can´t find reduce the blank animation.

5

I don’t know if it’s worth the trouble. You’re going to have other problems - the scroll speed will vary with the number of lines of text, etc. - and who is going to stand there waiting for the information to scroll by?

If you really want to persist then search for pure css scolling vertical marquee. Most solutions seem to have two copies of the text which, in your case, would scroll off the top of the view before jumping back down to the bottom.

6

Is there a reason the Carousel doesn’t work for what you’re trying to do?