Fadeout Page-Contents

WELCOME

VIEW SOURCE


rev: 23 | size: 5806

デモ

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitationy ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum?

使い方

基本

1. ページのどこかに以下のcssモジュールをコピペしてください

一番上か一番下が見易いと思います。

[[module css]]
/* 
Fadeout Page-Contents
- Copyright (c) 2020 ukwhatn
- Released under the MIT License
- http://expunged.xyz/MIT.txt
*/

/*== variables ==*/
.fadeout-wrapper {

  /* フェードアウトにかかる時間 */
  --fadeout-time: 1s;

  /* 画像のフェードインにかかる時間(必要なら使用) */
  --img-fadein-time: 1s;

  /* 画像のフェードインがスタートするまでの遅延(必要なら使用) */
  --img-fadein-delay: 1s;

}

/*== BASE CODE ==*/

div#container-wrap {
  background: url(http://expunged.xyz/css/sigma9/origin/header-crop.png) top left repeat-x;
}

.fadeout-wrapper  {
  position: relative;
  overflow: hidden;
}

.fadeout-wrapper .cover{
  width: 100%;
  height: 200%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  background: white;
  color: transparent;
  animation: cover-anim var(--fadeout-time) linear 0s 1 forwards;
}

@keyframes cover-anim {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeout-wrapper .escape {
  position: relative;
  display: inline-block;
  z-index: 3;
}

.fadeout-wrapper .fadein-img img{
  position: relative;
  z-index: 3;
  opacity: 0;
  animation: cover-anim var(--img-fadein-time) linear var(--img-fadein-delay) 1 forwards;
}

[[/module]]

2. 以下のように消したい文章を記述してください

一部だけ消したい場合は、fadeout-wrapperの外に消したくない文章を配置してください。

[[div_ class="fadeout-wrapper"]]
消したい文章
@@ @@
[[collapsible show="押すと消えます" hide=" "]]

[[div class="cover"]]
@@ @@
[[/div]]
[[/collapsible]]

[[/div]]

3. 完成

上のコードを動かすとこうなります

消したい文章

オプションとか応用とか

文章の途中の一部だけ残したい

[[span class="escape"]]消したくない文字[[/span]]と記述したところは消えません。これは文中何度でも使うことができます。

[[div_ class="fadeout-wrapper"]]
消したい文章消したい文章[[span class="escape"]]消したくない文章[[/span]]消したい文章消したい文章[[span class="escape"]]消したくない文章[[/span]]
@@ @@
[[collapsible show="押すと消えます" hide=" "]]

[[div class="cover"]]
@@ @@
[[/div]]
[[/collapsible]]

[[/div]]
消したい文章消したい文章消したくない文章消したい文章消したい文章消したくない文章

もっと遅く/早くフェードアウトさせたい

→ CSSモジュールの一番上の--fadeout-time: .5sの値を1sとか0.1sとかにすれば任意の速さでフェードアウトできます。

フェードアウト後に画像を表示したい

→ 以下のように記述してください。CSSモジュールの一番上の変数でタイミングなどを調整できます。

[[div_ class="fadeout-wrapper"]]
消したい文章
@@ @@
[[collapsible show="押すと消えます" hide=" "]]

[[div class="cover"]]
@@ @@
[[/div]]

[[div_ class="fadein-img"]]
[[=image 画像のURLやファイル名]]
[[/div]]

[[/collapsible]]

[[/div]]

デモ

消したい文章

ページタイトルも同時に変えたい

このページを参照してください。リンク先の構文を使用する際、このページにあるコードをコピペする必要はありません。

〇〇ってできないの?

私のTwitterかDiscordかwikidotのPMで ukwhatnukwhatn にご連絡ください。なるはやで作ってお渡しします。

やってること

仕組み

折り畳みブロックの中には、.fadeout-wrapperの前面いっぱいの大きさで背景色と同じ色の長方形が格納されています。
折り畳みを展開するとこの長方形が表示され、文字を隠してしまうことで消えたように見せています。

このギミックの肝は、折り畳みブロックの中の要素にかけられたCSSアニメーションは、折り畳みブロックが展開された時を0sとして動作を開始することです。

これにより、折り畳みが展開されると同時にアニメーションがスタートし、--fadeout-timeで定義された時間で長方形の透明度を0から1に変化させています。

また、SCP-JPで使用することを前提とし、header画像の下部に含まれる影のグラデーションを消すため、予めクロップした画像をheaderとして読み込ませています。

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License