jQuery2段階でアニメーションさせるスクロールエフェクト最近、よく見かけるスクロールすると文字とかの背景が横からブワッと出てきて、そのままブワッと消えて文字が現れるみたいなエフェクト。https://tympanus.net/Development/BlockRevealers/シンプルなレイアウトでも動きをつけることで単調にならないってメリットもあり、こういうエフェクトは重宝します。実装する場合、いくつか方法はあるのですが今回は二つほど紹介します。Effects」はcodropsで公開されています。source」から一式ダウンロード可能です。https://tympanus.net/codrops/2016/12/21/block-reveal-effects/必要なファイルを読み込むダウンロードしたファイルの中から以下の3つを読み込みます。上記ページと同じようなレイアウトであればいいんですが、そうではない場合は使いやすいように加工する必要があります。ポイントはhtmlでは以下のようにエフェクトをかけたい要素内にspanタグを設置してIDを付与。right</span></h2>cssでは最低限以下の記述をしてあとはお好みで。0;}jsでは付与したIDごとに設定が必要ですが、最低限このあたりは必要かと。}})();出来上がったサンプル使いやすいように整理しつつ、エフェクト調整を行ったのがこちら。//背景色など複数の項目が調整出来るので、細かくカスタムが可能です。ID毎に動作設定をするって結構面倒ですね。そんな方には次の方法がオススメです。.done()今回やりたいことは簡単に言うと、1背景が現れる、2背景が消える、という2段階の動き。jQueryには.when()、.done()という順番に実行が出来るちょうど良さそうな機能があります。CodePen.こんな感じで四角をクリックすると右に、その後下に四角が移動します。今回実装したいものと関係がなさそうですが、いくつかの処理を追加することでより実戦で使えるようになります。出来上がったサンプルスクロール位置を取得、queue()を使った遅延処理、そしてcssを組み合わせることでこのようなエフェクトが出来上がります。CodePen.ざっくり解説するとこんな感じです。});});いくつかのコードを組み合わせて工夫することでプラグインを使わずとも実装が可能です。プラグインもいいですが、自作してみるといい勉強になりますし、何より楽しいですね。jQuery【HTML5】audioタグとjsを使って音楽を再生するCONTACTご意見やご感想、お仕事のご依頼などお気軽にご連絡ください。