record-fixing

重要！

更なる追加オプションとして、再生終了と同時にテープアニメーションも停止させる機能が作成されました。

詳しくは下記のページをご確認ください。
http://pseudo-scp-jp.wikidot.com/record-fixing2

サンプル

▷PLAY

ああああああああ
あああああああああ
あああああああああ
aaaaaa
bbb

　

字幕の改行

改行は3行まで可能です。

[[div class="tape-wrap"]]
[[collapsible show="▷PLAY" hide="-"]]
[[div class="tape-anim"]]
[[div class="tape-left"]]
[[/div]]
[[div class="tape-right"]]
[[/div]]
[[/div]]

[[div class="tape-record"]]
[[span class="record r1"]]//ああああああああ//[[/span]]
[[span class="record r1 line2"]]//あああああああああ//[[/span]]
[[span class="record r1 line3"]]//あああああああああ//[[/span]]
[[span class="record r2"]]aaaaaa[[/span]]
[[span class="record r2 line2"]]bbb[[/span]]

　
[[/div]]
[[/collapsible]]
[[/div]]

変更後のCSS

[[module CSS]]
.r1 {animation-delay: 3s;}
.r2 {animation-delay: 6s;}

.tape-record {position: relative;height: 6em;overflow: hidden;white-space: pre;}.record {position: absolute;animation-name: record;animation-duration: 2.5s;opacity: 0;top: 0;left: 50%;transform: translateX(-50%);}.line2 {top: 1.2em!important;}.line3 {top: 2.4em!important;}.tape-wrap {position: relative;background-color: rgba(244,244,244,1);border: 1px dashed #999;padding: 0 1em;}.tape-anim {position: relative;background-image: url( "http://unofficial-scp-sandbox-jp.wikidot.com/local--files/iroiro-workshop-8/DoxYSJAV4AET63r.png" );background-size: 200px;background-position: center center;background-repeat: no-repeat;min-height: 300px;}.tape-left,.tape-right {display: block;position: absolute;margin: auto;height: 0;width: 70px;padding-bottom: 100%;background-image: url( "http://unofficial-scp-sandbox-jp.wikidot.com/local--files/iroiro-workshop-8/scp_trans.png" );background-size: contain;background-position: center center;background-repeat: no-repeat;}.tape-wrap .collapsible-block-unfolded-link .collapsible-block-link {display: none;}.tape-left {top: -20px;bottom: 0;left: -70px;right: 0;animation-name: spin1;animation-duration: 15s; animation-timing-function: linear; animation-fill-mode: forwards;}.tape-right {top: 0px;bottom: -32px;left: 0;right: -72px;animation-name: spin1;animation-duration: 20s; animation-timing-function: linear; animation-fill-mode: forwards;}@keyframes spin1 {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}@keyframes record {0% {opacity: 0;}25% {opacity: 1;}75% {opacity: 1;}100% {opacity: 0;}}@-moz-document url-prefix() {.tape-left {top: -200px;}.tape-right {top: -170px;}}
[[/module]]