ディビのスクロール効果で作られた無料のセルフスクロールチームメンバーカルーセルをダウンロードする
公開: 2020-05-03アバウトページを設定するときは、チームメンバーもそこに掲載することをお勧めします。 そうすることで、訪問者が会社の背後にいる人々とつながることができます。 スクロールでチームメンバーセクションをアニメーション化する方法を探している場合は、このチュートリアルを気に入るはずです。 訪問者がページを下にスクロールすると移動する、美しい自動スクロールチームメンバーのカルーセルを再現します。 JSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
チームメンバーのカルーセルレイアウトを無料でダウンロード
無料のチームメンバーカルーセルレイアウトを利用するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
再作成を始めましょう！
新しいセクションを追加
間隔
作業中のページに新しい通常のセクションを追加することから始めます。 セクション設定を開き、さまざまな画面サイズにカスタムパディングを追加します。
- トップパディング：200px（デスクトップ）、100px（タブレットと電話）
- 下部のパディング：200px（デスクトップ）、100px（タブレットと電話）
オーバーフロー
デザインに水平スクロールバーが表示されないようにするために、[詳細設定]タブでセクションのオーバーフローを非表示にします。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
行＃1を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、[デザイン]タブに移動して、サイズ設定で幅と最大幅を変更します。
- 幅：90％
- 最大幅：1580px
間隔
カスタムの上下のパディングも追加しています。
- トップパディング：100px
- ボトムパディング：100px
列にテキストモジュールを追加
H2コンテンツを追加する
最初のテキストモジュールから始めて、モジュールを追加します。 お好みのH2コンテンツを入力してください。
H2テキスト設定
モジュールの[デザイン]タブに移動し、H2テキスト設定を次のように変更します。
- 見出し2フォント：流砂
- 見出し2フォントの太さ：半太字
- 見出し2のテキストの色：＃000000
- 見出し2テキストサイズ：70px（デスクトップ）、50px（タブレット）、40px（電話）
Dividerモジュールを列に追加
可視性
次に、ディバイダーモジュールを追加します。 [仕切りを表示]オプションが有効になっていることを確認してください。
- 仕切りを表示：はい
ライン
次に、回線設定にいくつかの変更を加えます。
- 線の色：＃edf000
- 線のスタイル：実線
- ライン位置：上
サイジング
それに応じてサイズ設定を変更して、モジュール設定を完了します。
- 仕切りの重量：20px
- 幅：11％
- モジュールの配置：左
- 高さ：20px
行＃2を追加
カラム構造
次の行へ！ 次の列構造を使用します。
サイジング
モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。
- カスタムガター幅を使用：はい
- 側溝幅：2
- 幅：100％
- 最大幅：100％
間隔
次に、小さい画面サイズにのみ左右のパディングを追加します。
- 左パディング：5％（タブレットと電話のみ）
- 右パディング：5％（タブレットと電話のみ）
列設定（5x）
ここで、このチュートリアルの次の3つのステップで、列にいくつかの変更を加えます。 行の各列に3つのステップすべてを適用します。
グラデーションの背景
まず、各列にグラデーションの背景を追加します。
- 色1：rgba（255,255,255,0）
- 色2：rgba（0,0,0,0.84）
- グラデーションタイプ：線形
- 開始位置：25％
- 終了位置：86％
- 背景画像の上にグラデーションを配置：はい
背景画像
次に、選択した背景画像をアップロードします。 この背景画像は各チームメンバーを表しているため、列ごとに異なる画像を使用してください。
- 背景画像サイズ：カバー
- 背景画像の位置：中央
主な要素
各列のタブレットのメイン要素にカスタムCSSを追加して、列の設定を完了します。 これらのCSSコードの行は、2つの列を並べるのではなく、タブレット上で列を互いに下に配置するのに役立ちます。
width: 100% !important; margin: 50px 0px 50px 0px !important;
個人モジュールを列に追加
コンテンツを追加する
チームメンバーの情報を共有するために、個人モジュールを使用します。 最初のPersonモジュールを列1に追加し、選択したコンテンツを使用します。
画像を削除
次に、画像を削除します。 代わりに、列の背景画像を使用しています。
背景画像
次に、モジュールの背景画像として画像オーバーレイを追加します。 このチュートリアルの最初にあるフォルダーをダウンロードすると、使用しているフォルダーを見つけることができます。
- 背景画像サイズ：カバー
- 背景画像の位置：中央
タイトルテキスト設定
モジュールの[デザイン]タブに移動し、タイトルテキストの設定を次のように変更します。
- タイトル見出しレベル：H3
- タイトルフォント：流砂
- タイトルフォントの太さ：太字
- タイトルテキストの色：#ffffff
- タイトルテキストサイズ：230％
本文の設定
本文の設定も変更してください。
- ボディフォント：Open Sans
- 本文の色：#ffffff
- ボディラインの高さ：2.2em
位置テキスト設定
次に、位置のテキスト設定にいくつかの変更を加えます。
- 位置フォント：Open Sans
- 位置テキストの色：＃edf000
間隔
そして、間隔設定にいくつかのカスタムパディング値を追加して、モジュール設定を完了します。
- トップパディング：70％
- ボトムパディング：10％
- 左パディング：10％
- 右パディング：10％
クローンパーソンモジュール4x
Personモジュールを完了すると、モジュール全体を4回複製できます。
残りの列に複製を配置します
行の残りの4つの列に重複するモジュールを配置します。 必ず内容も変更してください。
行を自動スクロールカルーセルに変える
行＃2のサイズを変更する
ここで、この行を自動スクロールのチームメンバーのカルーセルに変えるには、行の設定を再度開き、サイズ設定の幅と最大幅を変更する必要があります。
- 幅：180％
- 最大幅：220％（デスクトップ）、100％（タブレットと電話）
行＃2の水平方向の動きを追加
[詳細設定]タブのスクロール効果設定に水平方向の動きを追加して行の設定を完了すると、完了です。
- 水平方向の動きを有効にする：はい
- 開始オフセット：
- デスクトップ：2.5
- タブレットと電話：0
- ミッドオフセット：0（40％）
- 終了オフセット：
- デスクトップ：-25（62％）
- タブレットと電話：0
- モーションエフェクトトリガー：要素の中央
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviに組み込まれているスクロール効果を使ってクリエイティブになる方法を紹介しました。 具体的には、美しい自動スクロールチームメンバーのカルーセルを再現しました。 訪問者がページを下にスクロールすると、カルーセルの別の部分が表示されます。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。