Horizontally Scrolling Stock Ticker

Dash Python
1

Is there any way using Dash that I could replicate a horizontally scrolling stock ticker?

2

Hello @marketemp,

I believe you’d like some css magic.


.ticker:hover {
  animation-play-state: paused;
}

Make another modification for the ticker to pause when it is hovered so that you can make links to stocks as well.

3

Dash Extensions used to have a Ticker component that did exactly that. @Emil do you have plans to include this again in a future release?

4

Here is an example:

from dash import Dash, html, dcc

app = Dash(__name__)

app.layout = html.Div(
    html.Div(
        [html.Div([html.Div(x, className='ticker-item') for x in ['AAPL', 'GOOG', 'BNGO', 'TSLA', 'Test', 'Yup', 'testagain', 'rawr']], className='ticker'),
         html.Div([html.Div(x, className='ticker-item') for x in ['AAPL', 'GOOG', 'BNGO', 'TSLA', 'Test', 'Yup', 'testagain', 'rawr']],
                  className='ticker2')], className='ticker-wrapper',

    )
)

app.run(debug=True)

css

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@-webkit-keyframes ticker2 {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ticker2 {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.ticker-wrapper {
  max-width: 100vw;
  width: 100vw;
  overflow: hidden;
  height: 4rem;
  background-color: rgba(#000, 0.9);
  box-sizing: content-box;
  display: flex;
  justify-content: space-between;


  .ticker {
    height: 4rem;
    line-height: 4rem;
    white-space: nowrap;
    box-sizing: content-box;
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;

    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
   -webkit-animation-name: ticker;
           animation-name: ticker;
    -webkit-animation-duration: 30s;
            animation-duration: 30s;

  }

  .ticker2 {
    height: 4rem;
    line-height: 4rem;
    white-space: nowrap;
    box-sizing: content-box;
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;
    position: absolute;

    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
   -webkit-animation-name: ticker2;
           animation-name: ticker2;
    -webkit-animation-duration: 30s;
            animation-duration: 30s;

  }

}

.ticker-item {
    display: flex;
    border-left: 1pt solid black;
    justify-content: center;
    width: 100%;
}

.ticker-wrapper:hover > .ticker, .ticker-wrapper:hover > .ticker2 {
  animation-play-state: paused;
}

image
image1915×192 6.22 KB

4 Likes