3index.html

<style>
    body {
    }
</style>
<script src="gifuct-js.js"></script>
<script>
    var divider = 2;
    var scale = .5;

    var frames;
    var f = 0;
    var canvas;
    var context;
    var tempCanvas;
    var tempContext;

    var keyframes = [];
    let gradients;

    function render() {
        var frame = frames[f];
        var dims = frame.dims;
	
        if (!canvas) {
            canvas = document.createElement('canvas');
            context = canvas.getContext('2d');
            canvas.width = dims.width;
            canvas.height = dims.height;

            tempCanvas = document.createElement('canvas');
            tempContext = tempCanvas.getContext('2d');
            tempCanvas.width = dims.width;
            tempCanvas.height = dims.height;
        }
	
        var imageData = tempContext.createImageData(dims.width, dims.height);
        imageData.data.set(frame.patch);
        tempContext.putImageData(imageData, 0, 0);

        context.drawImage(tempCanvas, dims.left, dims.top);
    }

    function convert() {
        let imageData = context.getImageData(0, 0, canvas.width, canvas.height);
        gradients = [];

        for (let x = 0; x < canvas.width; x += divider) {
            const colors = [];

            for (let y = 0; y < canvas.height; y += divider) {
                let i = ((y * canvas.width) + x) * 4;

                let r = ('00'+imageData.data[i+0].toString(16)).slice(-2).slice(0,1);
                let g = ('00'+imageData.data[i+1].toString(16)).slice(-2).slice(0,1);
                let b = ('00'+imageData.data[i+2].toString(16)).slice(-2).slice(0,1);

                let rgb = `#${r}${g}${b}`;

                colors.push(rgb);
            }

            let gradient = `linear-gradient(${colors.join(',')})`;
            gradients.push(gradient);
        }

        let percent = Math.floor((f/(frames.length-1))*100);

        let frameCss = percent+'%{background-image:'+gradients.join(',')+'}';
        keyframes.push(frameCss);
    }

    function transcode() {
        frames.forEach((frame, ff) => {
            f = ff;
            render();
            convert();
        });

        let css = `body {\nbackground-size: ${divider}px ${canvas.height}px;\n`;
        /*let width = (divider/canvas.width)*100;
        let css = `body {\nbackground-size: ${width*1.5}% 100%;\n`;*/

        const positions = [];
        for (let x = 0; x < canvas.width; x += divider) {
            positions.push(`${x}px 0px`);
            //positions.push(`${x*width}% 0%`);
        }

        css += 'animation: a 2s linear infinite;\n';
        css += 'height: 100%;\n';
        css += 'background-repeat: no-repeat;\n';
        css += 'background-image: ' + gradients.join(',') + ';\n';
        css += 'background-position: ' + positions.join(',') + ';\n}\n';

        css += ' @keyframes a {' + keyframes.join('\n') + '}';

        console.log(css);
        console.log(css.length / 1024 / 1024);

        const style = document.createElement('style');
        style.innerHTML = css;
        document.head.appendChild(style);
    }

    window.addEventListener('load', () => {
        var oReq = new XMLHttpRequest();
        oReq.open('GET', 'spongebob.gif', true);
        oReq.responseType = "arraybuffer";

        oReq.onload = function (oEvent) {
            var arrayBuffer = oReq.response; // Note: not oReq.responseText
            if (arrayBuffer) {
                gif = new GIF(arrayBuffer);
                frames = gif.decompressFrames(true);
                console.log(frames.length + ' frames');

                transcode();
            }
        };

        oReq.send(null);
    });
</script>