Excellent websites look at the front end -- Xiaomi Note introduction page_html/css_WEB-ITnose

When I first started running my blog, I wrote a lot of articles in the "Skin Picking" series, which mainly introduced interesting interactive effects on some well-known sites, and then tried to implement them. Later, I began to shift my attention to some novel front-end technologies, and the "Picking" series was closed for a long time. Today I plan to reopen the "peeling" pit, but let's give it a more elegant name - "Excellent websites look at the front end". As the name suggests, we are also looking for some interesting websites worth pondering to learn their front-end technology and interaction concepts.

As the beginning of this series, we start with Xiaomi, which "buys a mobile phone and gets free land". The reason is that I have the plan to replace my mobile phone and happened to like the high-end version of Xiaomi Mi Note, so I browsed the introduction of Xiaomi Mi Note. Page, I feel that the interaction is quite good, especially the CSS3 animation part. I might as well write an article to learn and share with everyone.

The introduction page address of Xiaomi note is as follows. You can experience its interactive effect first:

http://www.mi.com/minote/

Font

The first thing that attracted me to this website was the font used in the title and other places. Since I also like to design, I noticed these two lines of fine fonts at a glance. The characters are definitely not Songti Heihei or Yahei. After checking, the font name is FZLTXHK (that is, Founder Lanting Slim Heihei):

Would you be a little surprised? Normally we are very different. It is recommended to introduce third-party Chinese fonts on the web page through font-face. After all, a complete Chinese font package is usually several M in size. Firstly, the client spends time in requesting and wastes user traffic. Secondly, it will cause the page font size to change. The effect switching flash phenomenon (FOUT??flash of unstyled text).

As a company that focuses on user experience, I believe Xiaomi will not do such an unreasonable thing (hey, I don’t plan to talk about the country). As for the fonts, Xiaomi naturally did some tricks - only encapsulating the text that needs to be used on the page. Don’t believe it? You can try to change the title content using third-party fonts to other content. You will find that many texts are not supported by the font:

Then Xiaomi’s Shooting Chicken Lion It's really hard work. Every time I modify the page, I have to manually pack new fonts. . . . In fact, this is not the case. After all, we are not a primitive society of slash-and-burn farming. We can directly ask the node package for blessing~

