preface

Why do this project: actually because this year is the year of Ehai pig, so I want to practice what I have learned, so after thinking and thinking, I finally decided to draw Peppa Pig to congratulate everyone on the New Year, peppa pig tattoo, applause for social people.

Below is the code and preview link of my project, if you think the project is beautiful and practical, please give me a star, your star is my biggest motivation!! Project source preview link

To display the effect of mobile terminal, click Download to watch

The theme of this project is to draw a Peppa Pig to congratulate you on the New Year. Ok, without further ado, let’s get down to business:

First, the project production ideas

This project supports VIEWING on PC and mobile terminals, and the eating effect on PC terminal is better.

  1. useHTML, CSS,Static effect of Peppa Pig
  2. Then use theJQuery and JavaScriptImplement dynamic directionstyleTags add styles to show effects and directionspreLabel add text, add speed adjustment function
  3. And then utilizeprism.jsImplementation code highlighting
  4. Adjust the details on the mobile terminal to achieve the effect of viewing on the mobile terminal
  5. Achieve animation simulation of Peppa PigCSSDrawing process
  6. Add background music, through a small trick to achieve background music playback

Technology stack: jQuery, JavaScript, HTML5, CSS3

Note: mainly used is CSS3 border-radius, curve rescue country.

Ii. Problems encountered in this project

Problem 1: The presentation process of drawing Peppa Pig takes too long

Solutions: Will not influence the effect of pig in page page display style, all in a CSS file, load early part of the style, when the page output text, show the style of the key, so this problem solved, there is, is what I found on the computer playing time seems less than play on your mobile phone and the playing time of different mobile phone is not the same, Here is to make fun of your mobile phone, mobile phone playback time is too long, mobile phone use is like this!

Question 2: How to adjust the playback speed by clicking the button

Solution: setInterval cannot ensure a fixed interval between two executions. Therefore, setInterval is not used. After each execution, setTimeout is used to specify the specific time for the next execution.

The small demo:


      
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <span id="text"></span>
  <script>
      /*var text = document.getElementById('text') var i = 0; var id = setInterval(function(){ i += 1; if(i < 10){ text.innerText = i }else{ clearInterval(id) } },500)*/
      
      // setTimeout replaces setInterval
      var text = document.getElementById('text') 
        var i = 0;
        var id = setTimeout(function fn(){
          i += 1;
          if(i < 10){
            text.innerText = i
          }else{
            clearTimeout(id)
          }
          id = setTimeout(fn, 2000);
        },500)
  </script>
</body>
</html>
Copy the code

Question 3: How do I play background music on the page

In fact, this pit is my own to step on, after the implementation of the overall function, it should be over, but I want to have a background music, so go to do it, step on the pit, I found that the Chrome browser can not automatically play, what should I do? What can I do? Go to Google. I know that Chrome 66 already disables autoplay, so it’s possible that other browsers on computers and phones will also disable autoplay. I came up with a solution, which is: Since the browser won’t let me auto-play the sound, I’ll add a button that tells the user to click, like “Start” or “turn on sound effects,” that has to be clicked to make the background music play.

Problem 4: UsejQueryIs found when you want to call the play() method of music$(" # audio "). The play ();Does not work and an error is reportedplay()methodsundefined.

Solutions:

This jQuery object does not have the play method and can be called using the native Document method

var audio = document.getElementById('audio');
audio.play();
audio.stop();
Copy the code

How to use this project

Clone project to local:

git clone [email protected]:xyyojl/make-a-peppa.git
Copy the code

Entry project:

cd make-a-peppa
Copy the code

If you have http-server installed, it is not a big problem to start the server.

http-server -c -1
Copy the code

You can then access it by typing localhost:8080 in the browser address bar.

4. Refer to the article

  • Use CSS to draw Peppa Pig and you are the next social person!
  • Chrome 66 disables sound autoplay after
  • First introduction to mobile