Snippets/Movie Credits

How to use Snippets
List of Snippets
Movie Credits
Language(s): CSS
Compatible with: MediaWiki 1.22+ (all)

Description

edit

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

Visual Example

edit

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

Usage

edit

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

edit

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

edit

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)