Diviでスラッシュテキストスクロール効果を作成する方法

スラッシュテキスト効果を作成することは、コンテンツに命を吹き込む楽しい方法です。 アイデアは、ユーザーがページを下にスクロールすると、テキストが半分に切り詰められ、バラバラになっているような錯覚を与えることです。 このチュートリアルでは、このデザインをDiviで構築するのがいかに簡単かを紹介します。

始めましょう。

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

パート1：セクションの設計

この最初の部分では、セクションレイアウトのセクション背景を設計します。

背景色

まず、次のようにデフォルトのセクションに背景色を追加します。

• グラデーションの背景左の色：＃29c4a9
• グラデーションの背景右の色：＃2b87da

仕切り

[デザイン]タブで、次のように上部仕切りを追加します。

• トップディバイダースタイル：スクリーンショットを参照
• 仕切りの色：白
• 仕切りフリップ：垂直

間隔

デザインのスクロール効果をテストするために、セクションの上部と下部に一時的なマージンを追加しましょう。 セクションを別のページに追加するときは、いつでも取り出すことができます。 また、上部と下部に同じ量のパディングを追加する必要があります。

• マージン：上80vh、下80vh
• パディング：上200px、下200px

余分な底のスペースのためのボックスシャドウ

セクションの実際のスペースを損なうことなく、セクションの下部に追加のデザインカラー/スペースを取得するために、次のようにボックスシャドウを追加できます。

• ボックスシャドウ：スクリーンショットを参照
• ボックスシャドウの水平位置：0px
• ボックスシャドウの垂直位置：100px
• 影の色：＃2b87da

隠された可視性

次に、オーバーフローを非表示に設定して、セクションの外に移動したときにスクロール効果が表示されないようにします。

• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

パート2：スラッシュテキスト効果の作成

この次のパートでは、スラッシュテキスト効果を作成します。 2つの行を積み重ね、それぞれに同じテキストコンテンツを保持するテキストモジュールを配置します。 次に、負のマージンを使用して、上部のテキストを押し下げ、テキストの下半分を非表示にします。 次に、負のマージンを使用して下のテキストを上に押し上げ、テキストの上半分を非表示にします。 完了したら、スクロール効果を使用して一番上の行/列を移動し、スラッシュされているテキストの錯覚を作成できます。

テキストの上半分の行を追加

まず、1列の行を追加しましょう。

次に、次のように行設定を更新します。

• 側溝幅：1
• パディング：0px上、0px下

列の可視性が非表示

次に、列の設定を開き、オーバーフローを非表示に更新します。

• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

テキストモジュールを追加

列に新しいテキストモジュールを追加します。

テキストコンテンツ

コンテンツ本文領域に「スラッシュ」という単語を追加します。

テキストデザイン

[デザイン]タブにジャンプして、次のようにテキストスタイルを更新します。

• テキストフォント：B612モノ
• テキストフォントの太さ：太字
• テキストフォントスタイル：TT
• テキストテキストの色：#ffffff
• テキストテキストサイズ：150px（デスクトップ）、100px（タブレット）、60px（電話）
• テキスト文字の間隔：0.1em
• テキストの配置：中央

テキストマージン

ここでは、テキストのちょうど半分のサイズである下余白を確認して追加する必要があります。

• マージン：-75px下部（デスクトップ）、-50px（タブレット）、-30px（電話）

テキストの下半分の行を追加

行が重複しています

テキストを含む最初の行の1つを配置し、行全体を複製して一番下の行を作成します。

テキストモジュールのマージンを更新する

次に、複製行のテキストモジュールの余白を下余白ではなく負の上余白で更新して、テキストの上半分を非表示にします。

• マージン：-75pxトップ（デスクトップ）、-50pxトップ（タブレット）、-30pxトップ（電話）

スクロール効果を一番上の行の列に追加する

次に、一番上の行の列にスクロール効果を追加する準備ができました。 テキストの下部を非表示にする列のオーバーフロー非表示値のためにテキストが非表示になるため、テキストモジュールにスクロール効果を追加することはできません。

一番上の行の列設定を開き、以下を更新します。

垂直モーションタブの下…

• 垂直モーションを有効にする：はい
• 開始オフセット：0（0％）
• ミッドオフセット：0（50％）
• 終了オフセット：-。02（75％）

[水平モーション]タブの下…

• 水平モーションを有効にする：はい
• 開始オフセット：0（0％）
• ミッドオフセット：0（50％）
• 終了オフセット：0.2（75％）

[回転]タブの下…

• 回転を有効にする：はい
• 先発ローテーション：0（0％）
• 中間回転：0（50％）
• 終了回転：1度（75％）

これで、スラッシュテキスト効果が完成しました。

パート3：移動分周器の作成

スラッシュテキスト効果が完了したら、テキストをスラッシュする小さなフライングディバイダーという楽しい要素を追加できます。 これを作成するために、テキストモジュールが分割する正確な場所でセクションのページ中央を横切って移動する分割モジュールを使用します。

これがその方法です。

行を追加する

2番目の行の下に1列の行を追加します。

仕切りモジュールを追加

列に、新しい分周器モジュールを追加します。

仕切りの背景

次に、[NOT]を選択して仕切りを表示します。 代わりに、次のように仕切りに背景色を付けます。

• 背景グラデーション左色：透明
• 背景のグラデーションの正しい色：＃29c4a9

変換スケール

次に、高さを更新し、変換変換オプションを使用して高さを左に移動します。

• 高さ：4px
• 変換変換X軸：-100％

スクロール効果

次に、スクロール効果を追加して、仕切りを右に移動します。

水平モーションタブの下…

• 水平モーションを有効にする：はい
• 開始オフセット：-18（25％）
• ミッドオフセット：0（50％）
• 終了オフセット：13（75％）

行設定

仕切りがテキストの中央を「スラッシュ」するようにするには、次のように行設定を更新する必要があります。

• 幅：100％
• 最大幅：100％
• パディング：0px上、0px下
• 位置：絶対
• 場所：左中央
• Zインデックス：9

これで、仕切りはテキストの中央をスラッシュして左から右に移動します。

パート4：本文テキストの追加

この最後の部分では、レイアウトを完成させるためにテキストのブロックを追加します。

行を追加する

仕切りのある行の下に新しい1列の行を追加します。

テキストモジュールを追加

次に、新しいテキストモジュールを行に追加します。

テキストコンテンツ

次に、次のHTMLを本文領域に貼り付けます。

<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<a href=""> | Learn More ></a>

テキストデザイン

[デザイン]タブで、以下を更新します。

• テキストテキストの色：#ffffff
• リンクテキストの色：＃121212
• リンクテキストサイズ：20px

行設定

親行の設定を開き、以下を更新します。

• 側溝幅：1
• 最大幅：400px
• 位置：絶対
• 場所：中央下
• 垂直オフセット：20px（デスクトップとタブレット）、-25px（電話）

最終結果

これが最終結果です。

最終的な考え

このデザインでは、すべてのデバイスでテキストを1行に保つことが重要です。これにより、スラッシュされるテキストの量が制限されます。 ただし、このスラッシュスクロール効果の手法は、テキスト以外にも適用できます。 画像も簡単に切り抜くことができます！

コメントでお返事をお待ちしております。

乾杯！