Snippets/Movie Credits

How to use Snippets
List of Snippets

Movie Credits
Language(s):	CSS
Compatible with:	MediaWiki 1.22+ (all)

Description

This snippet is for producing a moving scroll that moves up just like Movie Credits do.

Visual Example

Unfortunately since this is a css animation effect it's impossible to show when the css is not included on the page.

Usage

Usage is super, super easy. Just drop text, photo(s), galleries, videos, etc., in after the divisors. In the CSS just decide how the animation will function. The CSS below is written with Mediawiki variables. THE CSS WILL NOT WORK UNLESS YOU CHANGE THE VARIABLES TO ACTUAL NUMBERS, WORDS, ETC. You can also keep the css below with variables inside a template if you're using the css per page extension.

The "sealoff" divisor is important to keep the content inside the normal wiki page. Without it weird things happen like having the text scroll below & behind the wiki preview function.

Example:

<div class="sealoff">
<div class="wrapper">
	
{{{Content}}}

</div></div></includeonly>

Code

CSS Movie Credits

/* CSS Movie Credits
 * 
 * Original version found at: http://codepen.io/reejosamuel/pen/ALjcr
 * current version crafted together by [[User:Christharp]] to work inside Mediawiki..
 */
.sealoff {
postion:relative;
width:100%;
height:{{{height of seal}}}px;
overflow:hidden;
}
.wrapper {
  position: relative;
  top: 100%;
  left: 0%;
  width: 100%;
  animation: {{{animation seconds}}}s credits linear {{{How often}}};
  animation-direction:{{{direction}}};
}

@keyframes credits {
  0% {
    top: 100%;
  }
  100% {
    top: -{{{Negative Top}}}%;
  }
}

Notes

height of seal is equal to the visible part of the scroll and the amount of room it will take on the page.

animation seconds is equal to the duration of the scroll (Google: animation-duration)

How often is equal to the number of times the animation will happen (Google:animation-iteration-count)

direction is the direction the animation is taking. (Google:animation-direction)