add anime+boucleproj
This commit is contained in:
Executable
+223
@@ -0,0 +1,223 @@
|
||||
(function( $ ) {
|
||||
|
||||
$.fn.blockScroll = function(options) {
|
||||
var settings = $.extend({
|
||||
// These are the defaults.
|
||||
startDiv : 1,
|
||||
fadeDuration : "slow",
|
||||
paddingRatio : 0.05,
|
||||
triggerRatio : 0.005,
|
||||
scrollDuration: "fast",
|
||||
fadeBlocks: true
|
||||
}, options );
|
||||
|
||||
if(settings.triggerRatio > settings.paddingRatio*.95) { settings.triggerRatio = settings.paddingRatio*.95 }
|
||||
|
||||
var theDivs = this.children().filter("div");
|
||||
var activeDiv = settings.startDiv-1; //Active did is 0-index, settings is 1-index
|
||||
var windowHeight;
|
||||
var paddingHeight;
|
||||
var triggerHeight;
|
||||
var currentDownTrigger;
|
||||
var currentUpTrigger;
|
||||
var totalDivs = theDivs.length;
|
||||
var lastScrollPos;
|
||||
var activelyScrolling = false;
|
||||
var activeBackground= 0;
|
||||
|
||||
// Ensure that all of the elements are hidden just in case the css is not setup properly
|
||||
if(settings.fadeBlocks)
|
||||
{
|
||||
this.children().each(function() {
|
||||
$(this).css('opacity','0');
|
||||
});
|
||||
}
|
||||
|
||||
arrange();
|
||||
// Fade in the first div
|
||||
$(theDivs[activeDiv]).animate({opacity: 1},settings.fadeDuration,'linear', function() {
|
||||
$(window).scrollTop(0);
|
||||
calcTriggers();
|
||||
bindEvents();
|
||||
lastScrollPos = $(window).scrollTop();
|
||||
});
|
||||
|
||||
function bindEvents()
|
||||
{
|
||||
$(window).on('scroll', function(e) {
|
||||
var scrollPosition = $(window).scrollTop();
|
||||
var scrollDistance = $(window).height();
|
||||
var indexOfClosest = 0;
|
||||
|
||||
theDivs.each(function(index, element) {
|
||||
var $this = $(this);
|
||||
var topPosition = $this.offset().top;
|
||||
var newScrollDistance = Math.abs(scrollPosition - topPosition);
|
||||
if(newScrollDistance < scrollDistance)
|
||||
{
|
||||
indexOfClosest = index;
|
||||
scrollDistance = newScrollDistance;
|
||||
}
|
||||
});
|
||||
gotoDiv(indexOfClosest);
|
||||
}, 250);
|
||||
|
||||
$(window).resize(function() {
|
||||
arrange();
|
||||
});
|
||||
|
||||
$("#block-up-arrow").click(function() {
|
||||
goUp();
|
||||
});
|
||||
|
||||
$("#block-down-arrow").click(function() {
|
||||
goDown();
|
||||
});
|
||||
|
||||
$(document).keydown(function(e){
|
||||
if (e.keyCode == 37 || e.keyCode == 38) {
|
||||
goUp();
|
||||
return false;
|
||||
}
|
||||
|
||||
if (e.keyCode == 39 || e.keyCode == 40) {
|
||||
goDown();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
$(window).bind('mousewheel', function(e){
|
||||
if(e.originalEvent.wheelDelta > 119) {
|
||||
goUp();
|
||||
}
|
||||
else if (e.originalEvent.wheelDelta < -119) {
|
||||
goDown();
|
||||
}
|
||||
});
|
||||
$(window).bind('DOMMouseScroll', function(e){
|
||||
if(e.originalEvent.detail < 0) {
|
||||
goUp();
|
||||
}
|
||||
else if (e.originalEvent.detail > 0) {
|
||||
goDown();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function goUp()
|
||||
{
|
||||
if(activeDiv > 0 && !activelyScrolling)
|
||||
{
|
||||
gotoDiv(activeDiv-1);
|
||||
}
|
||||
}
|
||||
|
||||
function goDown()
|
||||
{
|
||||
if(activeDiv < totalDivs - 1 && !activelyScrolling)
|
||||
{
|
||||
gotoDiv(activeDiv+1);
|
||||
}
|
||||
}
|
||||
|
||||
function gotoDiv(number)
|
||||
{
|
||||
if(number == 0)
|
||||
$("#block-up-arrow").hide();
|
||||
else
|
||||
$("#block-up-arrow").show();
|
||||
if(number == totalDivs-1)
|
||||
$("#block-down-arrow").hide();
|
||||
else
|
||||
$("#block-down-arrow").show();
|
||||
activeDiv = number;
|
||||
activelyScrolling = true;
|
||||
$('html, body').animate({scrollTop: $(theDivs[activeDiv]).offset().top}, settings.scrollDuration, 'linear', function() {
|
||||
$(theDivs[activeDiv]).animate({opacity: 1}, settings.fadeDuration,'linear', function() {
|
||||
setTimeout(function(){
|
||||
activelyScrolling = false; lastScrollPos = $(window).scrollTop();
|
||||
},50);
|
||||
});
|
||||
});
|
||||
calcTriggers();
|
||||
}
|
||||
|
||||
function calcTriggers()
|
||||
{
|
||||
if (activeDiv < totalDivs -1)
|
||||
{
|
||||
currentDownTrigger = $(theDivs[activeDiv+1]).offset().top;
|
||||
} else {
|
||||
currentDownTrigger = -1;
|
||||
}
|
||||
|
||||
if (activeDiv > 0) {
|
||||
currentUpTrigger = $(theDivs[activeDiv-1]).offset().top;
|
||||
} else {
|
||||
currentUpTrigger = -1;
|
||||
}
|
||||
}
|
||||
|
||||
function calcDims()
|
||||
{
|
||||
windowHeight = $(window).height();
|
||||
paddingHeight = windowHeight * settings.paddingRatio;
|
||||
triggerHeight = windowHeight * settings.triggerRatio;
|
||||
}
|
||||
|
||||
|
||||
function arrange()
|
||||
{
|
||||
calcDims();
|
||||
theDivs.each(function(index, element) {
|
||||
var $this = $(this);
|
||||
$this.height('auto');
|
||||
if($this.height() < windowHeight)
|
||||
{
|
||||
var margin = windowHeight/2 - $this.height()/2;
|
||||
$this.height(windowHeight-margin);
|
||||
$this.css('padding-top', margin + "px");
|
||||
var $innerDiv = $($this.children().filter('div')[0]);
|
||||
// $innerDiv.css('padding-top', margin + "px");
|
||||
}
|
||||
if(index != totalDivs - 1)
|
||||
{
|
||||
//$this.css('padding-bottom',paddingHeight + 'px');
|
||||
}
|
||||
});
|
||||
gotoDiv(activeDiv);
|
||||
}
|
||||
|
||||
var gotoView = function(number)
|
||||
{
|
||||
gotoDiv(number-1);
|
||||
}
|
||||
|
||||
return {
|
||||
goto: gotoView
|
||||
};
|
||||
}
|
||||
|
||||
}( jQuery ));
|
||||
|
||||
;(function ($) {
|
||||
var on = $.fn.on, timer;
|
||||
$.fn.on = function () {
|
||||
var args = Array.apply(null, arguments);
|
||||
var last = args[args.length - 1];
|
||||
|
||||
if (isNaN(last) || (last === 1 && args.pop())) return on.apply(this, args);
|
||||
|
||||
var delay = args.pop();
|
||||
var fn = args.pop();
|
||||
|
||||
args.push(function () {
|
||||
var self = this, params = arguments;
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(function () {
|
||||
fn.apply(self, params);
|
||||
}, delay);
|
||||
});
|
||||
|
||||
return on.apply(this, args);
|
||||
};
|
||||
}(this.jQuery || this.Zepto));
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
|
||||
/*!
|
||||
* jQuery Mousewheel 3.1.13
|
||||
*
|
||||
* Copyright 2015 jQuery Foundation and other contributors
|
||||
* Released under the MIT license.
|
||||
* http://jquery.org/license
|
||||
*/
|
||||
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.12",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});
|
||||
@@ -0,0 +1,97 @@
|
||||
(function($){
|
||||
'use strict';
|
||||
$.fn.multipleFilterMasonry = function(options){
|
||||
var cache=[];
|
||||
var filters = [];
|
||||
|
||||
if(options.selectorType === 'list') {
|
||||
$(options.filtersGroupSelector).children().each(function() {
|
||||
filters.push($(this).data('filter'));
|
||||
});
|
||||
}
|
||||
|
||||
//the main job of the function is to cache the item,because we are going to filter the items later
|
||||
var init = function($container){
|
||||
$container.find(options.itemSelector).each(function(){
|
||||
cache.push($(this));
|
||||
});
|
||||
$container.masonry(options);
|
||||
};
|
||||
|
||||
//filter items in cache
|
||||
var filterItems = function(selector){
|
||||
var result=[];
|
||||
$(cache).each(function(item){
|
||||
$(selector).each(function(index,sel) {
|
||||
if(cache[item].is(sel)){
|
||||
if($.inArray(cache[item], result) === -1) result.push(cache[item]);
|
||||
}
|
||||
});
|
||||
});
|
||||
return result;
|
||||
};
|
||||
|
||||
//reload masonry
|
||||
var reload = function($container,items){
|
||||
$container.empty();
|
||||
$(items).each(function(){
|
||||
$($container).append($(this));
|
||||
});
|
||||
$container.masonry('reloadItems');
|
||||
$container.masonry();
|
||||
};
|
||||
|
||||
// Hash filter
|
||||
var hashFilter = function($container) {
|
||||
var hash = window.location.hash.replace("#", "");
|
||||
if($.inArray(hash, filters) !== -1) {
|
||||
reload($container, $('.' + hash));
|
||||
}
|
||||
};
|
||||
|
||||
var proc = function($container){
|
||||
$(options.filtersGroupSelector).find('input[type=checkbox]').each(function(){
|
||||
$(this).change(function(){
|
||||
var selector = [];
|
||||
$(options.filtersGroupSelector).find('input[type=checkbox]').each( function() {
|
||||
if ( $(this).is(':checked') ) {
|
||||
selector.push( '.' + $(this).val() );
|
||||
}
|
||||
});
|
||||
var items = cache;
|
||||
if (selector.length > 0) {
|
||||
items = filterItems(selector);
|
||||
}
|
||||
reload($container,items);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
var procUL = function($container){
|
||||
$(options.filtersGroupSelector).children().each(function(){
|
||||
$(this).click(function(){
|
||||
$(options.filtersGroupSelector).children().removeClass('selected');
|
||||
window.location.hash = $(this).data('filter');
|
||||
var selector = [];
|
||||
selector.push( '.' + $(this).data('filter') );
|
||||
$(this).addClass('selected');
|
||||
var items = cache;
|
||||
if (selector.length > 0) {
|
||||
items = filterItems(selector);
|
||||
}
|
||||
reload($container,items);
|
||||
});
|
||||
});
|
||||
|
||||
hashFilter($container);
|
||||
$(options.filtersGroupSelector).children().removeClass('selected');
|
||||
$('.filters li[data-filter='+window.location.hash.replace("#", "")+']').addClass('selected');
|
||||
};
|
||||
|
||||
return this.each(function() {
|
||||
var $$ = $(this);
|
||||
init($$);
|
||||
options.selectorType === 'list' ? procUL($$) : proc($$);
|
||||
});
|
||||
};
|
||||
}(window.jQuery));
|
||||
@@ -4,128 +4,97 @@ var $cat = $('.cat-list .cat a');
|
||||
var $img = $('.item #items .img');
|
||||
|
||||
function masonry() {
|
||||
var $grid = $cards.masonry({
|
||||
itemSelector: '.card',
|
||||
columnWidth: '.card',
|
||||
percentPosition: true,
|
||||
transitionDuration: '0.2s'
|
||||
});
|
||||
var $grid = $cards.masonry({
|
||||
itemSelector: '.card',
|
||||
columnWidth: '.card',
|
||||
percentPosition: true,
|
||||
gutter: 10,
|
||||
transitionDuration: '0.2s'
|
||||
});
|
||||
var $grid2 = $img.masonry({
|
||||
itemSelector: '.img-card',
|
||||
columnWidth: '.img-card',
|
||||
percentPosition: true,
|
||||
gutter: 10,
|
||||
transitionDuration: '0.2s'
|
||||
});
|
||||
$grid.imagesLoaded().progress(function() {
|
||||
$grid.masonry();
|
||||
});
|
||||
$grid2.imagesLoaded().progress(function() {
|
||||
$grid2.masonry();
|
||||
});
|
||||
}
|
||||
|
||||
var $grid2 = $img.masonry({
|
||||
itemSelector: '.img-card',
|
||||
columnWidth: '.img-card',
|
||||
percentPosition: true,
|
||||
gutter: 20,
|
||||
transitionDuration: '0.2s'
|
||||
});
|
||||
function filteritem() {
|
||||
var $container = $('#masonryContainer');
|
||||
|
||||
$grid.imagesLoaded().progress( function() {
|
||||
$grid.masonry();
|
||||
});
|
||||
|
||||
$grid2.imagesLoaded().progress( function() {
|
||||
$grid2.masonry();
|
||||
});
|
||||
$cards.multipleFilterMasonry({
|
||||
itemSelector: '.card',
|
||||
filtersGroupSelector: '.cat-list'
|
||||
});
|
||||
}
|
||||
|
||||
function contact() {
|
||||
var $contact = $('header .contact');
|
||||
var $contact = $('header .contact');
|
||||
|
||||
$contact.on('click', function() {
|
||||
if ($(this).hasClass('open')) {
|
||||
$(this).removeClass('open');
|
||||
$(this).addClass('close');
|
||||
} else {
|
||||
$(this).addClass('open');
|
||||
$(this).removeClass('close');
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function customscroll() {
|
||||
var $page = $('#page-wrapper.blog')
|
||||
var $page_item = $("body.blog #start, body.item");
|
||||
|
||||
$("body").mCustomScrollbar({
|
||||
theme: "dark",
|
||||
scrollbarPosition: "outside",
|
||||
callbacks: {
|
||||
whileScrolling: function() {
|
||||
var pct = this.mcs.topPct;
|
||||
if (pct < 1) {
|
||||
$page.addClass("up");
|
||||
$page.removeClass("down");
|
||||
} else {
|
||||
$page.removeClass("up");
|
||||
$page.addClass("down")
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$page_item.mCustomScrollbar({
|
||||
theme: "dark",
|
||||
scrollbarPosition: "outside",
|
||||
scrollInertia: 1000,
|
||||
});
|
||||
}
|
||||
|
||||
function scrolltop() {
|
||||
var $top = $('.top');
|
||||
|
||||
$top.on('click', function(e) {
|
||||
// e.preventDefault()
|
||||
|
||||
$contact.on('click',function() {
|
||||
if ($(this).hasClass('open')) {
|
||||
$(this).removeClass('open');
|
||||
$(this).addClass('close');
|
||||
} else {
|
||||
$(this).addClass('open');
|
||||
$(this).removeClass('close');
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function scroll() {
|
||||
// left: 37, up: 38, right: 39, down: 40,
|
||||
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
|
||||
if ($('#page-wrapper.blog').length > 0){
|
||||
jQuery(document).ready(function($) {
|
||||
masonry();
|
||||
filteritem();
|
||||
contact();
|
||||
customscroll();
|
||||
// scrolltop();
|
||||
|
||||
$(window).bind('mousewheel DOMMouseScroll', function(event){
|
||||
var $height = $(window).scrollTop();
|
||||
var $heightW = $(window).height();
|
||||
var wh = $heightW - $height;
|
||||
|
||||
var keys = {32: 1, 37: 1, 38: 1, 39: 1, 40: 1};
|
||||
|
||||
function preventDefault(e) {
|
||||
e = e || window.event;
|
||||
if (e.preventDefault)
|
||||
e.preventDefault();
|
||||
e.returnValue = false;
|
||||
}
|
||||
|
||||
function preventDefaultForScrollKeys(e) {
|
||||
if (keys[e.keyCode]) {
|
||||
preventDefault(e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function disablescroll() {
|
||||
if (window.addEventListener) // older FF
|
||||
window.addEventListener('DOMMouseScroll', preventDefault, false);
|
||||
window.onwheel = preventDefault; // modern standard
|
||||
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
|
||||
window.ontouchmove = preventDefault; // mobile
|
||||
document.ontouchmove = function(e) {
|
||||
var target = e.currentTarget;
|
||||
while(target) {
|
||||
if(checkIfElementShouldScroll(target))
|
||||
return;
|
||||
target = target.parentNode;
|
||||
}
|
||||
e.preventDefault();
|
||||
};
|
||||
document.onkeydown = preventDefaultForScrollKeys;
|
||||
}
|
||||
|
||||
function enableScroll() {
|
||||
if (window.removeEventListener)
|
||||
window.removeEventListener('DOMMouseScroll', preventDefault, false);
|
||||
window.onmousewheel = document.onmousewheel = null;
|
||||
window.onwheel = null;
|
||||
window.ontouchmove = null;
|
||||
document.onkeydown = null;
|
||||
var aTag = $("#start");
|
||||
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
|
||||
}
|
||||
|
||||
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
|
||||
if (wh > 0) {
|
||||
console.log('up');
|
||||
$('.blog header').removeClass('hide');
|
||||
$('.blog #start').removeClass('visible');
|
||||
// disablescroll();
|
||||
// setTimeout(enableScroll, 500);
|
||||
$('.blog #start #items').removeClass('fixed');
|
||||
}
|
||||
}else {
|
||||
if (wh > 0) {
|
||||
console.log('down');
|
||||
$('.blog header').addClass('hide');
|
||||
$('.blog #start').addClass('visible');
|
||||
disablescroll();
|
||||
setTimeout(enableScroll, 500);
|
||||
$('.blog #start #items').addClass('fixed');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
jQuery(document).ready(function($){
|
||||
masonry();
|
||||
contact();
|
||||
scroll();
|
||||
$(window).load(function(){
|
||||
$('html, body').scrollTop(0);
|
||||
});
|
||||
// $(window).load(function() {
|
||||
// $('html, body').scrollTop(0);
|
||||
// });
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user