|
paper.install(window);
paper.setup('myCanvas1');
var SSection, Sections, gui, h, mwheel, onFrame, windowHeight, _base, _ref;
Path.prototype.setWidth = function(width) {
this.segments[3].point.x = this.segments[0].point.x + width;
return this.segments[2].point.x = this.segments[1].point.x + width;
};
Path.prototype.setHeight = function(height) {
this.segments[1].point.y = this.segments[0].point.y + height;
return this.segments[2].point.y = this.segments[3].point.y + height;
};
Path.prototype.reset = function() {
this.setWidth(0);
this.setHeight(0);
return this.smooth();
};
h = {
getRand: function(min, max) {
return Math.floor((Math.random() * ((max + 1) - min)) + min);
}
};
window.PaperSections = {
$container: $('#wrapper'),
i: 0,
next: 0,
prev: 0,
scrollSpeed: 0,
timeOut: null,
invertScroll: true,
currSection: -1
};
window.PaperSections.ff = typeof InstallTrigger !== 'undefined';
window.PaperSections.win = navigator.appVersion.indexOf("Win") !== -1;
windowHeight = $(window).outerHeight();
window.PaperSections.$canvas = $(view.canvas);
window.PaperSections.data = window.PaperSections.$canvas.data();
window.PaperSections.data.colors = window.PaperSections.data.colors.split(':');
if ((_ref = (_base = window.PaperSections.data).sectionscount) == null) {
_base.sectionscount = window.PaperSections.data.colors.length;
}
view.setViewSize(window.PaperSections.$container.outerWidth(), window.PaperSections.data.sectionheight * window.PaperSections.data.sectionscount);
window.PaperSections.data.sectionheight = parseInt(window.PaperSections.data.sectionheight);
window.PaperSections.$content = $("#" + window.PaperSections.data.contentid);
window.PaperSections.$sections = window.PaperSections.$content.children();
window.PaperSections.slice = function(val, max) {
if (val > 0 && val > max) {
return Math.min(val, max);
}
if (val < 0 && val < max) {
return Math.max(val, -max);
}
return val;
};
SSection = (function() {
function SSection(o) {
this.o = o;
this.w = view.size.width;
this.h = view.size.height;
this.ph = 60;
this.sh = this.procent(this.h, this.ph);
this.wh = 1 * this.w;
this.scrollSpeed = 0;
this.gapSize = this.procent(this.h, (100 - this.ph) / 2);
this.colors = ['#69d2e7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900'];
this.twns = [];
this.getPrefix();
this.makeBase();
this.listenToStop();
}
SSection.prototype.getPrefix = function() {
var pre, styles;
styles = window.getComputedStyle(document.documentElement, "");
pre = (Array.prototype.slice.call(styles).join("").match(/-(moz|webkit|ms)-/) || (styles.OLink === "" && ["", "o"]))[1];
this.prefix = "-" + pre + "-";
return this.transformPrefix = "" + this.prefix + "transform";
};
SSection.prototype.listenToStop = function() {
var _this = this;
window.PaperSections.$container.on('scroll', function() {
window.PaperSections.stop = false;
_this.poped = false;
return TWEEN.removeAll();
});
return window.PaperSections.$container.on('stopScroll', function() {
var duration;
window.PaperSections.stop = true;
duration = window.PaperSections.slice(Math.abs(window.PaperSections.scrollSpeed * 25), 1400) || 3000;
_this.translatePointY({
point: _this.base.segments[1].handleOut,
to: 0,
duration: duration
}).then(function() {
return window.PaperSections.scrollSpeed = 0;
});
return _this.translatePointY({
point: _this.base.segments[3].handleOut,
to: 0,
duration: duration
});
});
};
SSection.prototype.translateLine = function(o) {
var dfr, it, mTW,
_this = this;
dfr = new $.Deferred;
mTW = new TWEEN.Tween(new Point(o.point)).to(new Point(o.to), o.duration);
mTW.easing(o.easing || TWEEN.Easing.Elastic.Out);
it = this;
mTW.onUpdate(o.onUpdate || function(a) {
var _ref1;
o.point.y = this.y;
return (_ref1 = o.point2) != null ? _ref1.y = this.y : void 0;
});
mTW.onComplete(function() {
return dfr.resolve();
});
mTW.start();
return dfr.promise();
};
SSection.prototype.notListenToStop = function() {
window.PaperSections.$container.off('stopScroll');
return window.PaperSections.$container.off('scroll');
};
SSection.prototype.translatePointY = function(o) {
var dfr, it, mTW,
_this = this;
dfr = new $.Deferred;
mTW = new TWEEN.Tween(new Point(o.point)).to(new Point(o.to), o.duration);
mTW.easing(o.easing || TWEEN.Easing.Elastic.Out);
it = this;
mTW.onUpdate(o.onUpdate || function(a) {
o.point.y = this.y;
!it.poped && window.PaperSections.$content.attr('style', "" + it.transformPrefix + ": translate3d(0," + (this.y / 2) + "px,0);transform: translate3d(0," + (this.y / 2) + "px,0);");
return (it.poped && !it.popedCenter) && window.PaperSections.$sections.eq(it.index).attr('style', "" + it.transformPrefix + ": translate3d(0," + (this.y / 2) + "px,0);transform: translate3d(0," + (this.y / 2) + "px,0);");
});
mTW.onComplete(function() {
return dfr.resolve();
});
mTW.start();
return dfr.promise();
};
SSection.prototype.makeBase = function() {
this.base = new Path.Rectangle(new Point(0, this.o.offset), [this.wh, this.o.height]);
return this.base.fillColor = this.o.color;
};
SSection.prototype.toppie = function(amount) {
this.base.segments[1].handleOut.y = amount;
return this.base.segments[1].handleOut.x = this.wh / 2;
};
SSection.prototype.bottie = function(amount) {
this.base.segments[3].handleOut.y = amount;
return this.base.segments[3].handleOut.x = -this.wh / 2;
};
SSection.prototype.createPath = function(o) {
var path;
path = new Path(o.points);
o.flatten && path.flatten(o.flatten);
path.fillColor = o.fillColor || 'transparent';
return path;
};
SSection.prototype.update = function() {
if (!window.PaperSections.stop && !this.poped) {
this.toppie(window.PaperSections.scrollSpeed);
this.bottie(window.PaperSections.scrollSpeed);
window.PaperSections.$content.attr('style', "" + this.transformPrefix + ": translate3d(0," + (window.PaperSections.scrollSpeed / 2) + "px,0);transform: translate3d(0," + (window.PaperSections.scrollSpeed / 2) + "px,0);");
}
return TWEEN.update();
};
SSection.prototype.procent = function(base, percents) {
return (base / 100) * percents;
};
SSection.prototype.pop = function() {
var _this = this;
this.poped = true;
this.popedCenter = true;
this.translatePointY({
point: this.base.segments[1].handleOut,
to: -window.PaperSections.data.sectionheight / 1.75,
duration: 100,
easing: TWEEN.Easing.Linear.None
}).then(function() {
_this.translatePointY({
point: _this.base.segments[1].handleOut,
to: 0
}).then(function() {});
return _this.translatePointY({
point: _this.base.segments[3].handleOut,
to: 0
});
});
return this.translatePointY({
point: this.base.segments[3].handleOut,
to: window.PaperSections.data.sectionheight / 1.75,
duration: 100,
easing: TWEEN.Easing.Linear.None
});
};
SSection.prototype.popUP = function() {
var _this = this;
this.poped = true;
this.popedCenter = false;
this.translatePointY({
point: this.base.segments[1].handleOut,
to: -window.PaperSections.data.sectionheight / 1.75,
duration: 100,
easing: TWEEN.Easing.Linear.None
}).then(function() {
_this.translatePointY({
point: _this.base.segments[1].handleOut,
to: 0
}).then(function() {});
return _this.translatePointY({
point: _this.base.segments[3].handleOut,
to: 0
});
});
return this.translatePointY({
point: this.base.segments[3].handleOut,
to: -window.PaperSections.data.sectionheight / 1.75,
duration: 100,
easing: TWEEN.Easing.Linear.None
});
};
SSection.prototype.popDOWN = function() {
var _this = this;
this.poped = true;
this.popedCenter = false;
this.translatePointY({
point: this.base.segments[1].handleOut,
to: window.PaperSections.data.sectionheight / 1.75,
duration: 100,
easing: TWEEN.Easing.Linear.None
}).then(function() {
_this.translatePointY({
point: _this.base.segments[1].handleOut,
to: 0
}).then(function() {});
return _this.translatePointY({
point: _this.base.segments[3].handleOut,
to: 0
});
});
return this.translatePointY({
point: this.base.segments[3].handleOut,
to: window.PaperSections.data.sectionheight / 1.75,
duration: 100,
easing: TWEEN.Easing.Linear.None
});
};
return SSection;
})();
Sections = (function() {
function Sections() {
var i, section, _i, _ref1, _ref2;
if ((_ref1 = this.contents) == null) {
this.contents = [];
}
for (i = _i = _ref2 = window.PaperSections.data.sectionscount; _ref2 <= 0 ? _i <= 0 : _i >= 0; i = _ref2 <= 0 ? ++_i : --_i) {
section = new SSection({
offset: (i * window.PaperSections.data.sectionheight) - 5,
height: window.PaperSections.data.sectionheight + 5,
color: window.PaperSections.data.colors[i]
});
section.index = i;
this.contents.push(section);
}
$(window).trigger('menu:ready');
}
Sections.prototype.update = function() {
var i, it, _i, _len, _ref1, _results;
_ref1 = this.contents;
_results = [];
for (i = _i = 0, _len = _ref1.length; _i < _len; i = ++_i) {
it = _ref1[i];
_results.push(it.update());
}
return _results;
};
Sections.prototype.popSection = function(n) {
var i, _i, _ref1, _results;
TWEEN.removeAll();
_results = [];
for (i = _i = _ref1 = this.contents.length - 1; _ref1 <= 0 ? _i <= 0 : _i >= 0; i = _ref1 <= 0 ? ++_i : --_i) {
if (i > this.contents.length - n - 1) {
this.contents[i].popUP();
}
if (this.contents.length - n - 1 === i) {
this.contents[i].pop();
}
if (i < this.contents.length - n - 1) {
_results.push(this.contents[i].popDOWN());
} else {
_results.push(void 0);
}
}
return _results;
};
Sections.prototype.teardown = function() {
var i, _i, _ref1, _results;
_results = [];
for (i = _i = _ref1 = this.contents.length - 1; _ref1 <= 0 ? _i <= 0 : _i >= 0; i = _ref1 <= 0 ? ++_i : --_i) {
this.contents[i].base.remove();
this.contents[i].notListenToStop();
_results.push(delete this.contents[i]);
}
return _results;
};
return Sections;
})();
$(window).on('menu:ready', function(){
window.PaperSections.$container.find('.menu-l').addClass('is-loaded')
});
window.PaperSections.sections = new Sections;
view.onFrame = function(e) {
return window.PaperSections.sections.update();
};
mwheel = function(e, d) {
var $$, $content;
$content = $('#js-content');
$$ = $(this);
if ($$.scrollTop() === 0 && d > 0) {
e.stopPropagation();
e.preventDefault();
}
if (d < 0 && ($$.scrollTop() === ($content[0].scrollHeight - window.PaperSections.$container.height()))) {
e.stopPropagation();
return e.preventDefault();
}
};
window.PaperSections.$container.on('mousewheel', mwheel);
window.PaperSections.scrollControl = function(e, d) {
var direction;
clearTimeout(window.PaperSections.timeOut);
window.PaperSections.timeOut = setTimeout(function() {
window.PaperSections.i = 0;
window.PaperSections.$container.trigger('stopScroll');
return window.PaperSections.prev = window.PaperSections.$container.scrollTop();
}, 50);
if (window.PaperSections.i % 4 === 0) {
direction = window.PaperSections.invertScroll ? -1 : 1;
window.PaperSections.next = window.PaperSections.$container.scrollTop();
window.PaperSections.scrollSpeed = direction * window.PaperSections.slice(1.2 * (window.PaperSections.next - window.PaperSections.prev), window.PaperSections.data.sectionheight / 2);
window.PaperSections.prev = window.PaperSections.next;
}
window.PaperSections.i++;
return false;
};
window.PaperSections.$container.scroll(window.PaperSections.scrollControl);
gui = new dat.GUI;
gui.add(window.PaperSections, 'invertScroll');
window.PaperSections.$container.on('mouseenter', '.section-b', function() {
return window.PaperSections.currSection = $(this).index();
});
window.PaperSections.$container.on('click', '.section-b', function() {
var $$;
$$ = $(this);
return window.PaperSections.sections.popSection($$.index());
});
if (window.PaperSections.win || window.PaperSections.ff) {
window.PaperSections.$container.addClass('is-with-scroll');
}
|
