お問い合わせ

何を探していますか？

によるユアン・マック
2024年4月14日

ホバーすると画像を拡大します

カスタム コードを使用して、マウスをホバーすると画像にデスクトップおよびモバイル対応の拡大鏡が表示されます。

ウェブサイトには、製品の写真やアートワークなど、細部までこだわった画像が含まれている場合があります。カスタム コードを使用すると、訪問者がこれらの画像の特定の部分にマウス カーソルを合わせて拡大表示できるようにすることができます。しかも、何もする必要はありません。 

Webflow デザイナーのページのカスタム コード設定に配置されたカスタム コードを使用して、ピンク、赤、緑のボックスと時計の画像がホバー時に拡大表示されます。

このチュートリアルでは、次の手順に従ってページまたはプロジェクトにカスタム コードを挿入し、画像を拡大するプロセスについて説明します。 

  1. カスタムコードを挿入する
  2. クラス名を割り当てる
  3. 拡大鏡をカスタマイズする

<script type="text/javascript" src="https://assets.website-files.com/5e2755779d8b8ea1d6373797/5ea88e92dce9b4b66f165490_zoom.txt"></script>
<script>
  jQuery(function(){

  if(!$.fn.imagezoomsl){

      $('.msg').show();
      return;
    }
    else $('.msg').hide();

    // plugin initialization
    $('.image').imagezoomsl({

      innerzoommagnifier: true,
      classmagnifier: "round-loope",
      magnifiersize: [150, 150],
      // disables the scrolling of the document with the mouse wheel when the cursor is over the image
      disablewheel: false
    });
  });
</script>

カスタムコードを挿入する

プロジェクトにカスタム コードを挿入するには、次の 2 つの方法があります。 

  • プロジェクト全体にコードを含める
  • コードを個別のページに統合する

プロジェクト全体にコードを挿入するには:

  1. プロジェクトの 設定
  2. を選択 カスタムコード タブ
  3. コードを フッターコード セクション（例： </body> 鬼ごっこ&quot;）
  4. クリック 変更内容を保存

注記： ホットキーを使用してプロジェクトにコードを挿入できます コマンド + V (Macの場合) または コントロール + V (Windows の場合)。

プロジェクトの設定で「カスタム コード」タブを選択すると、プロジェクト全体でカスタム コードを配置できる場所が表示されます。 
画像拡大カスタムコードは、プロジェクト設定のフッターコードセクションに配置し、 </body> 鬼ごっこ。

個々のページにコードを挿入するには: 

  1. 起動する デザイナー
  2. アクセス ページパネル 希望するページのページ設定歯車アイコンを選択します
  3. スクロールして カスタムコード ページ設定内のセクション
  4. コードを 前に </body> 鬼ごっこ セクション
  5. クリック 保存

注記： ホットキーを使用してコードをプロジェクトに貼り付けることができます コマンド + V (Macの場合) または コントロール + V (Windows の場合)。

ページの設定にアクセスするには、ページ パネルを開き、ページの上にマウス カーソルを移動してクリックする歯車アイコンを表示します。 
ページのカスタムコード設定が強調表示され、具体的には「Before」 </body> タグセクション。

カスタム コードをプロジェクトに正常に統合しました。

クラス名を割り当てる

拡大効果を適用する画像に一意のクラス名を割り当てましょう。

  1. を選択 画像 拡大したい
  2. アクセス スタイルパネル をクリックして セレクターフィールド
  3. 試してみて クラス （例：「拡大」） 
画像のセレクター フィールドに、新しいクラス「拡大」が追加されていることが表示されます。

コードに「Magnify」クラスを含めてみましょう。 

  1. アクセス ページパネル カスタム拡大鏡コードが配置されているページのページ設定歯車アイコンを選択します
  2. スクロールして 前に </body> 鬼ごっこ ページ設定のセクション
  3. 交換する "。画像” をクラス名に置き換えます (例: “.拡大する（） 
  4. クリック 保存
ページ設定のカスタム コードに画像拡大のコードを挿入した後、新しく定義された「Magnify」クラスに対応するようにコードを変更してください。

役立つヒント: 進行中のプロジェクトでクラスを複製またはコピーする代わりに、 グローバルクラス または コンボクラス 拡大を目的とした画像に固有のクラスを確立します。 前述の手順に従って、カスタム コードに固有の拡大クラス名が含まれていることを確認します。 グローバル クラスとコンボ クラスの詳細をご覧ください。

