Ligação âncora de proteína animada

O artigo discutirá como conectar elementos de volume de animação a uma página da Web e não interromper tudo de uma vez.

Se você está muito preocupado com o desempenho do Google Page Speed ​​no desenvolvimento de sites, e ele queima para cada kilobyte extra, você não deve continuar lendo este artigo.

Aqueles que não têm medo do tamanho grande, e amam o risco, peço um corte;)

Desafio de negócios

, .
, . .

, , :

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

, , .

Obviamente, esse elemento é decorativo por natureza, o que significa que deve ser renderizado pelo navegador por último. Portanto, o colocamos mais perto do final do documento. Também não quero ver o efeito de carregar uma imagem grande.

Para evitar esse efeito, configure o bloco wrapper no estágio inicial para exibir: none; e somente quando a imagem estiver carregada, mostre-a ao usuário. O código se parece com isso.

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