Chapter.3】2019.05.15ウェブ制作こんにちは。エンジニアの山岡です。Chapter.2】というちょっと懐かしい方法をご紹介しました。それに対して今回は、脱jQueryということで、jQueryを使わずJavaScriptとCSSで実装する方法を見ていきましょう。次回DEMO見た目はjQueryを使っても使わなくても全く同じです(笑)ローディング画面→読み込み完了(jQueryを使っても使わなくても見た目は同じ)サンプルはこちらHTMLHTMLはjQueryを使う場合(前回の記事)と同じです。</div>CSS背景とローダーが消えるタイミングをずらすために、.fadeout-bgと.fadeout-loaderのtransition-durationプロパティの値を調整・設定しています。loader.classList.add('fadeout-loader');}解説jQueryとJavaScriptそれぞれで変わったポイントを解説してきます。classの付け外しjQueryでアニメーションさせなくても、CSSを変化させることで同じように様々な表現が可能になります。今回はclassの付け外しを使って、フェードアウトと表示/非表示を実装しています。操作する対象はclass(Element.classList)だけでなくstyle(HTMLElement.style)でも可能です。*/bg.classList.remove('is-hide');イベントの登録イベントの登録には、addEventListener()を使います。(Event​Target​.add​Event​Listener())今回のコードに当てはめると、「loadしたらstopload(classを追加してローディング画面をフェードアウト)する」というイベントが登録されたことになります。stopload);処理の遅延とフェードアウトjQueryでは、フェードアウトや処理を遅らせる便利な機能がありましたが、JavaScriptでそれは面倒なので、CSSでtransitionを設定しておいたclassの付け外しで対応します。アニメーションを調整したり変更したい時などに後から変更がしやすくなって保守性が上がります。これもjQueryが流行った頃から使われてきた手法ですね。*/bg.classList.add('fadeout-bg');次回いかがでしたか。jQueryに慣れてしまっていると、JavaScriptのパワフルさにまるで浦島太郎な人もいるのでは。2000年頃、JSがおもちゃのような扱いを受けていた頃がちょっぴり懐かしいですし、その頃を思い出すとJSの地位が上がってくれて嬉しいです。応用編ということで、色々な種類のローダーやジェネレーターをご紹介していきます。CATEGORY庶民の私にもできる高級感のあるサイトの作り方。プランCREATIOOON・・・エコクリが運営するWEBメディアCONTACT・・・お問い合わせCONCEPTSERVICECONSULTINGABOUTMEMBERSWORKSREVIEWPLANSCREATIOOONCONTACT。