Custom logo animation question

  • 1
  • Question
  • Updated 3 years ago
  • Answered
  • (Edited)
Anyone know how I can make my school logo move like the Kansas Jayhawk Logo on the 2016 NCAA tourney presentation?
Photo of Nate Bormann

Nate Bormann

  • 172 Points 100 badge 2x thumb

Posted 3 years ago

  • 1
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Nate,

It looks like from https://community.risevision.com/rise... that the animation to the logo is tied to the CSS.

Suggestion:

In a new Placeholder, add the HTML Widget. In the <head></head> tags, add these lines:

<style>
.logo {
animation: tada 10s 0s infinite linear;

}

@-webkit-keyframes tada {
from {
transform: scale3d(1, 1, 1);
}

1%, 2% {
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, +3deg);
}

3%, 5%, 7%, 9% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}

4%, 6%, 8% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, +3deg);
}

9% {
transform: scale3d(1, 1, 1);
}
}
</style>


Between the <body></body> tags add:

<div class="logo"><img src="http://school.com/logo.png"></div>

Edit: You may need to tweak the CSS to suit your logo.
(Edited)
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Look at this: https://daneden.github.io/animate.css/  There are many more like this, simply google "css animation."

Also, you could use programs such as Adobe Animate (former Flash) to create animated GIF, video, or HTML5 animation.

Do not get carried away, though. Too much of that tend to annoy people. I like to keep this on a subtle side.
(Edited)
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Pretty cool!