ホームページ > 記事 > ウェブフロントエンド > 優れた Web サイトはフロントエンドに注目 -- Xiaomi Note 紹介 page_html/css_WEB-ITnose
優れた Web サイトはフロントエンドに注目 -- Xiaomi Note 紹介 page_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:49:521082ブラウズ
私がブログを運営し始めた当初は、主に有名サイトの興味深いインタラクティブエフェクトを紹介する「スキンピッキング」シリーズの記事をたくさん書き、それを実装してみました。その後、私はいくつかの新しいフロントエンド技術に注目を移し始め、「ピッキング」シリーズは長い間閉鎖されました。今日、私は「ピーリング」ピットを再開する予定ですが、もっとエレガントな名前を付けましょう - 「優れた 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 画像は正常なダウングレードに使用されます。つまり、