Realization of fading and fading effect of front-end analog phone screen picture

On the site, we often see this effect, there is a Iphonex phone screen, and then the screen will be like the real, there will be a variety of animation effects, pedagogical gardening fade fade. Today we will try to do one of these effects.

The HTML page structure is probably like this:

  <main class= "Mobilebox" >    <div class= "Imgbox" >                                  </div>  </main>

Actually very simple, is outside a box, we set her background as a mobile phone picture, inside of the Imgbox, used to store pictures, images with absote positioning, so that a few pictures coincide together, and then we change the picture Opaticy and Z-index, you can achieve the desired results.

CSS code long like this

. mobilebox {  width:454px;  height:618px;  Background-image:url (.. /images/mobile.png);  BACKGROUND-SIZE:454PX 618px;  background-position:0 0;  Position:relative;}. Imgbox {  padding:99px 0 0 151px;  Position:relative;}. Imgitem {  position:absolute;  Visibility:hidden;  opacity:0;} . Show,.opacitytrans {  opacity:1;  visibility:visible;} . Opacitytrans {  -webkit-transition:opacity 1.5s ease-in;  Transition:opacity 1.5s ease-in;  Z-index:2;}

We do this by changing the class name of the image element to achieve the effect switching. At the same time, the class with only one picture is. Show, and the class with only one picture is. Opacitytrans.

JS code long like this.

　　

Window.onload = function () {  var imgitems = Document.queryselectorall (". Imgitem");  var index = 0;  var tem = 1;
We define two variables to control the alternation of show and Opacitytrans classes, starting with the first one showing and the second slowly appearing.  Imgitems[index].classlist.add ("show");  Imgitems[tem].classlist.add ("Opacitytrans");
Timer Code  setinterval (function () {       imgitems[index].classlist.remove ("show");    Imgitems[tem].classlist.remove ("Opacitytrans");    index++;    tem++;
When the last sheet is reached, the boundary condition is set: Go back to the first one. The whole is from No. 0 to Imgitems.length-1, looping, so we use two variables to make the logic clearer.    if (tem = = = 5) {      tem = 0;     };    if (index = = = 5) {      index = 0;    }    Imgitems[index].classlist.add ("show");    Imgitems[tem].classlist.add ("Opacitytrans");  }, 2000);};

How about, it's easy.

Realization of fading and fading effect of front-end analog phone screen picture