Animated protein anchor link

The article will discuss how to connect volume elements of animation to a web page, and not break everything at once.

If you are very worried about the performance of Google Page Speed ​​in the development of sites, and it burns for every extra kilobyte, you should not continue to read this article.

Those who are not afraid of the large size, and love the risk, I ask for a cut;)

Business challenge

, .
, . .

, , :

1. — gif . , … ?!

   
   

   , , , , (gif 256 ), 19, .

2. , . APNG. png , IE11 . , (17) . . gif, .

3. , !?
   , mp4 . , , , .
   
   mp4 , , , .
   
   , .
   , video.
   
   .
   
   

   <video class="bl_video" loop="" muted="" autoplay="" poster="poster.jpg">
     <source src="topbanner.webm" type="video/webm">
     <source src="topbanner.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"">
   </video> 
   

   
   
4. , . :
   animation-timing-function: steps(…)
   , , .;

— ( . «sequence» (, )), - – . , , .

, , .

, ( ).

– , , gulp

, Toptal, Chris Coyier .

. padding- 0, “Choose files” .

, .

, , , . ( - , , ).

, .
> 5, .

png . (7,92)
, . ( TinyPNG Squoosh)

, gulp-imagemin –
« , .»

, , , .

, , . , , 25-40 .

1.2 , .

, , , - . CSS , . .

.toContactForm_leprechaun {
    width: 220px;
    height: 290px;
    box-sizing: border-box;
    background: url(../image/leprechaun-sprite.png) 0 50%;
    animation: play 3276ms steps(91) infinite;
}
@keyframes play {
    to {
        background-position: -20020px;
     }
}

, , .

1) width height (, width height).

2) — Y.

3) . , .
* .
steps .
, , 30 – 45 .

4) .

= (-1px)* *width .
* , . .

. .

, . , 100, .

body , DOM , .

, .

, 91 73. (5,17), , , Squoosh ( - <16300px)

, IE , Safari, ?
. webP
( 2,47 Squoosh , 1,67, , );

* window.navigator.userAgent, png , , .

, , .

Of course, this element is decorative in nature, which means it should be rendered by the browser last. Therefore, we place it closer to the end of the document. I also do not want to see the effect of loading a large image.

To avoid this effect, set the wrapper block at the initial stage to display: none; and only when the image has loaded, show it to the user. The code looks something like this.

<div class="wrapper">
  <div class="myAnimation"></div>
  <p> !</p>
</div>

body {
  margin: 0;
}

.wrapper {
  display: none;
  padding: 10px;
  border: 1px solid #000;
}

.wrapper.active {
  display: block;
}

.myAnimation {
  display: inline-block;
  width: 247px;
  height: 187px;
  background: url("https://gyazo.com/f5d013014306342a2241f8d3b8fb11ea.png") 50% 50% no-repeat;
}

p {
  display: inline-block;
  width: 150px;
  vertical-align: top;
}

awaitBgImgLoad();
function awaitBgImgLoad() {
  var div = document.querySelector('.myAnimation');
  var src = window.getComputedStyle(div).backgroundImage;
  console.log(src); //     `url("src")` —    
  
  src = src.replace(/url\(|\)|"/g,"")
  loadAndRun(src, onload);
  
  /***/
  
  function onload() {
    console.log(" !");
    document.querySelector('.wrapper').style.display = "block";
  }
}

/*****/

function loadAndRun(src, resolve, reject) {
  var img = new Image();
  img.onload = resolve;
  img.onerror = reject || function(){
    console.log("  " + src)
  };
  img.src = src;
}

<link rel="preload" href=" bigAnimationImg.webP" as="image" />

<img class="animation-image" width="220" height="290" src="bigAnimationImg.webP" loading="eager" alt="animation"/>

.animation-image{
position:absolute;
top:0;
left:calc(-100%+1px);
}

, “” src, background-image . ( img , background-image)
* , , .

Netgame Entertainment .

Netgame Entertainment , .

OPTIMUS PRIME .