ちょっと嬉しいディレイを自動でつけてくれるクラス

こんな感じにいい感じにディレイタイムを自動で付与してくれるクラスを作りました。これで面倒なディレイタイムの設定とはサヨナラです。

使い方 下ごしらえ編

ディレイさせたい親要素に data-delay-step属性
ディレイさせたい要素には delay-elemクラスを与えてあげます。

ステップモード

<div data-delay-step="50">
  <div class="delay-elem"></div>
  <div class="delay-elem"></div>
  <div class="delay-elem"></div>
  <div class="delay-elem"></div>
  <div class="delay-elem"></div>
</div>

親要素に data-delay-step属性を追加します。
その属性値が各ディレイタイムになっています。

ランダムモード

<div data-delay-step="50" data-delay-mode="random">
  <div class="delay-elem"></div>
  <div class="delay-elem"></div>
  <div class="delay-elem"></div>
  <div class="delay-elem"></div>
  <div class="delay-elem"></div>
</div>

親要素に data-delay-step属性を追加します。
その属性値が各ディレイタイムになっています。
さらに data-delay-mode属性を追加して "random" を設定してあげると子要素はdata-delay-step属性の値を元にランダムな重複のないディレイタイムが付与されます。

チャンクモード

<!-- いつか追加します。 -->

子要素をチャンクに分けてディレイタイムを与えられたらいいな。
いつか実装します。

1. 実行

new UIDelayStepper().run();

 特に設定は渡すものがないのでこのまま動きます。
今度セレクタくらいは設定できる様にアップデートしたいです。しておきます。

ソースコード

export default class UIDelayStepper {
    constructor() {
        this.parent = [].slice.call( document.querySelectorAll( '[data-delay-step]' ) );
    }

    run() {
        this.parent.forEach( ( target, index ) => {
            this._addDelay( target );
        } );
    }

    /**
     *
     * @param parent
     * @private
     */
    _addDelay( parent ) {
        let $targets = [].slice.call( parent.querySelectorAll( '.delay-elem' ) ),
            len = $targets.length,
            step = parent.getAttribute( 'data-delay-step' ),
            mode = parent.getAttribute( 'data-delay-mode' ) || 'step',
            delay = parent.getAttribute( 'data-delay-delay' ) || 0,
            randomStep = [],
            children = [];

        if ( len === 0 ) return;

        $targets.forEach( function( $target, index ) {
            if ( null !== $target.getAttribute( 'data-delay-step' ) ) {
                [].slice.call( $target.querySelectorAll( '.delay-elem' ) ).forEach( elem => {
                    children.push( elem );
                } );
            } else if ( $target.querySelectorAll( '[data-delay-step]' ) ) {
                [].slice.call( $target.querySelectorAll( '[data-delay-step]' ) ).forEach( parent => {
                    [].slice.call( parent.querySelectorAll( '.delay-elem' ) ).forEach( elem => {
                        children.push( elem );
                    } );
                } );
            }
        } );

        $targets.forEach( function( $target, index ) {
            children.some( ( aa, ii ) => {
                if ( $target !== aa ) return;
                $targets[ index ] = '';
                children.splice( ii, 1 );
            } );
        } );

        $targets = $targets.filter( $target => $target !== '' );

        if ( mode === 'random' ) {
            randomStep = this._noneOverWrapRandom( $targets.length );
        }

        $targets.forEach( ( $target, index ) => {
            if ( '' === $target ) return;

            let time;

            if ( mode === 'step' || mode === '' ) {
                time = index * step;
            }
            if ( mode === 'random' ) {
                time = randomStep[ index ] * step;
            }

            $target.style.transitionDelay = time + delay + 'ms';
        } );
    }

    _noneOverWrapRandom( count ) {
        let random = [],
            randomCount = random.length;

        for ( let j = 0; j < count; j++ ) {
            let candidate = Math.floor( Math.random() * count );
            for ( let k = 0; k < randomCount; k++ ) {
                if ( candidate === random[ k ] ) {
                    candidate = Math.floor( Math.random() * count );
                    k = -1;
                }
            }
            random[ j ] = candidate;
            randomCount++;
        }

        return random;
    }

    destroy() {
        // this.target.css( {
        //     'transition-delay' : ''
        // } );
    }
}

おわりに

結構地味な機能ですが結構便利なんです、これが。
見辛いですが、こういった感じに文字に使うといい感じに演出をしてくれます。
文字をいい感じにスプリットするものもあるのですが、それはまた今度。

ありがとうございました。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

いい記事が書ける様に頑張ります
13

Calamari

わたし的なweb制作について

受託web制作にまつわる記事をまとめています。
1つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。