Diviのスクロール効果を使用してスクロール可能なポートフォリオナビゲーションリストを作成する

ポートフォリオページは、Webデザインを創造的にするための完璧な言い訳です。 このチュートリアルでは、目を引くスクロール可能なポートフォリオナビゲーションリストをまとめて、ポートフォリオページにスパイスを加える方法を紹介します。 Diviのスクロール効果を使用して、メニュー項目が画面の中央に到達すると、メニュー項目が生き生きと動き出します。 アンカーリンク付きのボタンは、ユーザーが対応するセクションに移動するのに役立ちます。

読み続けてデザインを再作成するか、JSONファイルを無料でダウンロードしてください。

プレビュー

チュートリアルを開始する前に、さまざまな画面サイズのデザインを見てみましょう。

デスクトップ

モバイル

ワイヤーフレーム

このレスポンシブなスクロール可能なポートフォリオナビゲーションリストは、一連の繰り返し行と交互の行で作成されます。 そのため、ワイヤーフレームビューのスクリーンショットを含めました。 これは、行とそれぞれのモジュールの順序に従うのに役立ちます。 追跡するために、それに応じてすべての行にラベルを付けることをお勧めします。 これらの手順は、チュートリアルの手順にも追加されています。

ヒーローセクションを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

1.新しいセクションを作成します

セクションを追加

バックグラウンド

新規または既存のページ内の通常のセクションから始めます。 行またはモジュールを追加する前に、セクションに背景色を追加します。

• 背景色：＃222831

間隔

スクロール効果が魔法を実行するのに十分な間隔をセクションに追加します。

• 上下のパディング：660px

2.スクロール可能なポートフォリオナビゲーションリストを作成する

行1を追加

カラム構造

最初の行を追加し、次の列構造を選択します。

サイジング

次に行の幅を調整します。

• 幅：90％
• 最大幅：2560px

間隔

次に、間隔の設定を調整します。

• 左パディング
  • デスクトップ：130px
  • タブレットと電話：50px

管理者ラベル

そして、行にラベルを付けます。

• 管理者ラベル：行1

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

コンテンツ

タイトルのテキストモジュールを追加します。 選択したH1コンテンツをいくつか挿入します。

見出しテキスト

[デザイン]タブに移動し、タイトルテキストのスタイルを次のように設定します。

• 見出しレベル：H1
• フォント：Alata
• 重量：太字
• 色：＃a3f7bf
• サイズ
  • デスクトップ：190px
  • タブレット：120px
  • 電話番号：50px
• 文字間隔
  • デスクトップとタブレット：7px
  • 電話番号：8px

スクロール効果

最後になりましたが、[詳細設定]タブにフェードインおよびフェードアウトのスクロール効果を追加します。

• エフェクトを有効にする：フェードインおよびフェードアウト
• ビューポート下部
  • 位置：100％
  • 開始時の不透明度：100％
• 中程度の不透明度
  • ポジション：50％
  • 中：100％
• ビューポートトップ
  • ポジション：80％
  • 終了不透明度：20％

行2を追加

カラム構造

次に、ナビゲーション項目を追加します。 2つの同じサイズの列を持つ新しい行を追加します。

管理者ラベル

行にラベルを付けます。

• 管理者ラベル：行2

サイジング

サイズ設定も調整します。

• 側溝幅：1
• 幅：80％
• 最大幅：1920px

列1の設定

カスタムCSS

モジュールを追加する前に、列のメイン要素に1行のCSSコードを追加して、小さい画面サイズでも比率が同じになるようにします。 列1から始めます。

• 主な要素：幅：20％！重要

width: 20% !important }

列2の設定

カスタムCSS

2番目の列についても同じようにします。

• 主な要素：幅：80％！重要

width: 80% !important }

ボタンモジュールを列1に追加

コンテンツ

次に、選択したコピーを使用して、ボタンモジュールを列1に追加します。