プロジェクトを公開し、ライブ サイトに移動して、パーソナライズされたコードが実際に動作しているのを確認してください。クラス名を適用した画像 (クラス名「Magnify」で識別される画像など) にマウス カーソルを合わせると、画像上でカーソルをスライドさせると虫眼鏡がカーソルの動きを追跡します。

拡大ツールをカスタマイズする

デフォルトでは、虫眼鏡は 150 x 150 ピクセルの正方形です。サイズと形状を変更し、ドロップ シャドウ効果を導入してみましょう。

カスタム コードのデフォルト設定では、拡大鏡のサイズは 150 x 150 ピクセルに指定されています。拡大してみましょう。

  1. アクセス ページパネル カスタマイズされた拡大コードを含むページでページ設定の歯車アイコンを選択します。
  2. 下にスクロールして 前に </body> 鬼ごっこ ページ設定内のセクションに移動し、「magnifiersize: [150, 150]」というコード スニペットを特定します。
  3. 両方の 150 ピクセル値をより大きな数値 (たとえば、それぞれ 300 ピクセル) に調整します。
  4. 変更を保存します。
拡大鏡のサイズを調整するには、ページの設定内のカスタム コードの拡大鏡のサイズ セクションでピクセル値を変更する必要があります。

基本的なスタイルを新しいスタイルに設定して、拡大鏡の形を四角形から円形に変えてみましょう。 divブロック:

  1. 開く ナビゲーター そして、 体 要素。
  2. 利用する クイック検索 挿入する divブロック ページの最後の要素として。
  3. を選択 divブロック、起動します スタイルパネルをクリックし、 セレクターフィールド.
  4. クラス名を割り当てる divブロック カスタム コードが新しい拡大鏡の形状 (例: 「丸いループ」) を認識できるようにします。
  5. アクセス スタイルパネル > 国境 定義する 半径 50%の。

この段階では、Div ブロックは楕円形に表示されますが、拡大鏡のサイズは、以前に設定した 300 ピクセルによって制御されます。

インサイダーヒント: プレス 指示 + え (Macの場合) または コントロール + え （Windowsの場合）トリガーする クイック検索 プロジェクトに要素をすぐに追加できます。

スタイル設定された Div ブロックのセレクター フィールドには、追加された新しいクラス「round-loope」が表示されます。
「round-loope」Div ブロックの境界半径は 50% に調整されます。

拡大鏡にさらに深みを持たせるために、その背後に影を入れてみましょう。

  1. 選択してください divブロック.
  2. アクセス スタイルパネル > 効果.
  3. 組み込む ボックスシャドウ プラスアイコンを選択して、好みに応じて影をカスタマイズします。

私たちの「ラウンドループ」 divブロック 拡大鏡のスタイルにのみ影響するため、 divブロック ページに表示されません。非表示にしてみましょう:

  1. 「丸ループ」を選択 divブロック.
  2. 開く スタイルパネル > レイアウト.
  3. 調整する 画面 に なし.
  4. 公開 プロジェクトを実行してサイトを探索し、新しくスタイル設定された拡大鏡をプレビューします。
Webflow デザイナー内のページのカスタム コード設定に統合されたカスタム コードを使用して、マウスをホバーすると拡大されるピンク、赤、緑のボックスと時計を示す画像。

拡大ツールはモバイル ガジェットでも機能します。特にタブレットやスマートフォンなどのデバイスでは、画像をタップして拡大表示できます。

ピンク、赤、緑のボックスと時計を表示する画像。画像のセグメント化された領域をタップすると、モバイル デバイス上で拡大表示されます。この機能は、Webflow デザイナーのページのカスタム コード設定に統合されたカスタム コードによって実現されます。

おめでとうございます！拡大機能により、画像の可能性が高まりました。

ユアン・マック
Ewan Mak による最新の投稿 (すべてを見る)

関連記事

  • 適応型デザイン入門

    コンテンツのリフロー、固定サイズ、相対サイズ、ブレークポイント (メディア クエリ) がどのように作成に役立つかを学びます...

  • 半透明性

    不透明度を使用して要素の透明度レベルを変更し、独自の視覚効果を作成します。

  • 動き

    遷移を伴う状態間のスムーズなアニメーション

によるユアン・マック
更新日