Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

smooth text movement on casparcg html template #44

Open
fatemi994 opened this issue Aug 15, 2020 · 0 comments
Open

smooth text movement on casparcg html template #44

fatemi994 opened this issue Aug 15, 2020 · 0 comments

Comments

@fatemi994
Copy link

fatemi994 commented Aug 15, 2020 •
edited

Hi

I've created an html template to slide a text from left to right. I've used css to animate the text. the result in the browser(firefox, chrome, ...) is good but when I want to play the template on casparCG the result is not good becuase the movement of the text is not smooth and shakes while moving. What causes this problem?
If anyone has an idea?

Thanks

below is the source of my html template:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
	html {
		background-color: transparent;
		box-sizing: border-box;
		overflow: hidden;
		font-family: IRIBSahand, Tahoma, Geneva, sans-serif;
		font-size: 4vw;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	@keyframes slide {
		from { right: 100%;}
		to { right: -100%;}
	}
	@-webkit-keyframes slide {
		from { right: 100%;}
		to { right: -100%;}
	}

	#marquee { 
		width: 88vw;
		overflow:hidden;
		position: absolute;
		bottom: 0vmax;
		height: 8vw;
		line-height: 6vw;
		font-size: 0.35rem;
		color: #16354d;
		font-family: IRIBSahandBold;
		font-weight: bold;
		background-color: white;
		direction: rtl;
		margin-left: 6vw;
	}

	#text {
		position:absolute;
		top:0;
		right:0;
		width:3500px;
		height: 8vw;
		font-size: 0.35rem;
		animation-name: slide;
		animation-duration: 30s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		-webkit-animation-name: slide;
		-webkit-animation-duration: 30s;
		-webkit-animation-timing-function:linear;
		-webkit-animation-iteration-count: infinite;
	}

    </style>
</head>
<body>

<div id="marquee">
	<div id="text">متن زیرنویس در این قسمت وارد می شود. این یک متن آزمایشی لست</div>
</div>

</body>
</html>

CasparCG server config:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <paths>
    <media-path>media\</media-path>
    <log-path>log\</log-path>
    <data-path>data\</data-path>
    <template-path>templates\</template-path>
    <thumbnails-path>thumbnails\</thumbnails-path>
  </paths>
  <channels>
    <channel>
        <video-mode>1080p2500</video-mode>
        <consumers>
          <screen>
            <device>1</device>
          </screen>
          <system-audio />
        </consumers>
    </channel>
  </channels>
  <controllers>
    <tcp>
        <port>5250</port>
        <protocol>AMCP</protocol>
    </tcp>
  </controllers>
</configuration>
@fatemi994 fatemi994 changed the title text movement of an html template is not smooth on casparcg smooth text movement on casparcg html template Aug 15, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@fatemi994