• ボタンテキスト：表示

リンク

次に、モジュールにアンカーリンクを追加します。 チュートリアルの後半で、このアンカーリンクに一致するCSSIDを追加します。

• ボタンリンクURL：#VB

配置

デザインタブに移動し、ボタンの配置を変更します。

• ボタンの配置：中央

ボタン

次に、それに応じてボタンのスタイルを設定します。

• ボタンのカスタムスタイル：はい
• 文字サイズ
  • デスクトップ：30px
  • タブレット：25px
  • 電話番号：20px
• 色：白#ffffff
• 背景：ダークグレー＃222831
• ボーダー幅：0px
• 境界半径：0px
• 文字間隔：1px
• フォント：Alata
• ボタンアイコンを表示：いいえ

間隔

間隔の設定も変更します。

• トップパディング
  • デスクトップ：25px
  • タブレット：15px
  • 電話番号：5px

スクロール効果

そして、フェードインとフェードアウトのスクロール効果を追加します。

• エフェクトを有効にする：フェードインおよびフェードアウト
• ビューポート下部
  • ポジション：40％
  • 開始時の不透明度：0％
• 中程度の不透明度
  • 下：45％
  • 中：100％
  • トップ：55％
• ビューポートトップ
  • ポジション：60％
  • 終了不透明度：0％

ボックスシャドウ

次のモジュールに進む前に、ボタンのホバー設定にボックスシャドウを追加してください。

• ボックスシャドウ：4番目のオプション
• 水平位置：0px
• 垂直位置
  • ホバー：5px
• ぼかし強度：0px
• 広がりの強さ：0px
• シャドウカラー：アクアグリーン＃a3f7bf

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

コンテンツ

選択したH3コンテンツを含むテキストモジュールを列2に追加して続行します。

見出しテキスト

[デザイン]タブに移動し、タイトルテキストのスタイルを次のように設定します。

• 見出しレベル：H3
• フォント：Alata
• 色
  • デスクトップ：白#ffffff
  • ホバー：アクアグリーン＃a3f7bf
• 文字サイズ
  • デスクトップ：80px
  • タブレット：65px
  • 電話番号：38px

スクロール効果

また、[詳細設定]タブにフェードインおよびフェードアウトのスクロール効果を追加して、モジュール設定を完了します。

• エフェクトを有効にする：フェードインおよびフェードアウト
• ビューポート下部
  • ポジション：40％
  • 開始時の不透明度：15％
• 中程度の不透明度
  • 下：45％
  • 中：100％
  • トップ：55％
• ビューポートトップ
  • ポジション：60％
  • 終了時の不透明度：15％

行2が重複しています

ナビゲーションリストを完成させるには、この行を3回複製します。 新しい行の番号が付け直されます。 2、3、および4。

行3を調整します

行管理ラベル

行の管理ラベルを2から3に変更します。

• 管理者ラベル：行3

ボタンモジュール

アンカーリンクを#VBから#WEBに変更します。

• ボタンリンクURL：#WEB

テキストモジュール

テキストモジュールのH3コンテンツも変更します。

• 本文：ウェブサイト

行4を調整します

行管理ラベル

行の管理ラベルを2から4に変更します。

• 管理者ラベル：行4

ボタンモジュール

アンカーリンクを#VBから#MAに変更します。

• ボタンリンクURL：#MA

テキストモジュール

H3コンテンツも変更します。

• 本文：モバイルアプリ

行5を調整します

行管理ラベル

行の管理ラベルを2から5に変更します。

• 管理者ラベル：行5

行間隔

下マージンを追加します。

• 下マージン
  • デスクトップ230px
  • タブレット：100px
  • 電話番号：60px

ボタンモジュール

アンカーリンクを#VBから#UXに変更します。

• ボタンリンクURL：#UX

テキストモジュール

また、ここでもH3コンテンツを変更します。

• 本文：UXデザイン

3.ポートフォリオアイテムを作成します

