|
After Width: | Height: | Size: 103 KiB |
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 506 B |
|
After Width: | Height: | Size: 104 KiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 409 KiB |
|
After Width: | Height: | Size: 434 KiB |
@ -0,0 +1 @@ |
|||||
|
(function webpackUniversalModuleDefinition(root,factory){if(typeof exports==="object"&&typeof module==="object")module.exports=factory();else if(typeof define==="function"&&define.amd)define("Gifffer",[],factory);else if(typeof exports==="object")exports["Gifffer"]=factory();else root["Gifffer"]=factory()})(this,function(){var d=document;var playSize=60;var Gifffer=function(){var images,i=0;images=d.querySelectorAll("[data-gifffer]");for(;i<images.length;++i)process(images[i])};function formatUnit(v){return v+(v.toString().indexOf("%")>0?"":"px")}function createContainer(w,h,el){var con=d.createElement("DIV");var cls=el.getAttribute("class");var id=el.getAttribute("id");cls?con.setAttribute("class",el.getAttribute("class")):null;id?con.setAttribute("id",el.getAttribute("id")):null;con.setAttribute("style","position:relative;cursor:pointer;");var play=d.createElement("DIV");play.setAttribute("class","gifffer-play-button");play.setAttribute("style","width:"+playSize+"px;height:"+playSize+"px;border-radius:"+playSize/2+"px;background:rgba(0, 0, 0, 0.3);position:absolute;");var trngl=d.createElement("DIV");trngl.setAttribute("style","width:0;height: 0;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:14px solid rgba(0, 0, 0, 0.5);position:absolute;left:26px;top:16px;");play.appendChild(trngl);con.appendChild(play);el.parentNode.replaceChild(con,el);return{c:con,p:play}}function calculatePercentageDim(el,w,h,wOrig,hOrig){var parentDimW=el.parentNode.offsetWidth;var parentDimH=el.parentNode.offsetHeight;var ratio=wOrig/hOrig;if(w.toString().indexOf("%")>0){w=parseInt(w.toString().replace("%",""));w=w/100*parentDimW;h=w/ratio}return{w:w,h:h}}function process(el){var url,con,c,w,h,duration,play,gif,playing=false,cc,isC,durationTimeout,dims;url=el.getAttribute("data-gifffer");w=el.getAttribute("data-gifffer-width");h=el.getAttribute("data-gifffer-height");duration=el.getAttribute("data-gifffer-duration");el.style.display="block";c=document.createElement("canvas");isC=!!(c.getContext&&c.getContext("2d"));if(w&&h&&isC)cc=createContainer(w,h,el);el.onload=function(){if(!isC)return;w=w||el.width;h=h||el.height;if(!cc)cc=createContainer(w,h,el);con=cc.c;play=cc.p;dims=calculatePercentageDim(con,w,h,el.width,el.height);con.addEventListener("click",function(){clearTimeout(durationTimeout);if(!playing){playing=true;gif=document.createElement("IMG");gif.setAttribute("style","width:"+dims.w+"px;height:"+dims.h+"px;");gif.setAttribute("data-uri",Math.floor(Math.random()*1e5)+1);setTimeout(function(){gif.src=url},0);con.removeChild(play);con.removeChild(c);con.appendChild(gif);if(parseInt(duration)>0){durationTimeout=setTimeout(function(){playing=false;con.appendChild(play);con.removeChild(gif);con.appendChild(c);gif=null},duration)}}else{playing=false;con.appendChild(play);con.removeChild(gif);con.appendChild(c);gif=null}});c.width=dims.w;c.height=dims.h;c.getContext("2d").drawImage(el,0,0,dims.w,dims.h);con.appendChild(c);play.style.top=dims.h/2-playSize/2+"px";play.style.left=dims.w/2-playSize/2+"px";con.setAttribute("style","position:relative;cursor:pointer;width:"+dims.w+"px;height:"+dims.h+"px;")};el.src=url}return Gifffer}); |
||||
@ -0,0 +1,30 @@ |
|||||
|
$(document).ready(function(){ |
||||
|
var aniEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; |
||||
|
var $header = $('section.page-header'); |
||||
|
var viewportH = $(window).height(); |
||||
|
$header.css('min-height', viewportH); |
||||
|
//$('#yourElement').one(aniEnd, doSomething);
|
||||
|
//
|
||||
|
var $win = $(window); |
||||
|
var $els = $('.fadeInBlock'); |
||||
|
|
||||
|
$win.scroll( function(){ |
||||
|
var winH = $win.height(); |
||||
|
var winScrollT = $win.scrollTop(); |
||||
|
var winBtm = winScrollT + winH; |
||||
|
$els.each( function(i){ |
||||
|
var $el = $(this); |
||||
|
if(!$el.hasClass('animated')){ |
||||
|
var $elH = $el.outerHeight(); |
||||
|
var elTopPos = $el.offset().top; |
||||
|
var elBtm = elTopPos + $elH; |
||||
|
if( winBtm >= (elTopPos + $elH/4) ){ |
||||
|
$el.addClass('animated fadeIn');//fadeIn fadeInUp zoomIn
|
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
$win.trigger('scroll'); |
||||
|
Gifffer(); |
||||
|
}) |
||||