├── icons ├── china.png ├── donut.png ├── drink.png ├── fish.png ├── pizza.png ├── bananas.png ├── candies.png ├── icecreame.png ├── icecreame2.png └── watermellon.png ├── testem.json ├── .gitignore ├── package.json ├── css ├── mixins.styl ├── main.css └── main.styl ├── README.md ├── js ├── gruntfile.map ├── gruntfile.js ├── lib │ ├── jq-events.js │ ├── tween.min.js │ └── dat.gui.min.js ├── main.map ├── main.coffee └── main.js ├── gruntfile.coffee ├── index.html └── index.jade /icons/china.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/legomushroom/paperjs-scroll-sections/HEAD/icons/china.png -------------------------------------------------------------------------------- /icons/donut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/legomushroom/paperjs-scroll-sections/HEAD/icons/donut.png -------------------------------------------------------------------------------- /icons/drink.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/legomushroom/paperjs-scroll-sections/HEAD/icons/drink.png -------------------------------------------------------------------------------- /icons/fish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/legomushroom/paperjs-scroll-sections/HEAD/icons/fish.png -------------------------------------------------------------------------------- /icons/pizza.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/legomushroom/paperjs-scroll-sections/HEAD/icons/pizza.png -------------------------------------------------------------------------------- /icons/bananas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/legomushroom/paperjs-scroll-sections/HEAD/icons/bananas.png -------------------------------------------------------------------------------- /icons/candies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/legomushroom/paperjs-scroll-sections/HEAD/icons/candies.png -------------------------------------------------------------------------------- /icons/icecreame.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/legomushroom/paperjs-scroll-sections/HEAD/icons/icecreame.png -------------------------------------------------------------------------------- /icons/icecreame2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/legomushroom/paperjs-scroll-sections/HEAD/icons/icecreame2.png -------------------------------------------------------------------------------- /testem.json: -------------------------------------------------------------------------------- 1 | { 2 | "src_files": [ 3 | "js/lib/*.js", 4 | "js/*.js", 5 | "js/tests/*.js" 6 | ] 7 | } -------------------------------------------------------------------------------- /icons/watermellon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/legomushroom/paperjs-scroll-sections/HEAD/icons/watermellon.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # osx noise 2 | .DS_Store 3 | profile 4 | 5 | # xcode noise 6 | build/* 7 | *.mode1 8 | *.mode1v3 9 | *.mode2v3 10 | *.perspective 11 | *.perspectivev3 12 | *.pbxuser 13 | *.xcworkspace 14 | xcuserdata 15 | 16 | # svn & cvs 17 | .svn 18 | CVS 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jelly-menu", 3 | "version": "0.0.0", 4 | "devDependencies": { 5 | "grunt": "~0.4.1", 6 | "grunt-contrib-watch": "~0.3.1", 7 | "grunt-contrib-uglify": "~0.2.0", 8 | "grunt-contrib-concat": "~0.3.0" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /css/mixins.styl: -------------------------------------------------------------------------------- 1 | GS = 8px 2 | BR = 3px 3 | 4 | 5 | bbox() 6 | -webkit-box-sizing: border-box; 7 | -moz-box-sizing: border-box; 8 | box-sizing: border-box; 9 | 10 | rect(size) 11 | width size 12 | height size 13 | 14 | hl(color, size=1px) 15 | outline size solid color 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | paperjs-scroll-sections 2 | ======================= 3 | http://codepen.io/sol0mka/full/Jsyxq 4 | 5 | Touch device jelly menu concept - What would you like to eat today? 6 | Will be great x with native implementation on touch devices 7 | 8 | My inspiration started here http://capptivate.co/2013/07/12/making-3/ 9 | Most of icons are Ashleigh Brennan's http://dribbble.com/ash-brennan 10 | -------------------------------------------------------------------------------- /js/gruntfile.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "file": "gruntfile.js", 4 | "sourceRoot": "..", 5 | "sources": [ 6 | "gruntfile.coffee" 7 | ], 8 | "names": [], 9 | "mappings": ";AAAA,CAAO,EAAU,EAAA,CAAX,CAAN,EAAkB;CAChB,CAAA,GAAK,KAAL;CACE,CAAK,CAAL,CAAA,CAAU,GAAL,MAAA;CAAL,CAEE,EADF,EAAA;CACE,CACE,IADF,CAAA;CACE,CAAW,CAAX,KAAA,CAAA;QADF;CAAA,CAIE,EADF,EAAA;CACE,CAAK,CAAL,KAAA,SAAK,IAAA,EAAA,CAAA,KAAA;CAAL,CAQM,EAAN,IAAA,iBARA;QAJF;MAFF;CAAA,CAiBE,EADF,EAAA;CACE,CACE,IADF,CAAA;CACE,CAAQ,IAAR,EAAA,8DAAA;QADF;CAAA,CAIE,EADF,EAAA;CACE,CACE,GADF,GAAA;CACE,CAA+B,QAA/B,eAA+B,IAA/B;UADF;QAJF;MAjBF;CAAA,CAyBE,EADF,CAAA;CACE,CAAO,GAAP,CAAA,eAAO;CAAP,CACO,GAAP,CAAA,EAAO;MA1BT;CADF,GAAA;CAAA,CA6BA,GAAK,OAAL,SAAA;CA7BA,CA8BA,GAAK,OAAL,UAAA;CA9BA,CA+BA,GAAK,OAAL,UAAA;CACM,CAAwB,GAAzB,GAAyB,CAA9B,GAAA;CAjCe" 10 | } -------------------------------------------------------------------------------- /gruntfile.coffee: -------------------------------------------------------------------------------- 1 | module.exports = (grunt) -> 2 | grunt.initConfig 3 | pkg: grunt.file.readJSON("package.json") 4 | concat: 5 | options: 6 | separator: ";" 7 | 8 | dist: 9 | src: [ 10 | "js/lib/jquery-2.0.1.js", 11 | "js/lib/jq-events.js", 12 | "js/lib/jquery.mousewheel.js", 13 | "js/lib/tween.min.js", 14 | "js/lib/dat.gui.min.js", 15 | "js/lib/paper.js" 16 | ] 17 | dest: "dist/<%= pkg.name %>.js" 18 | 19 | uglify: 20 | options: 21 | banner: "/*! <%= pkg.name %> <%= grunt.template.today(\"dd-mm-yyyy\") %> */\n" 22 | 23 | dist: 24 | files: 25 | "dist/<%= pkg.name %>.min.js": ["<%= concat.dist.dest %>"] 26 | 27 | watch: 28 | files: ["<%= jshint.files %>"] 29 | tasks: ["concat", "uglify"] 30 | 31 | grunt.loadNpmTasks "grunt-contrib-watch" 32 | grunt.loadNpmTasks "grunt-contrib-uglify" 33 | grunt.loadNpmTasks "grunt-contrib-concat" 34 | grunt.registerTask "default", ["concat", "uglify"] -------------------------------------------------------------------------------- /js/gruntfile.js: -------------------------------------------------------------------------------- 1 | // Generated by CoffeeScript 1.6.2 2 | module.exports = function(grunt) { 3 | grunt.initConfig({ 4 | pkg: grunt.file.readJSON("package.json"), 5 | concat: { 6 | options: { 7 | separator: ";" 8 | }, 9 | dist: { 10 | src: ["js/lib/jquery-2.0.1.js", "js/lib/jq-events.js", "js/lib/jquery.mousewheel.js", "js/lib/tween.min.js", "js/lib/dat.gui.min.js", "js/lib/paper.js"], 11 | dest: "dist/<%= pkg.name %>.js" 12 | } 13 | }, 14 | uglify: { 15 | options: { 16 | banner: "/*! <%= pkg.name %> <%= grunt.template.today(\"dd-mm-yyyy\") %> */\n" 17 | }, 18 | dist: { 19 | files: { 20 | "dist/<%= pkg.name %>.min.js": ["<%= concat.dist.dest %>"] 21 | } 22 | } 23 | }, 24 | watch: { 25 | files: ["<%= jshint.files %>"], 26 | tasks: ["concat", "uglify"] 27 | } 28 | }); 29 | grunt.loadNpmTasks("grunt-contrib-watch"); 30 | grunt.loadNpmTasks("grunt-contrib-uglify"); 31 | grunt.loadNpmTasks("grunt-contrib-concat"); 32 | return grunt.registerTask("default", ["concat", "uglify"]); 33 | }; 34 | 35 | /* 36 | //@ sourceMappingURL=gruntfile.map 37 | */ 38 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /js/lib/jq-events.js: -------------------------------------------------------------------------------- 1 | /* 2 | * throttledresize: special jQuery event that happens at a reduced rate compared to "resize" 3 | * 4 | * latest version and complete README available on Github: 5 | * https://github.com/louisremi/jquery-smartresize 6 | * 7 | * Copyright 2012 @louis_remi 8 | * Licensed under the MIT license. 9 | * 10 | * This saved you an hour of work? 11 | * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON 12 | */ 13 | (function($) { 14 | 15 | var $event = $.event, 16 | $special, 17 | dummy = {_:0}, 18 | frame = 0, 19 | wasResized, animRunning; 20 | 21 | $special = $event.special.throttledresize = { 22 | setup: function() { 23 | $( this ).on( "resize", $special.handler ); 24 | }, 25 | teardown: function() { 26 | $( this ).off( "resize", $special.handler ); 27 | }, 28 | handler: function( event, execAsap ) { 29 | // Save the context 30 | var context = this, 31 | args = arguments; 32 | 33 | wasResized = true; 34 | 35 | if ( !animRunning ) { 36 | setInterval(function(){ 37 | frame++; 38 | 39 | if ( frame > $special.threshold && wasResized || execAsap ) { 40 | // set correct event type 41 | event.type = "throttledresize"; 42 | $event.dispatch.apply( context, args ); 43 | wasResized = false; 44 | frame = 0; 45 | } 46 | if ( frame > 9 ) { 47 | $(dummy).stop(); 48 | animRunning = false; 49 | frame = 0; 50 | } 51 | }, 30); 52 | animRunning = true; 53 | } 54 | }, 55 | threshold: 0 56 | }; 57 | 58 | })(jQuery); -------------------------------------------------------------------------------- /js/lib/tween.min.js: -------------------------------------------------------------------------------- 1 | // tween.js - http://github.com/sole/tween.js 2 | 'use strict';var TWEEN=TWEEN||function(){var a=[];return{REVISION:"10",getAll:function(){return a},removeAll:function(){a=[]},add:function(c){a.push(c)},remove:function(c){c=a.indexOf(c);-1!==c&&a.splice(c,1)},update:function(c){if(0===a.length)return!1;for(var b=0,d=a.length,c=void 0!==c?c:void 0!==window.performance&&void 0!==window.performance.now?window.performance.now():Date.now();b(a*=2)?0.5*a*a:-0.5*(--a*(a-2)-1)}},Cubic:{In:function(a){return a*a*a},Out:function(a){return--a*a*a+1},InOut:function(a){return 1>(a*=2)?0.5*a*a*a:0.5*((a-=2)*a*a+2)}},Quartic:{In:function(a){return a*a*a*a},Out:function(a){return 1- --a*a*a*a},InOut:function(a){return 1>(a*=2)?0.5*a*a*a*a:-0.5*((a-=2)*a*a*a-2)}},Quintic:{In:function(a){return a*a*a* 7 | a*a},Out:function(a){return--a*a*a*a*a+1},InOut:function(a){return 1>(a*=2)?0.5*a*a*a*a*a:0.5*((a-=2)*a*a*a*a+2)}},Sinusoidal:{In:function(a){return 1-Math.cos(a*Math.PI/2)},Out:function(a){return Math.sin(a*Math.PI/2)},InOut:function(a){return 0.5*(1-Math.cos(Math.PI*a))}},Exponential:{In:function(a){return 0===a?0:Math.pow(1024,a-1)},Out:function(a){return 1===a?1:1-Math.pow(2,-10*a)},InOut:function(a){return 0===a?0:1===a?1:1>(a*=2)?0.5*Math.pow(1024,a-1):0.5*(-Math.pow(2,-10*(a-1))+2)}},Circular:{In:function(a){return 1- 8 | Math.sqrt(1-a*a)},Out:function(a){return Math.sqrt(1- --a*a)},InOut:function(a){return 1>(a*=2)?-0.5*(Math.sqrt(1-a*a)-1):0.5*(Math.sqrt(1-(a-=2)*a)+1)}},Elastic:{In:function(a){var c,b=0.1;if(0===a)return 0;if(1===a)return 1;!b||1>b?(b=1,c=0.1):c=0.4*Math.asin(1/b)/(2*Math.PI);return-(b*Math.pow(2,10*(a-=1))*Math.sin((a-c)*2*Math.PI/0.4))},Out:function(a){var c,b=0.1;if(0===a)return 0;if(1===a)return 1;!b||1>b?(b=1,c=0.1):c=0.4*Math.asin(1/b)/(2*Math.PI);return b*Math.pow(2,-10*a)*Math.sin((a-c)* 9 | 2*Math.PI/0.4)+1},InOut:function(a){var c,b=0.1;if(0===a)return 0;if(1===a)return 1;!b||1>b?(b=1,c=0.1):c=0.4*Math.asin(1/b)/(2*Math.PI);return 1>(a*=2)?-0.5*b*Math.pow(2,10*(a-=1))*Math.sin((a-c)*2*Math.PI/0.4):0.5*b*Math.pow(2,-10*(a-=1))*Math.sin((a-c)*2*Math.PI/0.4)+1}},Back:{In:function(a){return a*a*(2.70158*a-1.70158)},Out:function(a){return--a*a*(2.70158*a+1.70158)+1},InOut:function(a){return 1>(a*=2)?0.5*a*a*(3.5949095*a-2.5949095):0.5*((a-=2)*a*(3.5949095*a+2.5949095)+2)}},Bounce:{In:function(a){return 1- 10 | TWEEN.Easing.Bounce.Out(1-a)},Out:function(a){return a<1/2.75?7.5625*a*a:a<2/2.75?7.5625*(a-=1.5/2.75)*a+0.75:a<2.5/2.75?7.5625*(a-=2.25/2.75)*a+0.9375:7.5625*(a-=2.625/2.75)*a+0.984375},InOut:function(a){return 0.5>a?0.5*TWEEN.Easing.Bounce.In(2*a):0.5*TWEEN.Easing.Bounce.Out(2*a-1)+0.5}}}; 11 | TWEEN.Interpolation={Linear:function(a,c){var b=a.length-1,d=b*c,e=Math.floor(d),g=TWEEN.Interpolation.Utils.Linear;return 0>c?g(a[0],a[1],d):1b?b:e+1],d-e)},Bezier:function(a,c){var b=0,d=a.length-1,e=Math.pow,g=TWEEN.Interpolation.Utils.Bernstein,i;for(i=0;i<=d;i++)b+=e(1-c,d-i)*e(c,i)*a[i]*g(d,i);return b},CatmullRom:function(a,c){var b=a.length-1,d=b*c,e=Math.floor(d),g=TWEEN.Interpolation.Utils.CatmullRom;return a[0]===a[b]?(0>c&&(e=Math.floor(d=b*(1+c))),g(a[(e- 12 | 1+b)%b],a[e],a[(e+1)%b],a[(e+2)%b],d-e)):0>c?a[0]-(g(a[0],a[0],a[1],a[1],-d)-a[0]):1