Lien d'ancrage protéique animé

L'article expliquera comment connecter des éléments de volume d'animation à une page Web et ne pas tout casser à la fois.

Si vous êtes très préoccupé par les performances de Google Page Speed ​​dans le développement de sites, et qu'il brûle pour chaque kilo-octet supplémentaire, vous ne devriez pas continuer à lire cet article.

Ceux qui n'ont pas peur de la grande taille et aiment le risque, je demande une coupe;)

Défi commercial

, .
, . .

, , :

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

, , .

Bien sûr, cet élément est de nature décorative, ce qui signifie qu'il doit être rendu en dernier par le navigateur. Par conséquent, nous le plaçons plus près de la fin du document. Je ne veux pas non plus voir l'effet du chargement d'une grande image.

Pour éviter cet effet, définissez le bloc wrapper à l'étape initiale pour afficher: aucun; et uniquement lorsque l'image est chargée, montrez-la à l'utilisateur. Le code ressemble à ceci.

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