帮助:电影演职员表

描述

此片段用于生成一个移动的滚动，就像电影演职员表一样向上移动。
参考

https://www.mediawiki.org/wiki/Snippets/Movie_Credits

可视化示例

不幸的是，由于这是一个 css 动画效果，因此当页面上不包含 css 时无法显示。
但是新版mediawiki增加了过滤css更严格了只能添加到全站css里除非站点大量修改过。

用法

使用超级，超级简单。只需在除数之后放置文本、照片、画廊、视频等即可。在CSS中，只需决定动画将如何运行。下面的CSS是用Mediawiki变量编写的。除非您将变量更改为实际数字、单词等，否则 CSS 将不起作用。如果您使用的是每页 css 扩展名，您还可以在模板中保留带有变量的 css。

“sealoff”除数对于将内容保留在正常的wiki页面中很重要。没有它，就会发生奇怪的事情，例如让文本在wiki预览功能下方和后面滚动。

例：

<div class="sealoff">
<div class="wrapper">
	
这里是内容

</div></div>

李白《行路难·其一》

金樽清酒斗十千，玉盘珍羞直万钱。
停杯投箸不能食，拔剑四顾心茫然。
欲渡黄河冰塞川，将登太行雪满山。
闲来垂钓碧溪上，忽复乘舟梦日边。
行路难，行路难，多歧路，今安在？
长风破浪会有时，直挂云帆济沧海。

CSS

/* 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}}};
  text-align: center; /* 增加了居中 */
}

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

笔记

显示高度等于卷轴的可见部分及其在页面上占用的空间量。

动画秒数等于滚动的持续时间（谷歌：动画持续时间）(Google: animation-duration)

频率等于动画发生的次数（Google：animation-iteration-count）

方向是动画所采用的方向。（谷歌：动画方向）(Google:animation-direction)

已经写好的css

可以根据需要修改。注意这个代码只适合一些短的文字如果需要图片视频等请增加高度，时间等。

图片示例

/* 电影演职员表一样文字向上移动 */
/* 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 {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.wrapper {
  position: relative;
  top: 100%;
  left: 0%;
  width: 100%;
  animation: 10s credits linear infinite;
  animation-direction: normal;
  text-align: center;
}

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