Skip to content

Instantly share code, notes, and snippets.

@huubl
Forked from mrcoles/pause-gifs.css
Created September 24, 2020 10:28
Show Gist options
  • Save huubl/56e38ab79361b9da1bcab109ec9c8fc8 to your computer and use it in GitHub Desktop.
Save huubl/56e38ab79361b9da1bcab109ec9c8fc8 to your computer and use it in GitHub Desktop.
A lightweight approach to pausing gifs on a webpage.
/** .pause-gif */
.wrap-pause-gif {
position: relative;
text-align: center;
}
.pause-gif {
visibility: hidden;
}
.pause-gif.processed {
visibility: visible;
}
.wrap-pause-gif .wrap-canvas {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 1;
transition: opacity .5s ease-in-out;
}
.wrap-pause-gif.show-still .wrap-canvas {
opacity: 0;
}
.wrap-pause-gif img,
.wrap-pause-gif .wrap-canvas canvas {
max-width: 100%;
}
window.PauseGifs = function(contextSelector) {
var d = document;
// supports checks
var supports = {
querySelectorAll: !!d.querySelectorAll,
canvas: (function() {
var elem = d.createElement("canvas");
return !!(elem.getContext && elem.getContext("2d"));
})(),
classList: (function() {
var elem = d.createElement("div");
return !!elem.classList;
})()
};
// gifs
if (supports.querySelectorAll && supports.canvas && supports.classList) {
var query = (contextSelector ? contextSelector + " " : "") + "img.pause-gif";
var elts = d.querySelectorAll(query);
var i = elts.length;
var elt, p;
while (i > 0) {
i--;
elt = elts[i];
p = elt.parentNode;
p.classList.add("wrap-pause-gif");
_asCanvas(elt, _insertCanvas);
}
} else {
try {
var s = d.createElement("style");
s.innerHTML = ".pause-gif { visibility: visible; }";
d.getElementsByTagName("head")[0].appendChild(s);
} catch (e) {}
}
function _insertCanvas(img, canvas) {
_drawTriangle(canvas);
var wrap = d.createElement("span");
wrap.className = "wrap-canvas";
wrap.appendChild(canvas);
img.parentNode.appendChild(wrap);
img.parentNode.addEventListener(
"click",
function() {
this.classList.toggle("show-still");
},
false
);
img.classList.add("processed");
}
function _asCanvas(img, cb) {
var imgObj = new Image();
imgObj.src = img.src;
imgObj.onload = function() {
var c = d.createElement("canvas");
c.width = this.width;
c.height = this.height;
var ctx = c.getContext("2d");
ctx.drawImage(img, 0, 0);
cb(img, c);
};
}
function _drawTriangle(canvas) {
var w = canvas.width;
var h = canvas.height;
var dim = 20;
dim = Math.min(dim, w / 2 - 5, h / 2 - 5);
var ctx = canvas.getContext("2d");
ctx.save();
ctx.fillStyle = "rgba(255, 255, 255, .85)";
ctx.beginPath();
ctx.moveTo(w / 2 - dim * 0.7, h / 2 - dim);
ctx.lineTo(w / 2 - dim * 0.7, h / 2 + dim);
ctx.lineTo(w / 2 + dim, h / 2);
ctx.closePath();
ctx.fill();
ctx.restore();
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment