
freezeframe.js is a fancy touch-enabled jQuery GIF player which allows to manually play an animated GIF frame by frame with custom trigger events/elements. Supports responsive images and mobile touch events. Heavily based on Html5 Canvas
technique.
Basic Usage:
1. First you need to load the latest version of jQuery JavaScript library in the html document.
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
2. Then load the jQuery freezeframe.js plugin's JavaScript and CSS in the document. Note that the freezeframe.min.js
must be loaded after jQuery library.
<link rel="stylesheet" href="freezeframe_styles.min.css"> <script src="freezeframe.min.js"></script>
3. Just call the function on the GIF's parent container and done. By default, the plugin will pause the GIF and play it on mouse hover.
$('.selector').freezeframe();
4. Default plugin options.
$('.selector').freezeframe({ // The selector freezeframe will use to search for .gifs when the capture() function is run (if no custom selector is passed to the capture() function). selector : '.freezeframe', // The number of milliseconds a .gif will animate for when triggered by click / touch event. animation_play_duration: 5000, // 'hover' or 'click' non_touch_device_trigger_event: 'hover' });
2018-05-22
- v3.0.9: fixed overlay class toggle issue
2016-05-04
- v3.0.8
This awesome jQuery plugin is developed by ctrl-freaks. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 22.05.2018
- Source