CSSにスティッキー効果を追加する方法

CSSにスティッキー効果を追加する方法

前面に書かれた

filter:blur と filter:contrast がこのような素晴らしい化学反応を生み出すことを最初に発見したのは誰かはわかりませんが、それは問題ではありません。重要なのは、この特殊効果の使い方を学べば、Web ページにクールな効果を追加できるということです。 それでは、2つの小さなデモをご覧ください

デモ

どうやってやるんですか?

よく見ると、Web ページ上の要素には粘性があるように見えます。要素が十分近い場合、融合効果が発生します。要素が離れている場合、粘着効果が発生します。これはどのように実現されるのでしょうか。

とても簡単です。子要素に filter:blur を追加し、親要素のコントラストを上げるだけです。

次のようになります (より簡単なデモを以下に示します)。

コード部分:

 <div class="wrapper">
        <div class="コンテナ">
            <div class="box"></div>
        </div>
       </div>
 .ラッパー{
            幅: 100%;
            高さ:100vh;
            位置: 絶対;
            背景色: #333;
            フィルター:コントラスト(50)
        }
        。容器 {
            位置: 絶対;
            上位:50%;
            残り:50%;
            幅: 200ピクセル;
            高さ: 100px;
            背景色: #00eeff;
            フィルター: ぼかし(10px) ;
        } 
        。箱{
            幅:25px;
            高さ:25px;
            背景色: #00eeff;
            境界線の半径: 50%;
            位置: 絶対;
            残り:50%;
            遷移: 1秒;
            フィルター: ぼかし(1px);
            アニメーション: 1 秒の線形無限移動。
         }
   @keyframes 移動 {
       0%{
           変換: translateY(0);
       }
       100%{
           変換: translateY(-100px);
       }
   }

いつでもコードをコピーして自分で試すことができます。

原理:

全ての要素がぼかし属性を持つ場合、上側がコントラストのない親(以下、図1)、下側がコントラストのある親(以下、図2)になります。要素を結合すると、図1にも融合効果が現れているのがお分かりいただけたでしょうか。ぼやけが原因で、画像がはっきりしないのです。コントラスト属性はぼやけを効果的に抑え、図 2 に示すような効果を実現します。

下の図をご覧ください

CSS にスティッキー効果を追加する方法についての記事はこれで終わりです。CSS スティッキーに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  タブバーのいくつかの実装方法(推奨)

>>:  画像をハイパーリンクとして使用したときに表示される青いボックスを削除する方法

推薦する

Vue 日付時刻ピッカーコンポーネントの使い方の詳細な説明

この記事の例では、Vue の日付時刻ピッカーコンポーネントの具体的なコードを参考までに紹介します。具...

MySQLプロセス関数の一般的な使用例の分析

この記事では、例を使用して MySQL プロセス関数の一般的な使用方法を説明します。ご参考までに、詳...

Linuxシステムの入出力管理とvimの共通機能の詳細な説明

####システム内の入出力の管理#### 1. システムの入力と出力のリダイレクトを理解する入力リダ...

jsで照明スイッチを制御する

参考までに、jsを使用して照明スイッチを制御します。具体的な内容は次のとおりです。トピック: js ...

SMS送信のカウントダウンを実装するJavaScript

この記事では、SMS送信のカウントダウンを実装するためのJavaScriptの具体的なコードを参考ま...

vue3 キャッシュページキープアライブと統合ルーティング処理の詳細な説明

目次1. はじめに2. 使用1. vue2とvue3の違い2. ページ上の一部のデータはキャッシュす...

MySQL 文字列連結と null 値の設定のためのインスタンス メソッド

#文字列連結 concat(s1,s2); テーブル内の last_name と first_nam...

CentOS 6.5 i386 インストール MySQL 5.7.18 詳細チュートリアル

ほとんどの人はMySQLをコンパイルしてシステムディレクトリに置きますが、私のやり方はコンパイルした...

Vmware + Ubuntu18.04 に Hbase 2.3.5 をインストールするための詳細なチュートリアル

序文前回の記事では Hadoop をインストールしましたが、今回は Hbase をインストールします...

MySQLの遅いクエリ問題の詳細な分析データ送信

例を通して、MySQL のデータ テーブル送信のクエリが遅い問題の解決策を共有しました。最近、コード...

MySQL共通ストレージエンジンの機能と使用方法の詳細な説明

この記事では、一般的な MySQL ストレージ エンジンの機能と使用方法を例を使って説明します。ご参...

MySQL 5.7.24 のインストールと設定のグラフィックチュートリアル

この記事では、MySQL 5.7.24のインストールと設定のチュートリアルを参考までに紹介します。具...

TypeScript の基本型の紹介

目次1. 基本タイプ2. オブジェクトタイプ2.1 配列2.2 タプル2.3 オブジェクト3. 型推...

nginxコンテナ設定ファイルの独立した実装

コンテナを作成する [root@server1 ~]# docker run -it --name ...

HTML 要素の高さ、offsetHeight、clientHeight、scrollTop などの詳細な説明。

要素に関するいくつかの属性フロントエンドの日常的な開発では、一部のページのプロパティを取得または監視...