Tautan jangkar protein animasi

Artikel ini akan membahas cara menghubungkan elemen volume animasi ke halaman web, dan tidak memecah semuanya sekaligus.

Jika Anda sangat khawatir tentang kinerja Google Page Speed ​​dalam pengembangan situs, dan membakar untuk setiap kilobyte tambahan, Anda tidak harus terus membaca artikel ini.

Mereka yang tidak takut dengan ukuran besar, dan suka risikonya, saya minta potongan;)

Tantangan bisnis

, .
, . .

, , :

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

, , .

Tentu saja, elemen ini bersifat dekoratif, yang berarti harus diberikan oleh browser terakhir. Karena itu, kami menempatkannya lebih dekat ke akhir dokumen. Saya juga tidak ingin melihat efek memuat gambar yang besar.

Untuk menghindari efek ini, atur blok pembungkus pada tahap awal untuk menampilkan: tidak ada; dan hanya ketika gambar telah dimuat, perlihatkan ke pengguna. Kode terlihat seperti ini.

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