So "FontSpider (FontSpider)" This tool can make its debut (don't use idioms randomly) Dear~)?? Word Spider obtains characters not used in WebFont by analyzing local CSS and HTML files, and deletes these character data from the font to achieve compression, while generating a format for cross-browser use.

The use of Font Spider has been explained very clearly on its official website. I won’t go into details in this article, but first let’s talk about the matching format of @font-face, that is, let’s talk about WEB Commonly used font formats.

The font file introduced in @font-face can help the browser match the corresponding font format through the format method. The font formats supported by various browsers are as follows:

1. TrueTpe (.ttf) format:

.ttf font is the most common font for Windows and Mac. It is a RAW format, so it is not optimized for websites and supports this The font browsers include (IE9, Firefox3.5, Chrome4, Safari3, Opera10, iOS Mobile Safari4.2);

2. OpenType (.otf) format:

.otf font is considered an original font format. It is built on the basis of TrueType, so it also provides more functions. Browsers that support this font include (Firefox3.5, Chrome4.0, Safari3 .1, Opera10.0, iOS Mobile Safari4.2);

3. Web Open Font Format (.woff) format:

.woff font is a Web font The best format among them, it is an open TrueType/OpenType compressed version, and also supports the separation of metadata packages. The browsers that support this font include (IE9, Firefox3.5, Chrome6, Safari3.6, Opera11.1 ; The font browsers are (IE4);

5. SVG (.svg) format:

.svg font is a format based on SVG font rendering and supports Browsers with this font include (Chrome4, Safari3.1, Opera10.0, iOS Mobile Safari3.2).

To sum up, as long as an @font-face matches .eot and some other font (preferably .woff), it can basically run on most browsers Displayed normally. However, looking at Xiaomi's style (click me to view), it only matches .woff (that is, IE8-will be downgraded to regular fonts). In addition, Xiaomi inlined the font file directly into the css in the form of base64 encoding. This has the advantage of reducing one file request and can also effectively prevent the FOUT phenomenon mentioned above.

But how did you get this base64 out? Maybe Xiaomi can use a tool like ZiZhu to obtain the font compressed file, and then convert it into base64 encoding in some way (such as converting here).

In addition, Xiaomi also uses a CSS3 style:

-webkit-font-smoothing:antialiased

This attribute can make the font on the page anti-aliased. After using it, the font will look clearer and more comfortable (especially suitable for text content with smaller font size).

has three optional values:

none | subpixel-antialiased | antialiased

Their differences are shown in the figure below:

transition animation

Xiaomi’s page is full of parallax scrolling effects, giving you a feeling of little surprises at any time:

The animation in the picture above is implemented by transition. The general steps are as follows:

⑴ Set the transition attribute for all elements to be animated, such as transition:transform 1s;

⑵ Give Add a class="visible" to all animated elements, which defines the final state of the animation;

⑶ When the page is DOMReady, traverse all animated elements ($(".visible")) to check whether they are still If they are not scrolled up by the scroll bar and are still below the visible area of ​​the window, remove their "visible" class. This step is mainly used to process when the user pulls down the page to a certain position and then refreshes the page. At this time, the visible area of ​​the window and the elements above it are required to skip the animation state and directly reach the final state of the animation;

⑷ Listen to the onscroll event and when moving to the position of an animated element, remove the class named "visible" of the element.

We can roughly write a scene and script to achieve this:

<!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>

The effect is as follows:

The transition animation effect is linear by default. We can make the effect more flexible by setting its timing-function attribute, such as this effect:

The transition-timing-function attribute here is set to cubic-bezier(.15, .73, .37, 1.2), indicating that the animation is performed according to the Bezier curve function ( Please click me to learn more).

You can try changing the transition:XXX in our example above to:

transition: transform 1.5s cubic-bezier(.15, .73, .37, 1.2),opacity 1s;

Then check the effect:

If you add a time unit at the end of the transition, the animation effect can be delayed. For example, if the above five mobile phones (5

tags) come out in order, then we can set a delay of 0.2 seconds for the second

and 0.4 for the third

second delay, set a delay of 0.6 seconds for the fourth

. . .

Let’s take the second transition of

as an example:

transition:transform 1s cubic-bezier(.15, .73, .37, 1.2) <strong>.2s</strong>;

Since the transition-delay value of 0.2s is written at the end, The second phone will execute the animation 0.2 seconds later than the first phone.

animate animation

animate is very suitable for those that need to be displayed in segments, or have periodic non-transitional animations, such as dual 4G The introduction area uses animate (the effect page address):

The card slot is made up of a div (the card slot itself) embedded with a span (the hollow text that fades in at the end) ), when the div triggers the animation (add a trigger class like the transition), it is displayed directly from bottom to top (2s). Although the span is triggered at the same time, it is executed after a delay of 2s, so it creates the "animation in the div" After it ends, the span will start to trigger the visual effect of animation.

Let’s modify the previous example:

View Code

The effect is as follows:

In fact, this code involves The most critical part of the animation is nothing more than these two lines:

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>;}

Among them, the span animation is executed with a delay of 2 seconds and the execution process is 1s. The other two use forwards to maintain final state.

In addition, there is an interesting loop animation where wifi is introduced:

This is to set the number of animation execution times to infinite in the animation:

@-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>;}

For more animation knowledge points, please click here.

Others

On the camera introduction page, Xiaomi also uses video to display a small animation (some complex display effects directly use small The size of the video is also a good choice):

The code here is:

<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>

The two sources match video files in mp4 and webm formats respectively, where mp4 is for compatibility with IE9 and Safari, and webm is for compatibility with older versions of Firefox and Opera. In addition to mp4 and webm, there is actually ogg format to choose from. For the support of various browsers for video formats, you can check Wikipedia (very detailed).

The last img image is used for graceful downgrade, that is, browsers that do not support the

Xiaomi also uses the -ms-interpolation-mode:bicubic attribute for all img in its basic style, which allows the reduced images under IE to maintain high quality instead of becoming blurry and jagged. However, this style actually only works for IE7, because the default value of IE8 has been set to bicubic (it is nearest-neighbor under IE7, and the quality of the image will be very poor after being scaled).

In addition, Xiaomi has obfuscated and compressed its styles and scripts, but this is nothing new. It just uses front-end auxiliary tools such as grunt or gulp.

That’s it for this article. In fact, there are many interesting interactions not mentioned in this chapter on Xiaomi’s official website. Interested friends can explore them carefully.

Encourage each other~