永遠少年症候群

MENU

about

当サイトは趣味の創作サイトです。著作権は特に明記のない限り放棄していません。
リンクはご自由にどうぞ。
画像リンクの際はこちらのバナー又はロゴをご利用ください。

かいてるひと

ぶくま

Search

novel

ファンタジー、恋愛要素、ハッピーエンド多め。
たまに暴力やグロテスクな表現があります。
小説一覧

Series

  • あいうえお題
  • 血飛沫の国のアリス
  • bloody
  • 僕は勇者になりたかった
  • Celia in Realworld.
  • ココにあるもの
  • エトセトラ!
  • G@mE
  • ハッピーエンドはまだ遠い
  • LUCKY GIRL
  • ファンタジー設定で∞のお題
  • 教えられない教師の話
  • 掌編
  • イメージソング
  • 大正哀歌
  • 世界観・人物紹介
  • 他の形式で読む

    ブクログのパブー……電子書籍形式。詩の投稿はこちらのみ。
    小説家になろう……ガラケー、スマホ対応。pdf形式の縦書き対応。

    【jquery】1文字ずつフェードインするテキスト

     仕事で実装してほしいと言われたが、結局使わなかった。供養のためここに記す。
     なめらかに1文字ずつフェードインしながら表示するテキスト。

    単発編(ロード時発火)

     使いどころはたぶん、記事タイトルとかのアクセントだな。
     参考サイト:jQueryで文章を1文字ずつアニメーション表示(複数行対応)

     考え方としては参考サイトと同じで、1文字ずつspanタグでくくり、順番に不透明になるように文字を入れたspanを表示していく。
     ここで私がやりたかったのは改行と1文字ずつくくったspanタグをアニメーション終了後に見せないこと。
     多言語化する可能性があったため、最後にアニメーション前のプレーンなhtmlに戻すという作業を追加した。(それで本当に翻訳に支障がないようになるのかは知らないけど)

     複数一気に表示したいときはeach使ってください。

    複数編(スクロールして画面領域に入ったときに発火)

     フェードインしたいテキストがたくさんあるとき。
     参考サイト:jQueryで~の要素に~クラスが付与されたら発動する機能を作成してみた。
     スクロールして画面領域に入ったときにフェードインさせ始めたいとき。
     しかし、スクロールイベントを取ると、スクロールするたびにイベントを始めてしまい、エラー地獄に陥る。
     元々、別のアニメーションのためにaddClassしていたので、これを再利用してaddClassしたときにイベント発火することにした。
     参考サイトでは、onでイベントを取っているが、スクロールするたびにaddClassされていて、結局同じことになったのでonをoneに変更してます。

    ads