एनिमेटेड प्रोटीन एंकर लिंक

लेख में चर्चा की जाएगी कि एनीमेशन के वॉल्यूम तत्वों को वेब पेज से कैसे जोड़ा जाए, और एक ही बार में सब कुछ नहीं तोड़ा जाए।

यदि आप साइटों के विकास में Google पेज स्पीड के प्रदर्शन से बहुत चिंतित हैं, और यह हर अतिरिक्त किलोबाइट के लिए जलता है, तो आपको इस लेख को पढ़ना जारी नहीं रखना चाहिए।

जो बड़े आकार से डरते नहीं हैं, और जोखिम से प्यार करते हैं, मैं कटौती के लिए कहता हूं;)

व्यापार चुनौती

, .
, . .

, , :

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

, , .

बेशक, यह तत्व प्रकृति में सजावटी है, जिसका अर्थ है कि इसे अंतिम ब्राउज़र द्वारा प्रदान किया जाना चाहिए। इसलिए, हम इसे दस्तावेज़ के अंत के करीब रखते हैं। मैं एक बड़ी छवि को लोड करने का प्रभाव भी नहीं देखना चाहता।

इस प्रभाव से बचने के लिए, प्रारंभिक अवस्था में रैपर ब्लॉक को प्रदर्शित करने के लिए सेट करें: कोई नहीं; और केवल जब छवि लोड हो गई है, तो इसे उपयोगकर्ता को दिखाएं। कोड कुछ इस तरह दिखता है।

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