Skip to content

Instantly share code, notes, and snippets.

Created February 3, 2016 12:19
Show Gist options
  • Save anonymous/57f1a74ed742670d5e87 to your computer and use it in GitHub Desktop.
Save anonymous/57f1a74ed742670d5e87 to your computer and use it in GitHub Desktop.
Touch device jelly menu concept
<div class="suggest-l"></div>
<div class="iphone-l">
<div class="screen-ll">
<div id="wrapper">
<div class="menu-l">
<canvas data-colors="#69D2E7:#A7DBD8:#E0E4CC:#F38630:#FA6900:#C02942:#542437:#53777A:#ECD078:#FE4365" data-sectionHeight="200" data-contentId="js-content" id="myCanvas1" class="canvas-e"></canvas>
<div id="js-content" class="content-ll">
<div class="section-b"></div>
<div class="section-b is-watermellon"></div>
<div class="section-b is-fish"></div>
<div class="section-b is-donut"></div>
<div class="section-b is-icecreame"></div>
<div class="section-b is-bananas"></div>
<div class="section-b is-drink"></div>
<div class="section-b is-candies"></div>
<div class="section-b is-pizza"></div>
<div class="section-b is-china"></div>
</div>
</div>
</div>
</div>
</div>
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');
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://s.cdpn.io/6859/tween.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.3/jquery.mousewheel.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script src="http://s.cdpn.io/6859/paper.js"></script>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
font-family: monospace;
background-color: #eeebf0;
position: relative;
}
.suggest-l {
width: 300px;
height: 300px;
background: transparent url("http://s.cdpn.io/6859/suggest.png") no-repeat center center;
position: absolute;
top: 50%;
left: 50%;
margin-left: 200px;
margin-top: -200px;
}
.iphone-l {
width: 600px;
height: 1061px;
margin: 0 auto;
margin-top: 50px;
background: transparent url("http://s.cdpn.io/6859/iphone.png") no-repeat center center;
position: relative;
}
.iphone-l > .screen-ll {
position: absolute;
top: 185px;
left: 91px;
width: 416px;
height: 713px;
overflow: hidden;
}
.touch {
overflow: hidden !important;
border: 10px solid #f00;
}
#wrapper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
overflow-x: hidden;
}
#wrapper.is-with-scroll {
width: 432px;
}
#wrapper .menu-l {
position: relative;
}
#wrapper .menu-l.is-loaded{
background: #69d2e7;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top, #69d2e7 0%, #69d2e7 50%, #fe4365 51%, #fe4365 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #69d2e7), color-stop(50%, #69d2e7), color-stop(51%, #fe4365), color-stop(100%, #fe4365));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #69d2e7 0%, #69d2e7 50%, #fe4365 51%, #fe4365 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #69d2e7 0%, #69d2e7 50%, #fe4365 51%, #fe4365 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #69d2e7 0%, #69d2e7 50%, #fe4365 51%, #fe4365 100%);
/* IE10+ */
background: linear-gradient(to bottom, #69d2e7 0%, #69d2e7 50%, #fe4365 51%, #fe4365 100%);
/* W3C */
}
#wrapper .content-ll {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 25px;
line-height: 30px;
-webkit-transform: rotate3d(0, 0, 0);
-moz-transform: rotate3d(0, 0, 0);
-ms-transform: rotate3d(0, 0, 0);
-o-transform: rotate3d(0, 0, 0);
transform: rotate3d(0, 0, 0);
}
.section-b {
height: 200px;
position: relative;
cursor: pointer;
}
.section-b:active:after {
width: 76px;
height: 76px;
margin-top: -38px;
margin-left: -38px;
background-size: 100% 100%;
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
-o-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
.section-b.is-check {
z-index: 1;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #f00;
}
.section-b:after {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
content: '';
width: 100px;
height: 100px;
background: transparent url("http://s.cdpn.io/6859/icecreame.png") no-repeat center center;
background-size: 100% 100%;
}
.section-b.is-watermellon:after {
background: transparent url("http://s.cdpn.io/6859/watermellon.png") no-repeat center center;
background-size: 100% 100%;
}
.section-b.is-fish:after {
background: transparent url("http://s.cdpn.io/6859/fish.png") no-repeat center center;
background-size: 100% 100%;
}
.section-b.is-donut:after {
background: transparent url("http://s.cdpn.io/6859/donut.png") no-repeat center center;
background-size: 100% 100%;
}
.section-b.is-icecreame:after {
background: transparent url("http://s.cdpn.io/6859/icecreame2.png") no-repeat center center;
background-size: 100% 100%;
}
.section-b.is-bananas:after {
background: transparent url("http://s.cdpn.io/6859/bananas.png") no-repeat center center;
background-size: 100% 100%;
}
.section-b.is-drink:after {
background: transparent url("http://s.cdpn.io/6859/drink.png") no-repeat center center;
background-size: 100% 100%;
}
.section-b.is-candies:after {
background: transparent url("http://s.cdpn.io/6859/candies.png") no-repeat center center;
background-size: 100% 100%;
}
.section-b.is-pizza:after {
background: transparent url("http://s.cdpn.io/6859/pizza.png") no-repeat center center;
background-size: 100% 100%;
}
.section-b.is-china:after {
background: transparent url("http://s.cdpn.io/6859/china.png") no-repeat center center;
background-size: 100% 100%;
}
@media all and (max-width:930px) {
.suggest-l {
margin-left: -150px;
top: 0;
margin-top: 0;
}
.iphone-l {
margin: 0 auto;
margin-top: 250px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment