Источник

Joonas Lehtinen из IT Mill показал нам, что никогда не стоит делать. В доказательство он решил посмотреть, “возможно ли сделать 3D анимацию на чистом Javascript без Flash, SVG, Canvas или любых других прикольных штучек”.

Вот решение:

• Нарезать картинку на однопиксельные и широкие кусочки
• Вставить все кусочки в html, чтобы не загружать кучу мелких картинок
• Двигать и изменять кусочки для каждого анимационного фрейма, чтобы получился некоторый красивый эффект

Вставляем картинки:

<img id="slice-0" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABACAIAAABUc4oXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAAewwAAHsMBvJeX2gAAACFJREFUCNdj+P//PxMDAwPd8INH75nw2Mnw/ftvBjq6CQDNIw8MeLLR3AAAAABJRU5ErkJggg=="/>

<img id="slice-1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABACAIAAABUc4oXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlvRkZzAAAAAQAAAAAAEXZlawAAAAlwSFlzAAAewwAAHsMBvJeX2gAAAEpJREFUCNdj+P//PxMDAwNN8PsP35lOnn3MdOzUQ6brN18xvXrzlenJs49M+OwUE+Vh4uZiZbI2V2DSUBVluHPvDcO/f/8YaOROAMXBIDUsb8h5AAAAAElFTkSuQmCC"/>

И помещаем их вместе в javascript:

// Draw a frame
        function draw(x) {
                var prevx=0;
                for (i=0;i<384;i++) {
                        var rad = i*3.14/384;
                        var nextx = Math.round((1-Math.cos(rad))*180);
                        var h=Math.round(40+50*Math.sin(rad));
                        var s = document.getElementById("slice-"+((i+x*2)%384));
                        s.height=h;
                        var w = Math.round(nextx-prevx);
                        if (w==0) {
                                s.style.display="none";
                        } else {                
                                s.style.display="block";
                                s.width= w;
                                s.style.top=""+(50-Math.round(h/1.5))+"px";
                                s.style.left=""+(prevx)+"px";
                        }
                        prevx=nextx;
                }
        }

        // Animate the images
        var frame=0;
        function animate() {
                draw(frame++);
                setTimeout("animate()",1);
        }
	
        // Initialize the image slices
        for (i=0;i<384;i++) {
                var s = document.getElementById("slice-"+i);
                s.style.position="absolute";
                s.style.display="none";
        }
        animate();

Потом смотрим на анимацию =)

…и обращаем внимание на загрузку процессора.

Популярность: 20%