スクロールすると水彩風に文字がランダムで出てくるタイトル【自分用メモ】

サンプル

See the Pen bLvLRR by minami watanabe (@minami_watanabe) on CodePen.

コード解説メモ

HTML

一つ一つスパンで囲んでやります。

<div class="box">
  <h1 class="title">
    <span>坊</span><!--
 --><span>つ</span><!--
 --><span>ち</span><!--
 --><span>や</span><!--
 --><span>ん</span>
  </h1>
</div>

JS

スクロールイベントをつけてあげます

SCROLL_EVENT = {
    DELAY_VALUE: 100, //スクロールして表示する時の判定の余裕。大きいほど上の方までスクロールしてから表示される

    init:function(){
        this.setParameters();
        this.bindEvent();
    },

    setParameters: function(){
        this.$window = $(window);
        this.$center_item = $(".title *"); //ここで表示させる一文字一文字を変数に入れている
    },

    bindEvent: function(){
        var myself = this;
        this.$center_item.each(function(){
            var $targetCotent = $(this);
            //イベント設定
            myself.$window.on('load resize scroll', function(){
                var contentsTop = $targetContent.offset().top; //表示させる要素のトップの位置
                myself.displayContents(myself,$targetContent, contentsTop);
            });
        });
    },

    /*
    * スクロールして画面上にでてきたコンテンツにクラスを付与する
    *  myself 一番大きなオブジェクト
    * 　$content それぞれクラスを付与するコンテンツ
    *　 contentTop コンテンツのトップ位置
    */
    displayContents: function(myself,$content,contentTop){
        var windowScrollBottom = myself.$window.scrollTop() + myself.$window.height(); //ウィンドウの下位置
        // ウィンドウの下位置がコンテンツのトップ位置より下（数字的に大）に来た場合、クラス付与
        if(windowScrollBottom > contentTop + myself.DELAY_VALUE){ 
            $content.addClass('is-active');
        }
    }
}
SCROLL_EVENT.init()

CSStransitionでアニメーションをつけてあげます。

一文字一文字transtion-delayをちょっとずつずらしてつけてあげます。
思ったような雰囲気にならなかったら、delayの数字をいじったり、指定する番号を変えてあげましょう。

span {
  opacity:0;
  transition: opacity 1500ms cubic-bezier(.445,.05,.55,.95);
}
span:nth-of-type(even){transition-delay: 0.4s;}
span:nth-of-type(odd){ transition-delay: 0.8s;}
span:nth-of-type(3n+1) {transition-delay: 0.6s;}
span:nth-of-type(7n+1) {transition-delay: 0.2s;}
span:nth-of-type(1){transition-delay: 1s;}
.is-active {
    opacity:1;
}