Gutenbergエディターで追加されたカバー画像にパララックスを追加する方法 in WP 5.0[デモあり]

ここではwordpress 5.0から導入されるグーテンベルク(Gutenberg)エディターで追加されたカバー画像にパララックスエフェクトを付与する方法を紹介します。この新しいエディターでは直感的に複雑なデザインを追加することが出来ます。現在のWordpressの最新バージョン4.9(2018年8月時点)ではプラグインを使用することで利用することが出来ます。

完成されたカバー画像

Codepen上で完成時点のパララックス画像がどのように動くか見てみましょう。

コードの説明

HTML

Gutenbergエディターによって追加されるカバー画像のコードは次の通りです。

このHTMLにパララックスエフェクトを追加します。

CSS

次のCSSを追加してください。

Javascript

次のJSを追加してください。

以上で完了です!

Summary

とても簡単にパララックス効果を追加することが出来ました。
もしこの記事が気に入っていただけましたら、シェアよろしくおねがいします!

最新記事