つまりどんな

こんな。

使い方

とりあえず HTML をかく。

フェードインで出したいテキストを1行ずつ p 要素で囲って書いていく。その上でフェードインで出したいテキストを div 要素で括り、適当な ID を振る。

<div id='fade-in'>
  <p>ある日突然、あなたに１２人もの妹ができたらどうしますか？</p>
  <p>それも……とびっきりかわいくて</p>
  <p>とびっきり素直で</p>
  <p>とびっきり愛らしくて</p>
  <p>とびっきりの淋しがりや。</p>
  <p>しかも、そのうえ……</p>
  <p>彼女達はみんなみんな、とびっきり！</p>
  <p>お兄ちゃんのコトが大好きなんです……</p>
</div>

JS を追加する。今回重要な仕事をするのは http://shunshun94.web.fc2.com/lib/scroll-fadein.js に配置された jQuery プラグイン。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://shunshun94.web.fc2.com/lib/scroll-fadein.js"></script>
<script>
	$('#fade-in').scrollFadeIn();
</script>

後はページを開けば上記の HTML がスクロールに合わせてちょっとずつ表示されるはず。

上記の $('#fade-in').scrollFadeIn(); がトリガーになっている。これにより、 $('#fade-in') 直下の各要素がフェードインするようになる。なお、 p 要素以外もフェードインするようになっているので、画像とかうまく使ったら面白いかもしれない。途中まで進めると背景画像が上書きされるとか。