Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="txtscroll container">
- <p class="marquee" id="overviewContent" style="text-align:center"></p>
- </div>
- .container {
- width: 80%;
- height: 8em;
- margin: 1em auto;
- overflow: hidden;
- background: white;
- position: relative;
- box-sizing: border-box;
- }
- .marquee {
- top: 6em;
- position: relative;
- box-sizing: border-box;
- -moz-box-sizing: border-box;
- animation: marquee 15s linear infinite;
- -webkit-animation:marquee 15s linear infinite;
- }
- .marquee:hover {
- animation-play-state: paused;
- -webkit-animation-play-state: paused;
- }
- /* Make it move! */
- @keyframes marquee {
- 0% { top: 8em }
- 100% { top: -11em }
- }
- @-webkit-keyframes marquee {
- 0% { top: 8em }
- 100% { top: -11em }
- }
- /* Make it look pretty */
- .txtscroll .marquee {
- margin: 0;
- padding: 0 1em;
- line-height: 1.5em;
- font: 0.9em vardana;
- }
- .txtscroll:before, .txtscroll::before,
- .txtscroll:after, .txtscroll::after {
- left: 0;
- z-index: 1;
- content: '';
- position: absolute;
- pointer-events: none;
- width: 100%; height: 2em;
- background-image: linear-gradient(180deg, #FFF, rgba(255,255,255,0));
- }
- .txtscroll:after, .txtscroll::after {
- bottom: 0;
- transform: rotate(180deg);
- transform: rotate(180deg);
- }
- .txtscroll:before, .txtscroll::before {
- top: 0;
- }
- for (var i = 0; i < models.length; i++) {
- $("#overviewContent").append("<br/>" + models[i].YearProcessed + " " + monthInText(models[i].MonthProcessed) + "<span> </span><i>" + models[i].TotalProduction + "Kg</i>");
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement