Open main menu

Snippets/Movie Credits

< Snippets
How to use Snippets
List of Snippets
Crystal Clear action run.png
Movie Credits
Language(s): CSS
Compatible with: MediaWiki 1.22+ (all)

Contents

DescriptionEdit

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

Visual ExampleEdit

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

UsageEdit

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>

CodeEdit

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}}};
-webkit-animation:{{{animation seconds}}}s credits linear {{{How often}}};
-ms-animation:{{{animation seconds}}}s credits linear {{{How often}}};
-o-animation:{{{animation seconds}}}s credits linear {{{How often}}};
-moz-animation:{{{animation seconds}}}s credits linear {{{How often}}};
animation-direction:{{{direction}}};
-webkit-animation-direction:{{{direction}}};
-ms-animation-direction:{{{direction}}};
-o-animation-direction:{{{direction}}};
-moz-animation-direction:{{{direction}}};
}

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

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

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

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

NotesEdit

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)