Git Product home page Git Product logo

gifnope's Introduction

Gifnope

Chrome extension which tries to pause the gifs that nag you. I found it useful when I am reading a document which contains some funny GIFs. By the way, authors: what about not using gifs inside a documents which is supposed to be read?

To pause the GIF(s) you can use one of these options:

  • Use the contextual menu on a gif and select "Pause animation"
  • Use the contextual menu anywhere in the page except on a gif a select "Pause all animations"
  • Press the esc key and then click on the target GIF
  • Press the esc key twice to pause all GIFs in the document

Click on a paused gif to un-pause the animation.

How it works

Unfortunately it's impossible for an extension to natively stop a gif to be rendered or changed at a low level. We can only act via JavaScript on an image which is already in the DOM and do what we can with JavaScript and CSS. The extension will take the target gif, "copy" it over a canvas and then swap the canvas with the picture (hiding the picture in the process). The nice side effect of this operation is that only the first frame of the animated gif will be copied onto the canvas, so that the gif will appear as... paused.

This technique is of course not perfect (gif inside iframes? Nope), but it works pretty well in the majority of the cases.

Written by Claudio Cicali ([email protected]), distributed according to the MIT license.

Follow the author on twitter.

gifnope's People

Contributors

claudioc avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.