行6を追加

カラム構造

スクロール可能なポートフォリオナビゲーションリストは、ポートフォリオアイテムにリンクしています。 各アイテムは2行で構成されています。 1つの行には非表示の仕切りがあり、別の行にはアクションモジュールの呼び出しがあります。 CSS IDは、仕切りを使用して行に追加されます。 このように、アンカーナビゲーションはポートフォリオアイテムの上部で停止するのではなく、中央で停止します。

さあ、アイテムを作りましょう。 1列の行を追加します。

管理者ラベル

新しい行にラベルを付けることを忘れないでください。

• 管理者ラベル：行6

CSSIDとクラス

一致するCSSIDを[詳細設定]タブに挿入します。

• CSS ID：VB

行6にディバイダーモジュールを追加します

可視性

行の列に非表示の仕切りを追加します。

• 仕切りを表示：いいえ

行6を複製

この行を3回複製します。 新しい行の番号が付け直されます。 8、10、および12。

行8を調整します

管理者ラベル

管理ラベルを6から8に変更します。

• 管理者ラベル：行8

CSSIDとクラス

CSSIDをVBからWEBに変更します。

• CSS ID：WEB

行10を調整します

管理者ラベル

管理ラベルを6から10に変更します。

• 管理者ラベル：行10

CSSIDとクラス

CSSIDをVBからMAに変更します。

• CSS ID：MA

行12を調整します

管理者ラベル

管理ラベルを6から12に変更します。

• 管理者ラベル：行12

CSSIDとクラス

管理者ラベル

CSSIDをVBからUXに変更します。

• CSS ID：UX

行7を追加

カラム構造

今のところ、4列に仕切りを付けたままにしておきます。 1列の新しい行を追加します。

バックグラウンド

モジュールをまだ追加せずに、行設定を開き、次のように背景のスタイルを設定します。

• 背景画像：写真
  • 画像ブレンド：乗算
• 背景グラデーション
  • カラー1：ダークグレー＃222831
  • 色2：透明
  • タイプ：線形
  • 方向：90度
  • 開始位置：50％
  • 終了位置：100％
  • 背景画像の上にグラデーションを配置：はい

管理者ラベル

行にラベルを付けます。

• 管理者ラベル：行7

サイジング

次に、行のサイズ設定を調整します。

• 幅：80％
• 最大幅：2560px
• 配置：中央

国境

いくつかの丸い角も追加します。

• 丸みを帯びた角：25px

スクロール効果

また、フェードインおよびフェードアウトのスクロール効果を有効にします。

• エフェクトを有効にする：フェードインとフェードアウト
  • 開始時の不透明度：0％
  • 中程度の不透明度：100％
    • ポジション：80％
  • 終了不透明度：20％

行7に召喚状モジュールを追加する

コンテンツ

次に、アクションモジュールの呼び出しを行に追加します。

• タイトル：ビジュアルブランディング
• ボタン：詳細を見る
• 本文：説明文

バックグラウンド

デフォルトの背景色を削除します。

• 背景：なし

リンク

対応するページへのリンクを追加します。 とりあえず＃を挿入します。

• リンク： ＃

タイトルテキスト

次に、タイトルテキストのスタイルを設定します。

• 見出しレベル：H2
• フォント：Alata
• 色：白#ffffff
• サイズ
  • デスクトップ：70px
  • タブレット：60px
  • 電話番号：48px
• 文字間隔：1px

本文

本文のテキストもスタイル設定します。

• フォント：ラト
• 色：白#ffffff
• サイズ
  • デスクトップ：19px
  • タブレット：20px
  • 電話番号：18px
• 線の高さ：1.8em

ボタン

ボタン設定に移動し、次の変更を適用します。

• カスタムスタイル：はい
• テキストサイズ：20px
• テキストの色：ダークグレー＃222831
• 背景：アクアグリーン＃a3f7bf
• 境界半径：9px
• 文字間隔：1px
• ボタンフォント：Alata
• トップマージン：35px

