動きのあるホームページ

画面が変化したら表示される、スライドするコンテンツ、などに必須のJavaScriptとJquery。
WordPressでは、多くのプラグインが用意されていて、プラグインを導入することで可能なものもたくさんありますが。
プラグインは、さまざまなオプションで表現を変える、など多くのユーザーに対応するようにできています。
どうしても不要な機能、コードなどいらないと思ってしまうことがたくさんあります。
ということで、そのサイトに必要なスクリプトを作成できるものは作りたいと考えています。

ブラウザが表示された時、マウスのクリック、マウスオーバー、アウト、ブラウザをスクロールしたときなど、イベントが起こったときはじめて、Jqueryはスクリプトにかかれた処理を実行します。

スライドするイメージの基本をJqueryを使って作成しました。CSSでobject-fit: coverでイメージを指定していますので、スマホ、タブレットなどにも対応。IEのバージョンによって、object-fitが機能しない場合があります。その場合も考慮して別のスタイリングなども必要。

この基本のスライドショーは、いろんなデザインに展開可能。
サムネールを並べる、また並べ方の変更等。スマホのフリック、にも対応。スマホの場合は、フリック対応のコンテンツは必須のようですので、フリックさせるためには、スライドするコンテンツが必要ということです。