WordPressにスクロールアニメーションを実装する3つの方法

スクロールアニメーション向けWordPressテーマ①：GENESIS（ジェネシス）

WordPressテーマ「GENESIS（ジェネシス）」は、企業のブランドイメージを格上げする洗練されたデザインと、直感的な操作性を兼ね備えたテーマ。​

特に、スクロールアニメーションを簡単に設定できる機能が特徴で、訪問者の視線を自然に誘導し、印象的なユーザー体験を提供します。​

このテーマは、ベンチャー企業から大企業まで、幅広いビジネスシーンで活用できる柔軟性を持っています。

主な特徴は下記のとおりです。

• スクロール演出を簡単設定し、印象に残る動きが実現できる
• トップページを自由に構成でき、企業の個性を表現しやすい
• サービス内容を整理して紹介でき、信頼感のある印象を与える
• スマホでも美しく表示され、快適な閲覧で離脱を防げる
• 配色や書体を簡単に変更でき、ブランドの統一感が出せる

スクロールアニメーションを活用することで、訪問者に強い印象を与えるサイトを構築したい人は、今すぐ以下のリンクからGENESISの特徴やデモサイトを確認してくださいね。

「GENESIS」の詳細やデモはこちら

スクロールアニメーション向けWordPressテーマ②：ISSUE（イシュー）

WordPressテーマ「ISSUE（イシュー）」は、採用サイト向けに設計されたテーマ。

ただ、その洗練されたデザインと柔軟な機能性により、企業のコーポレートサイトとしても汎用的に活用が可能です。​

特に、アニメーションを簡単に設定できる点が特徴で、訪問者の視線を自然に誘導し、印象的なユーザー体験を提供できますよ。​

特徴は次のとおりです。

• アニメーションを簡単に設定でき視覚的な魅力で訪問者を惹きつける
• トップページのレイアウトを自由にカスタマイズでき、企業の個性を際立たせられる
• インタビューページでスタッフの魅力を伝え、信頼感を高められる
• スプリットページでサービスや商品を効果的に紹介し、訴求力を向上
• スマートフォンでも美しく表示され、どのデバイスでも快適な閲覧体験を提供

アニメーションを活用して、訪問者に強い印象を与えて企業のブランドイメージを高めるサイトを作成したい人は、下記からISSUEの詳細を確認しましょう。

「ISSUE」の詳細やデモはこちら

スクロールアニメーション向けWordPressテーマ③：HORIZON（ホライズン）

WordPressテーマ「HORIZON（ホライゾン）」は、日本初の横スクロールを実現した革新的なデザインで、訪問者に新鮮な体験を提供できます。

アニメーションの設定も簡単で、視覚的なストーリー性を高め、ブランドの世界観を効果的に伝えることが可能です。​

企業のコーポレートサイトやクリエイターのポートフォリオなど、幅広い用途に対応し、他と一線を画すサイトを構築できますよ。

主な特徴は以下のとおりです。

• アニメーションを簡単に設定でき視覚的な魅力で訪問者を惹きつける
• 横スクロールデザインで、他サイトと差別化し印象を強める
• 縦横スクロールの使い分けで、コンテンツに最適な表現が可能
• ギャラリーページで実績や作品を美しく紹介し、信頼感を高められる
• LP作成機能で、キャンペーンや商品紹介ページを迅速に構築​

アニメーションや横スクロールを活用した独自のデザインで、訪問者に強い印象を与えるサイトを簡単に作成したい人は、次のリンクからHORIZONのデモサイトを確認してみてください。

「HORIZON」の詳細やデモはこちら

スクロールアニメーション向けWordPressテーマ④：DROP（ドロップ）

WordPressテーマ「DROP（ドロップ）」は、アニメーションを簡単に設定できるランディングページ（LP）特化型テーマです。​

視覚的な演出で訪問者の興味を引き、効果的なプロモーションを実現できます。​

製品の紹介やサービスの案内に最適なデザインと機能を備えています。

主な特徴は次のとおりです。