サイジング

モジュールのサイズも調整します。

• 幅：50％
• 最大幅
  • デスクトップ：50％
  • タブレットと電話：100％
• 配置：左

間隔

モジュールにもパディングを追加します。

• 左パディング：
  • デスクトップ：90px
• 左右のパディング：
  • タブレット：50px
  • 電話番号：40px

カスタムCSS

最後になりましたが、[詳細設定]タブのプロモーションタイトルにCSSコードを1行追加します。

• プロモーションタイトル：padding-bottom：30px;

padding-bottom: 30px; }

行7を複製

行7を3回複製します。 新しい行の番号が付け直されます。 9、11、および13。

行9を調整します

バックグラウンド

背景画像を変更し、グラデーションの方向を切り替えます。

• 背景画像：新しい写真
• 背景グラデーション
  • 色1：透明
  • カラー2：ダークグレー＃222831
  • 開始位置：0％
  • 終了位置：50％

管理者ラベル

行の管理ラベルを7から9に更新します。

• 管理者ラベル：行9

行9の召喚状モジュールを調整する

コンテンツ

モジュールの内容を更新します。

• タイトル：ウェブサイト
• 本文：新しい説明テキスト

リンク

リンクも更新してください。

• リンク：新しいリンク

サイジング

モジュールの配置を左から右に変更します。

• モジュールの配置：右

間隔

デスクトップのパディングを左から右に変更します。 タブレットとモバイルの設定は同じままである必要があります。

• 右パディング
  • デスクトップ：90px

行11を調整します

バックグラウンド

新しい行の背景画像を変更します。

• 背景画像：別の写真

管理者ラベル

行の管理ラベルを7から11に更新します。

• 管理者ラベル：行11。

行11の召喚状モジュールを調整する

コンテンツ

召喚状モジュール内の内容を変更します。

リンク

リンクも変更します。

• リンク：新しいリンク

行13を調整します

バックグラウンド

背景画像を変更し、グラデーションの方向を切り替えます。

• 背景画像：新しい写真
• 背景グラデーション
  • 色1：透明
  • カラー2：ダークグレー＃222831
  • 開始位置：0％
  • 終了位置：50％

管理者ラベル

管理ラベルタブを開き、行番号を13に更新します。

行13の召喚状モジュールを調整する

コンテンツ

モジュールの内容を更新します。

• タイトル：UXデザイン
• 本文：新しい説明テキスト

リンク

リンクも更新してください。

• リンク：新しいリンク

サイジング

モジュールの配置を左から右に変更します。

• モジュールの配置：右

間隔

デスクトップのパディングを左から右に変更します。 タブレットとモバイルの設定は同じままである必要があります。

• 右パディング
  • デスクトップ：90px

行を並べ替える

行7、9、および11を移動します。

管理者ラベルに従って、行を正しい順序で配置します。

ワイヤーフレームを比較する

スクロール可能なポートフォリオナビゲーションリストとアイテムのワイヤーフレームを再確認してください。 アンカーリンクが正しく機能するためには、行が必要です。 ワイヤーフレームビューの別の外観は次のとおりです。

プレビュー

スクロール可能なポートフォリオナビゲーションリストを再作成するためのすべての手順を実行しました。 さまざまな画面サイズでデザインがどのように表示されるかをもう一度見てみましょう。

デスクトップ

モバイル

最終的な考え

このステップバイステップのチュートリアルでは、Diviのスクロール効果を使用してスクロール可能なポートフォリオナビゲーションリストを再作成しました。 さらに、ポートフォリオアイテムを追加しました。 ナビゲーションは、アンカーリンクとCSSIDで制御されます。 これは、ポートフォリオアイテムをインタラクティブに表示するための優れた方法です。 あなたがそれを好きであるか、質問があるならば、我々にコメントを残してください！