preface

Dacheng H5 open source video series is a special topic, in this topic we will analyze some cool online H5, in every detail, every delicate transition behind can see the efforts of the front-end engineers, this article is ๐Ÿ‘‰๐Ÿ‘‰ Sogou: each person is a poem

Each person is a poem. You can feel it by yourself. Heaven and earth made man, everyone has a poem hidden deep in his heart, that is the soul of this person. Let’s take a look at some of the more interesting parts of this H5

First screen Loading part

Sogou loading uses the simplest progress bar to show it. So let’s take a look at the HTML structure,

<div class="body_logobg" id="loaddingWrap">
    <div class="loadingbox xycenter">
      <div class="loadingrange">
        <div class="loading" id="loadingPercent" style="width: 100%;"></div>
      </div>
      <p id="loading">100%</p>
    </div>
 </div>
Copy the code

Loading is composed of two parts: a loadingrang bar and a percentage of text. The traditional layout method is loadIngrange to define the outer frame of the progress bar, loading to define the content and text of the progress bar separately. But here the author takes a novel approach. Margin-block-xxxx: margin-block-xxxx to define the text of the P tag. Official translation:

margin-block-xxxx property defines the logical block end margin of an element, which maps to a physical margin depending on the element’s writing mode, directionality, and text orientation.

This is an abbreviation that corresponds to the margin-top, margin-right, margin-bottom, or margin-left attribute according to the values defined for writing-mode, direction, and text-orientation. It can be understood as simply defining the position of the left, right, and bottom of the text.

In order to demonstrate the loading process of the progress bar, I used CSS animation to draw the content of the progress bar.

.loading {
  height: 100%;
  background: #8f82bc;
  border-radius: 4px;
  color: #fff;Animation: prece 1.5s ease-out}Copy the code

Then get the width of the content of the progress bar through JS, and convert it to draw on the text. Note the impact of floating point numbers. If you don’t know what floating point is you can Google it, but I won’t expand it here.

(function() {let interval = setInterval(increment, 100)
  function increment () {
    let num = parseFloat((($('#loadingPercent')[0].offsetWidth / 200).toFixed(2)*1000)/10) + The '%'
    $('#loading')[0].innerHTML = num
    if (num === '100%') {
      clearInterval(interval)
    }
  }
}())
Copy the code

Content of the interface

It is worth mentioning that the entire H5 page is based on a plug-in -pageResponse mobile response plug-in. Here is a brief introduction:

Common mobile layout

Rem layouts, which are “adaptive” to element sizes by dynamically setting font size in the root directory, are usually used with percentage layouts

2, fixed pixel set fixed viewport width.

3. Media Query, the most cumbersome of all, sets different styles for different device viewport widths, in other words, multiple styles for a page. Authentic responsive layout.

A different approach

When we learn about viewPort, we know that there is a thing called scale in it, and sometimes we just want to scale the whole page. For pageResponse you can see the specific use of the documentation step by step. So we’ll put a meta tag in our header so we don’t have to describe it here

Analysis of the

The entire H5 page is laid out in a central template, so the author puts the introduction page, answer page, and results page into a div, and then handles them with pageResponse. Achieve mobile compatibility.

I. Introduction page

According to the above analysis, we can get the author’s HTML structure:

<div class="wrapper body_bg" id="minWrap">
    <div class="minWrapper"> <! -- Introduction page --> <div class="mainConbox wrapYinyan" id="introductionWrap">
        <img id="introductionTxt" class="xycenter" src="./img/yinyan.png" alt="">
      </div>
      <!-- ็ญ”้ข˜้กต -->
      <!-- ็ป“ๆžœ้กต -->
    </div>
  </div>
Copy the code

When you look at it, you might wonder: Is the introduction page interface so simple? Was it developed by Dachang? No. The author’s design here is also ingenious.

<div class="wrapIndex xycenter" id="indexWrap">
    <img class="ycenter font_index" src="./img/index.png" alt="">
    <a href="javascript:;" class="btn_start anipulse" id="btn_start"></a>
    <div class="input_text">
      <div class="textbox" id='textbox' placeholder='1' contenteditable='true' max-length='4'</div> <div class="logo_ingdex"></div>
  </div>
Copy the code

There’s really no input tag in HTML. So how does the author do it?

Analysis of the

  • Writing-mode defines the horizontal or vertical layout of text and the direction of text travel at the block level. The author uses this property to set the vertical alignment of the text.
  • Contenteditable indicates whether elements can be edited by users. The author uses this property to make div editable in place of input. This has the advantage of avoiding having to deal with the embedded style of the input

Answer sheet

<div class="mainConbox wrapAnswre displaynone" id="questionWrap">
        <div class="answerbox" id="questionBox">
          <div class="answerimg">
            <img src="./dati/image_18.png" alt="">
          </div>
          <div class="questionTit">
            <span class="qnum qnum1"></span>
            <span class="qtit">
              <img src="./dati/wenti_18.png" alt="">
            </span>
          </div>
          <div class="questionoption">
            <span class="option">A</span>
          </div>
          <div class="questionoption">
            <span class="option">B</span>
          </div>
          <div class="questionoption">
            <span class="option">C</span>
          </div>
        </div>
      </div>
Copy the code

Analysis of the

From the HTML, you can see that the author has divided the page into three layers. The top layer is the image layer, the middle layer is the topic, and the bottom layer is the layout of the options. The results page and the promotion page are similar, but instead of expanding the CSS for each page, I’ll put them in separate folders so you can see them easily.

Please visit ๐Ÿ‘‰๐Ÿ‘‰

Page logic

Here almost every page is finished, the most critical point is how to organize all the pages. By looking at the author’s source code, we found that this H5 is still in the way of jquery. Run display: None to connect the entire H5 interface. Here I have taken the JS part of the source code out

Please visit ๐Ÿ‘‰๐Ÿ‘‰

The source code

This is to split up all the pages, each file into its own interface. The whole H5 page I also arranged in gitPag, but the title only wrote a, because each is the same, I did not repeat to write, interested in the source code can also look.

Source code is available at ๐Ÿ‘‰๐Ÿ‘‰ here: source code address

Experience online at ๐Ÿ‘‰๐Ÿ‘‰ here: Experience

conclusion

Everyone in the learning time is not only know each CSS property, comprehensive examples do not have ideas, do not know how to start, quickly combined with the above explanation to start.

If you have any questions, join our group chat at ๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡. Finally, I wish you a happy May Day!