優れた Web サイトはフロントエンドに注目 -- Xiaomi Note 紹介 page_html/css_WEB-ITnose
私がブログを運営し始めた当初は、主に有名サイトの興味深いインタラクティブエフェクトを紹介する「スキンピッキング」シリーズの記事をたくさん書き、それを実装してみました。その後、私はいくつかの新しいフロントエンド技術に注目を移し始め、「ピッキング」シリーズは長い間閉鎖されました。今日、私は「ピーリング」ピットを再開する予定ですが、もっとエレガントな名前を付けましょう - 「優れた Web サイトはフロントエンドに注目します」 その名前が示すように、フロントエンドを学ぶために熟考する価値のあるいくつかの興味深い Web サイトも探しています。エンドテクノロジーとインタラクションの概念。
このシリーズの始まりとして、「携帯電話を買うと無料の国を手に入れる」Xiaomiから始めます。理由は、携帯電話を変更する予定があり、たまたまハイエンドバージョンが好きだったからです。 Xiaomi note の紹介ページを閲覧したところ、特に CSS3 アニメーションの部分が非常に優れていると感じたので、記事を書いてみんなと共有するのもいいかもしれません。
Xiaomi note の紹介ページのアドレスは次のとおりです。まず、そのインタラクティブな効果を体験してください:
http://www.mi.com/minote/
フォント
最初に私がこのサイトに惹かれたのは、タイトルなどに使われているフォントで、私もデザインが好きなので、この二本の細いフォントが一目でソンティ・ヘイヘイとヤヘイではないことに気づき、調べてみたところ、フォントは FZLTXHK (つまり、Founder Lanting Slim Heihei) と呼ばれます。
一般的に、Web ページにフォントフェイスを介してサードパーティの中国語フォントを導入することはお勧めしません。完全な中国語フォント パッケージのサイズは通常数 M です。これにより、クライアントはリクエストを行うのに時間がかかり、ユーザー トラフィックが無駄になります。第 2 に、ページのフォント効果が切り替わります (スタイルのないテキストのフラッシュ)。
ユーザーエクスペリエンスを重視する企業として、Xiaomi はそのような無茶なことはしないと信じています (まあ、国のことを話すつもりはありません)。フォントに関しては、Xiaomi は当然、ページ上で使用する必要があるテキストのみをカプセル化するといういくつかのトリックを実行しました。信じないで？サードパーティのフォントを使用してタイトルのコンテンツを他のコンテンツに変更してみると、多くのテキストがそのフォントでサポートされていないことがわかります:
ページを変更するたびに、Xiaomi のニワトリとライオンの撮影は非常に困難です。新しいフォントを手動でパッケージ化するのは本当に大変な作業です。 。 。 。実際には、そうではありません。結局のところ、私たちは焼畑農業の原始的な社会ではありません。ノードパッケージに直接祝福を求めることができます~
このツールは、次のことができます。 FontSpider は、ローカルの CSS および HTML ファイルを分析して WebFont で使用されていない文字を取得し、フォントからこれらの文字データを削除して圧縮を実現しながら、クロスフォント用の形式を生成します。ブラウザの使用。
Font Spider の使用方法は公式 Web サイトで非常にわかりやすく説明されていますので、この記事では詳しく説明しませんが、まず @font-face のマッチング形式、つまりフォント形式について話しましょう。 WEB上でよく使われます。
@font-face で導入されたフォント ファイルは、format メソッドを通じてブラウザが対応するフォント形式と一致するように支援します。 さまざまなブラウザでサポートされているフォント形式は次のとおりです:
1. TrueTpe (.ttf) 形式:.ttf フォントは Windows と Mac で最も一般的なフォントです。RAW 形式なので、このフォントをサポートするブラウザは (IE9 以降、Firefox3.5 以降、Chrome4 以降、Opera10 以降、iOS) です。 Mobile Safari4.2+);
2. OpenType (.otf) 形式:.otf フォントは、TrueType に基づいて構築された独自のフォント形式とみなされ、より多くの機能も提供されます。このフォントをサポートするブラウザには、(Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile Safari4.2+) があります。
3. Web オープン フォント フォーマット (.woff) 形式:.woff フォントは、オープンな TrueType/OpenType 圧縮バージョンです。このフォントをサポートするブラウザーもサポートしています (IE9+、Firefox3.5+、Chrome6+、Safari3)。 .6+、Opera11.1+);
4. Embedded Open Type (.eot) 形式:.eot フォントは、TrueType からダウンロードできる IE 用の特別なフォントです。 この形式でフォントを作成します。このフォントをサポートするブラウザは (IE4+)、
5. SVG (.svg) 形式:.svg フォントは、このフォントをサポートする SVG フォント レンダリングに基づく形式です。ブラウザには (Chrome4+、Safari3. 1+、Opera10.0+、iOS Mobile Safari3.2+)。
まとめると、 @font-face が .eot およびその他のフォント (できれば .woff) と一致する限り、基本的にほとんどのブラウザで正常に表示できます。ただし、Xiaomi のスタイル (クリックして表示) を見ると、.woff にのみ一致します (つまり、IE8 は通常のフォントにダウングレードされます)。さらに、Xiaomi はフォント ファイルを Base64 エンコーディングの形式で CSS に直接インライン化しました。これには、1 つのファイル リクエストが削減されるという利点があり、上記の FOUT 現象も効果的に防ぐことができます。
しかし、この Base64 を取得するにはどうすればよいでしょうか?おそらく、Xiaomi は ZiZhu のようなツールを使用してフォント圧縮ファイルを取得し、それを何らかの方法 (ここで変換するなど) で Base64 エンコードに変換できます。
さらに、Xiaomi は CSS3 スタイルも使用しています:
-webkit-font-smoothing:antialiased
この属性を使用すると、ページ上のフォントにアンチエイリアスが適用され、フォントがより鮮明で快適になります (特に、フォント サイズが小さいテキスト コンテンツに適しています)。
オプションの値は 3 つあります:
なし | アンチエイリアス
それぞれの違いを以下に示します:
トランジションアニメーション
Xiaomi のページには随所に視差スクロール効果があります, があります。いつでも小さな驚きを与えることができます:
上の図のアニメーションはトランジションによって実装されています。 一般的な手順は次のとおりです:
⑴ トランジションなど、アニメーション化するすべての要素のトランジション属性を設定します。変換 1s;
⑵ すべてのアニメーション要素に class="visible" を追加し、アニメーションの最終状態を定義します。
⑶ ページが DOMReady になったら、すべてのアニメーション要素 ($(".visible")) を繰り返します。スクロール バーがロールアップされたときに、スクロール バーがまだウィンドウの表示領域の下にある場合は、「visible」クラスを削除します。このステップは主に、ユーザーがページを特定の位置までプルダウンしてからページを更新する際の処理に使用されます。このとき、ウィンドウの表示領域とその上の要素はアニメーション状態をスキップして直接処理する必要があります。アニメーションの最終状態に到達します。
⑷ onscroll イベントをリッスンし、アニメーション要素の位置に移動するときに、要素の「visible」という名前のクラスを削除します。
それを実現するためのシーンとスクリプトを大まかに書くことができます:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>动画模拟</title> <script src="jq.js"></script> <style> article,div{margin: 380px 0;border: solid 1px gray;} article > section{width:50px;height:50px;background:red;transform: translate3d(-100px, -60px, 0);opacity: 0;transition: all .8s;} article > section.visible {transform: translate3d(0, 0, 0);opacity: 1;} div > span{background:blue;transform: scale(.2);opacity: 0;transition: all 2s;} div > span.visible {transform: scale(1);opacity: 1;} div > p {width:50px;height:50px;background:yellow;transform: translate3d(90px, 100px, 0);opacity: 0;transition: all 1.5s;} div > p.visible {transform: translate3d(0, 0, 0);opacity: 1;} </style> <script> $(function(){ var elmArr = [], $win = $(window); $(".visible").each(function(i,elm){ $(elm).data("ot",$(elm).offset().top); elmArr.push(elm); }); dealClass(1); $win.on("scroll",dealClass); function dealClass(isRemove){ var top = $win.height() + $win.scrollTop(); if(isRemove!=1) { //滚动页面时的判断，并添加class="visible" for (var i = 0,$elem; i < elmArr.length; i++) { $elem = $(elmArr[i]); if ($elem.data("ot") <= top) { $elem.addClass("visible"); elmArr.splice(i, 1); --i; } } }else{ //初始化页面时的判断，并删除class="visible" for (var i = 0,$elem; i < elmArr.length; i++) { $elem = $(elmArr[i]); if ($elem.data("ot") >= top) { $elem.removeClass("visible"); } } } } }) </script></head><body><article> <section class="visible"></section></article><div> <span class="visible">hello</span></div><div> <p class="visible"></p></div></body></html>
効果は次のとおりです:
トランジションアニメーション効果はデフォルトで線形 (線形) ですが、その効果を設定します。タイミング - function 属性を使用すると、次のエフェクトのようにエフェクトをより柔軟にすることができます:
ここでのtransition-timing-function属性は、cubic-bezier(.15, .73, .37, 1.2)に設定されています。これは、次のことを意味します。ベジェ サール曲線関数に従ってアニメーションを実行します (詳細については、ここをクリックしてください)。
トランジションを変更してみることができます: :
トランジションの最後に時間単位を追加すると、アニメーション効果を遅らせることができます。たとえば、上記の 5 つの携帯電話 (5 つの
transition:transform 1s cubic-bezier(.15, .73, .37, 1.2) <strong>.2s</strong>;
遷移遅延値 0.2 秒が最後に記述されているため、2 番目の電話は最初の電話より 0.2 秒遅れて実行されます。アニメーション。
animate アニメーションanimate は、セグメントで表示する必要があるもの、または周期的な非遷移アニメーションがあるものに非常に適しています。たとえば、デュアル 4G の導入領域では animate (エフェクト ページ アドレス) が使用されます。 ):
カード スロットは、span (最終的にフェードインして表示される空洞内のテキスト) が埋め込まれた div (カード スロット自体) で構成されます。div がアニメーションをトリガーするとき (次のようなトリガー クラスを追加します)。トランジション)、下から上に直接表示されます (2 秒)。スパン アニメーションは同時にトリガーされますが、2 秒遅れて実行されるため、「スパンがトリガーされ始める」という視覚効果が作成されます。 div アニメーションが終了した後のアニメーション」。
前の例を変更してみましょう:
コードを表示
その効果は次のとおりです:
実際、アニメーションに関係するこのコードの最も重要な部分は次の 2 行にすぎません:
div.visible{-webkit-animation:ani-fade-in-up 2s ease forwards;animation:ani-fade-in-up 2s ease <strong>forwards</strong>;}div.visible > span {-webkit-animation:ani-fade-in <strong>1s 2s</strong> ease forwards;animation:ani-fade-in 1s 2s ease <strong>forwards</strong>;} </p> <p>whereスパン アニメーションは 2 秒の遅延で実行され、他の 2 つは最終状態を維持するために前方処理を使用します。 </p> <p class="sycode">さらに、Wi-Fi が導入される興味深いループ アニメーションがあります: </p> <p></p> <p>これは、アニメーションでのアニメーションの実行数を無限に設定します: </p> <p> </p> <p> </p>
<pre class="brush:php;toolbar:false">@-webkit-keyframes ani-circle-scale { 0% { -webkit-transform: scale(0); margin-left: 0 } 45% { -webkit-transform: scale(1); margin-left: -999px; opacity: 1 } 80% { opacity: 1 } 100% { opacity: 0 }}div{-webkit-animation:ani-circle-scale 8s ease-out forwards <strong>infinite</strong>;}
より多くのアニメーションの知識ポイントが利用可能です。ここでご覧ください。
その他
カメラの紹介ページでは、Xiaomi はビデオを使用して小さなアニメーションを表示しています (小さなサイズのビデオを直接使用して、いくつかの複雑な表示効果を表示することも良い選択です):
ここでのコードは次のとおりです:
<video id="exporevideo" poster="http://img03.mifile.cn/webfile/images/2014/cn/goods/minote/camera/ca-49.png"> <source src="http://img03.mifile.cn/webfile/images/2014/cn/goods/minote/camera/jingtou.mp4" type="video/mp4"> <source src="http://img03.mifile.cn/webfile/images/2014/cn/goods/minote/camera/jingtou.webm" type="video/webm"> <img src="http://img03.mifile.cn/webfile/images/2014/cn/goods/minote/camera/ca-49.png" alt=""> </video>
2 つのソースはそれぞれ mp4 形式と webm 形式のビデオ ファイルに一致します。ここで、mp4 は IE9+ および Safari との互換性を、webm は Firefox および Opera の古いバージョンとの互換性を備えています。 。 mp4 と webm に加えて、実際には ogg 形式も選択できます。ビデオ形式のさまざまなブラウザのサポートについては、Wikipedia (非常に詳細) を参照してください。
最後の img 画像は正常なダウングレードに使用されます。つまり、
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7333
9
1627
14
1351
46
1262
25
1209
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
WebページのPNG画像にストローク効果を効率的に追加する方法は？
Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