• アニメーションを簡単に設定でき視覚的な魅力で訪問者を惹きつける
• 1カラム構成で、情報をシンプルに伝え、理解を促進
• グラフやチャートを活用し、データを視覚的に表現
• カスタム投稿タイプ「お知らせ」で、最新情報を手軽に発信
• スマートフォンでも美しく表示され、快適な閲覧体験を提供

アニメーションやグラフィカルな要素を活用して、訪問者に強い印象を与えるLPを構築したい人は、DROPのデモサイトをチェックしましょう。​

「DROP」の詳細やデモはこちら

スクロールアニメーション向けWordPressテーマ⑤：STORK19（ストーク19）

WordPressテーマ「DROP（ドロップ）」は、アニメーションを簡単に設定できるランディングページ（LP）特化型テーマです。​

WordPressテーマ「STORK19（ストーク19）」は、アニメーションを簡単に設定できる機能を備え、視覚的な魅力を高めることで訪問者の関心を引きつけます。​

ブロックエディターに完全対応しており、直感的な操作で美しいデザインのサイトを構築できます。​

ブログやコーポレートサイト、ランディングページなど、さまざまな用途に適したテーマで、主な特徴は次のとおりです。

• ブロックごとにアニメーション設定が可能で、視覚的な訴求力を高められる
• プリセットパターンを活用して、デザイン性の高いページを簡単に作成できる
• トップページのメインビジュアルに動画を設定でき、ダイナミックな演出が可能
• モバイルファースト設計で、スマートフォンでも美しい表示を実現
• テーマカスタマイザーで、HTMLやCSSの知識がなくても簡単にデザインを調整可能

ブログやコーポレートサイト、ランディングページなど、さまざまな用途に最適ですので、さっそく下記のリンクから詳細を確認してくださいね。

「STORK19」の詳細やデモはこちら

スクロールアニメーションCSS「Animate.css」の使い方とは？

まず使い方をザックリいうと、以下の3ステップです。

1. CDNサイトから読み込みパスをコピー。
2. 上記を<link>タグで読み込む。
3. アニメーションを付与したいHTML要素に指定用のクラス名を記述。

では、具体的に！

以下のCDNサイトにて「Copy」ボタンをクリックし、読み込みパスをコピーします。（※最新版のanimate.min.cssを選択すると良いでしょう）

https://cdnjs.com/libraries/animate.css

そしてコピーした読み込みパスを、下記のように<link>タグであなたのサイトに読み込ませます。

さらに以下のAnimate.css公式サイトにて、約60種類のアニメーションデモと付与用のクラス名を確認し、アニメーションを表現したいHTML要素に確認したクラス名を記述します。

公式サイト：https://daneden.github.io/animate.css/

実際には、こんな感じになります。
（※例では繰り返しアニメーション用のクラス名「infinite」も記載してます）

スクロールアニメーションJavaScript「wow.js」の使い方！

上記Animate.cssのみでは、スクロールに合わせるとか、アニメーションのスピード（何秒かけて動かすか？）や回数などの、細かい指定を行うことができません。

そこで必要となるのがWOW.jsです。

ザックリとした使い方は以下の4ステップです。

1. CDNサイトから読み込みパスをコピー。
2. 上記を<script>タグで読み込む。
3. </body>のすぐ上に呼び出しコードを記述。
4. アニメーションを付与したいHTML要素に指定用のクラス名とdata属性を記述。

先程と同様に以下のCDNサイトにて「Copy」ボタンをクリックし、読み込みパスをコピーします。

https://cdnjs.com/libraries/wow

そしてコピーした読み込みパスを、下記のように<script>タグであなたのサイトに読み込ませます。

次に</body>のすぐ上に、以下のように呼び出しコードを記述しましょう。

これでスクロールに合わせたアニメショーンの準備が完了しました。

で、アニメーションさせたい要素に、Animate.css用のクラス名と共にWOW.js用のクラス名、任意でdata属性を記述します。

ただし、上述のクラス名「animated」は記述しないことに注意してください。
スクロールに合わせてWOW.jsが書き出してくれるためです。

で、以下が実際の例です。