javascript - How can I play a gif when scrolled into view -
i have here code have 2 events gifs:
- "play gif when click it"
- "play gif when hover cursor on gif".
i want change first event "play gif when click it" "play gif when scrolled view", it's possible ? thanks.
/* * based on: * gifplayer v0.1.0 * (c)2014 rubén torres - rubentdlh@gmail.com * released under mit license */ (function($) { function gapplayer(preview, options) { this.previewelement = preview; this.spinnerelement = $("<div class='spinner'></div>"); this.options = options; this.gifloaded = false; } gapplayer.prototype = { activate: function() { this.wrap(); this.addspinner(); this.addcontrol(); this.addevents(); if (this.options.autoload) { this.playelement.hide(); this.spinnerelement.show(); this.loadgif(); } if (this.options.preload) { (new image()).src = this.getgifsrc(); } }, wrap: function(){ this.wrapper = this.previewelement.wrap("<div class='gapplayer-wrapper'></div>").parent(); this.wrapper.css('width', this.previewelement.width()); this.wrapper.css('height', this.previewelement.height()); this.previewelement.addclass('gapplayer'); this.previewelement.css('cursor','pointer'); }, getgifsrc: function(){ var gifsrc; if (this.previewelement.attr('data-gif')) { gifsrc = this.previewelement.attr('data-gif'); } else { gifsrc = this.previewelement.attr('src').replace(/\.[^/.]+$/, ".gif"); } return gifsrc; }, addcontrol: function(){ this.playelement = $("<ins class='play-gif'>" + this.options.label + "</ins>"); this.playelement.css('left', this.previewelement.width()/2 + this.playelement.width()/2); this.wrapper.append(this.playelement); }, addevents: function() { var onevent = this.options.hover ? 'mouseenter' : 'click', gp = this; gp.playelement.on(onevent, function(e) { $(this).hide(); gp.spinnerelement.show(); gp.loadgif(); e.preventdefault(); e.stoppropagation(); }); gp.previewelement.on(onevent, function(e) { if (gp.playelement.is(':visible')) { gp.playelement.hide(); gp.spinnerelement.show(); gp.loadgif(); } e.preventdefault(); e.stoppropagation(); }); gp.spinnerelement.on(onevent, function(e) { e.preventdefault(); e.stoppropagation(); }); }, loadgif: function() { if (! this.gifloaded) { this.enableabort(); } var gp = this, onevent = gp.options.hover ? 'mouseleave' : 'click', gifsrc = this.getgifsrc(), gifwidth = this.previewelement.width(), gifheight = this.previewelement.height(); gp.gifelement = $("<img src='" + gifsrc + "' width='" + gifwidth + "' height=' "+ gifheight + " '/>"); this.gifelement.load(function() { gp.gifloaded = true; gp.resetevents(); $(this).css({'position': 'absolute', 'top': '0', 'left': '0'}); // start animation if (gp.options.effect) { gp.gifelement.hide(); gp.spinnerelement.hide(); gp.wrapper.append(gp.gifelement); gp.gifelement.stop(true).fadein(function() { gp.previewelement.hide(); }); } else { gp.previewelement.hide(); gp.wrapper.append(gp.gifelement); gp.spinnerelement.hide(); } if (! gp.options.autoload) { $(this).on(onevent, function(e) { // stop animation if (gp.options.effect) { gp.previewelement.show(); gp.playelement.show(); $(this).stop(true).fadeout(); } else { $(this).remove(); gp.previewelement.show(); gp.playelement.show(); } e.preventdefault(); e.stoppropagation(); }); } }); }, enableabort: function() { var gp = this; this.previewelement.click(function(e) { gp.abortloading(e); }); this.spinnerelement.click(function(e) { gp.abortloading(e); }); }, abortloading: function(e) { this.spinnerelement.hide(); this.playelement.show(); e.preventdefault(); e.stoppropagation(); this.gifelement.off('load').on('load', function(ev) { ev.preventdefault(); ev.stoppropagation(); }); this.resetevents(); }, resetevents: function() { this.previewelement.off('click'); this.playelement.off('click'); this.spinnerelement.off('click'); this.addevents(); }, addspinner: function() { this.wrapper.append(this.spinnerelement); this.spinnerelement.hide(); } }; $.fn.gapplayer = function(options) { return this.each(function() { options = $.extend({}, $.fn.gapplayer.defaults, options); var gapplayer = new gapplayer($(this), options); gapplayer.activate(); }); }; $.fn.gapplayer.defaults = { label: 'gif', autoload: false, preload: false, effect: false, hover: false }; // start plugin gapstart(); })(jquery); function gapstart() { if (gapparams.metadata == 'yes') jquery('img[src$="-gap.jpg"]:not([data-gif]):not(.gapplayer),img[src*="-gap.jpg?"]:not([data-gif]):not(.gapplayer)').each(function() { var src = jquery(this).attr('src'); jquery(this).attr('data-gif', src.substring(0, src.length - 8) + '.gif'); }); var gifs = jquery('img[src$="-gap.jpg"]:not(.gapplayer),img[src*="-gap.jpg?"]:not(.gapplayer)'); gifs.imagesloaded(function() { gifs.gapplayer({ autoload: gapparams.autoload == 'yes', preload: gapparams.preload == 'no', effect: gapparams.effect == 'yes', hover: gapparams.hover == 'yes' }); }); }
i think need 2 things
1: gif placeholder image
2: gif source
https://jsfiddle.net/moongod101/v46q7wtv/
this stuff making sticky nav bar too,you need add class , remove class
Comments
Post a Comment