strolljs-rails 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml ADDED
@@ -0,0 +1,15 @@
1
+ ---
2
+ !binary "U0hBMQ==":
3
+ metadata.gz: !binary |-
4
+ ZTVmMzdhZmZmYTRhMDE2ZGM0ZTIwMmVjOGMzMmU4ZTgyNWRlNGU4Nw==
5
+ data.tar.gz: !binary |-
6
+ ZTcwZDA2YjY3NWJkZTVhMjZhMzhhZWNhOWUzNTc0NGVjN2E0ZmY5YQ==
7
+ SHA512:
8
+ metadata.gz: !binary |-
9
+ OTNkOWRiYWM5Yzc2MGZlNTQ1OGVkNzUzZWNjMzdiM2IwYWFhZjBiMTAxYmRj
10
+ MTM0YjUxYzZkZjU3NDM1ZTVjZDE1YjZmYjBkZGMyYTExNGZhZjAwNTA2NDBi
11
+ YWQzNjg2YzZkODhjNTdiNGE2ZTY2NmM4NGZkMDAyZTNlMTA5OTg=
12
+ data.tar.gz: !binary |-
13
+ ZmViNDE1ZGI3YzFmNWFiMjBiN2NjZDBjYWMzMGE3OTk5NmEzMGY4MGIyODYy
14
+ MGJlYTU0MGUyNWMyMzc4OGEyMTYxOTkyZWQyODUwM2IyOGRhZjdmY2EyZTVl
15
+ OTIxZmIxZTJhMGQwMTQ2ODFjMzE2YzEzYjRkMjYyMTI0ZDQ3ODg=
@@ -0,0 +1,20 @@
1
+ module Strolljs
2
+ module Helper
3
+
4
+ def stroll(div_id, ul_class,items=[])
5
+
6
+ js_tag = javascript_tag ("stroll.bind( '##{div_id} ul' );")
7
+
8
+ html_tag = content_tag(:div, :id => div_id) do
9
+ content_tag :article do
10
+ content_tag(:ul, :class => ul_class) do
11
+ items.collect {|item| concat(content_tag(:li, item))}
12
+ end
13
+ end
14
+ end
15
+
16
+ "#{html_tag} #{js_tag}".html_safe
17
+
18
+ end
19
+ end
20
+ end
@@ -0,0 +1,13 @@
1
+ module Strolljs
2
+ module Rails
3
+ class Engine < ::Rails::Engine
4
+
5
+ initializer "precompile", :group => :all do |app|
6
+ app.config.assets.precompile << Proc.new{|path| path == "stroll.min.js" }
7
+ app.config.assets.precompile << Proc.new{|path| path == "stroll.min.css" }
8
+ app.config.assets.precompile << Proc.new{|path| path == "stroll-defaul-style.css" }
9
+ end
10
+
11
+ end
12
+ end
13
+ end
@@ -0,0 +1,5 @@
1
+ module Strolljs
2
+ module Rails
3
+ VERSION = "0.0.1"
4
+ end
5
+ end
@@ -0,0 +1,5 @@
1
+ require "strolljs-rails/version"
2
+ require 'strolljs-rails/helper'
3
+ require 'strolljs-rails/rails'
4
+
5
+ ActionView::Base.send(:include, Strolljs::Helper)
@@ -0,0 +1,43 @@
1
+ /*!
2
+ * stroll.js 1.2 - CSS scroll effects
3
+ * http://lab.hakim.se/scroll-effects
4
+ * MIT licensed
5
+ *
6
+ * Copyright (C) 2012 Hakim El Hattab, http://hakim.se
7
+ */
8
+ (function(){var h=500;
9
+ var b=!!("ontouchstart" in window);var j=[];var d=false;function i(){if(d){requestAnimFrame(i);for(var n=0,m=j.length;n<m;n++){j[n].update();}}}function l(n,m){if(!n.nodeName||/^(ul|li)$/i.test(n.nodeName)===false){return false;
10
+ }else{if(e(n)){g(n);}}var o=b?new c(n):new k(n);if(m&&m.live){o.syncInterval=setInterval(function(){o.sync.call(o);},h);}o.sync();j.push(o);if(j.length===1){d=true;
11
+ i();}}function g(n){for(var m=0;m<j.length;m++){var o=j[m];if(o.element==n){o.destroy();j.splice(m,1);m--;}}if(j.length===0){d=false;}}function e(o){for(var n=0,m=j.length;
12
+ n<m;n++){if(j[n].element==o){return true;}}return false;}function f(q,r,o){var p,m;if(typeof q==="string"){var n=document.querySelectorAll(q);for(p=0,m=n.length;
13
+ p<m;p++){r.call(null,n[p],o);}}else{if(typeof q==="object"&&typeof q.length==="number"){for(p=0,m=q.length;p<m;p++){r.call(null,q[p],o);}}else{if(q.nodeName){r.call(null,q,o);
14
+ }else{throw"Stroll target was of unexpected type.";}}}}function a(){return !!document.body.classList;}function k(m){this.element=m;}k.prototype.sync=function(){this.items=Array.prototype.slice.apply(this.element.children);
15
+ this.listHeight=this.element.offsetHeight;for(var n=0,m=this.items.length;n<m;n++){var o=this.items[n];o._offsetHeight=o.offsetHeight;o._offsetTop=o.offsetTop;
16
+ o._offsetBottom=o._offsetTop+o._offsetHeight;o._state="";}this.update(true);};k.prototype.update=function(q){var r=this.element.pageYOffset||this.element.scrollTop,p=r+this.listHeight;
17
+ if(r!==this.lastTop||q){this.lastTop=r;for(var n=0,m=this.items.length;n<m;n++){var o=this.items[n];if(o._offsetBottom<r){if(o._state!=="past"){o._state="past";
18
+ o.classList.add("past");o.classList.remove("future");}}else{if(o._offsetTop>p){if(o._state!=="future"){o._state="future";o.classList.add("future");o.classList.remove("past");
19
+ }}else{if(o._state){if(o._state==="past"){o.classList.remove("past");}if(o._state==="future"){o.classList.remove("future");}o._state="";}}}}}};k.prototype.destroy=function(){clearInterval(this.syncInterval);
20
+ for(var n=0,m=this.items.length;n<m;n++){var o=this.items[n];o.classList.remove("past");o.classList.remove("future");}};function c(m){this.element=m;this.element.style.overflow="hidden";
21
+ this.top={value:0,natural:0};this.touch={value:0,offset:0,start:0,previous:0,lastMove:Date.now(),accellerateTimeout:-1,isAccellerating:false,isActive:false};
22
+ this.velocity=0;}c.prototype=new k();c.prototype.sync=function(){this.items=Array.prototype.slice.apply(this.element.children);this.listHeight=this.element.offsetHeight;
23
+ var o;for(var n=0,m=this.items.length;n<m;n++){o=this.items[n];o._offsetHeight=o.offsetHeight;o._offsetTop=o.offsetTop;o._offsetBottom=o._offsetTop+o._offsetHeight;
24
+ o._state="";o.style.opacity=1;}this.top.natural=this.element.scrollTop;this.top.value=this.top.natural;this.top.max=o._offsetBottom-this.listHeight;this.update(true);
25
+ this.bind();};c.prototype.bind=function(){var m=this;this.touchStartDelegate=function(n){m.onTouchStart(n);};this.touchMoveDelegate=function(n){m.onTouchMove(n);
26
+ };this.touchEndDelegate=function(n){m.onTouchEnd(n);};this.element.addEventListener("touchstart",this.touchStartDelegate,false);this.element.addEventListener("touchmove",this.touchMoveDelegate,false);
27
+ this.element.addEventListener("touchend",this.touchEndDelegate,false);};c.prototype.onTouchStart=function(n){n.preventDefault();if(n.touches.length===1){this.touch.isActive=true;
28
+ this.touch.start=n.touches[0].clientY;this.touch.previous=this.touch.start;this.touch.value=this.touch.start;this.touch.offset=0;if(this.velocity){this.touch.isAccellerating=true;
29
+ var m=this;this.touch.accellerateTimeout=setTimeout(function(){m.touch.isAccellerating=false;m.velocity=0;},500);}else{this.velocity=0;}}};c.prototype.onTouchMove=function(n){if(n.touches.length===1){var m=this.touch.value;
30
+ this.touch.value=n.touches[0].clientY;this.touch.lastMove=Date.now();var o=(this.touch.value>this.touch.previous&&this.velocity<0)||(this.touch.value<this.touch.previous&&this.velocity>0);
31
+ if(this.touch.isAccellerating&&o){clearInterval(this.touch.accellerateTimeout);this.velocity+=(this.touch.previous-this.touch.value)/10;}else{this.velocity=0;
32
+ this.touch.isAccellerating=false;this.touch.offset=Math.round(this.touch.start-this.touch.value);}this.touch.previous=m;}};c.prototype.onTouchEnd=function(n){var m=this.touch.start-this.touch.value;
33
+ if(!this.touch.isAccellerating){this.velocity=(this.touch.start-this.touch.value)/10;}if(Date.now()-this.touch.lastMove>200||Math.abs(this.touch.previous-this.touch.value)<5){this.velocity=0;
34
+ }this.top.value+=this.touch.offset;this.touch.offset=0;this.touch.start=0;this.touch.value=0;this.touch.isActive=false;this.touch.isAccellerating=false;
35
+ clearInterval(this.touch.accellerateTimeout);if(Math.abs(this.velocity)>4||Math.abs(m)>10){n.preventDefault();}};c.prototype.update=function(q){var r=this.top.value+this.velocity+this.touch.offset;
36
+ if(this.velocity||this.touch.offset){this.element.scrollTop=r;r=Math.max(0,Math.min(this.element.scrollTop,this.top.max));this.top.value=r-this.touch.offset;
37
+ }if(!this.touch.isActive||this.touch.isAccellerating){this.velocity*=0.95;}if(Math.abs(this.velocity)<0.15){this.velocity=0;}if(r!==this.top.natural||q){this.top.natural=r;
38
+ this.top.value=r-this.touch.offset;var p=r+this.listHeight;for(var n=0,m=this.items.length;n<m;n++){var o=this.items[n];if(o._offsetBottom<r){if(this.velocity<=0&&o._state!=="past"){o.classList.add("past");
39
+ o._state="past";}}else{if(o._offsetTop>p){if(this.velocity>=0&&o._state!=="future"){o.classList.add("future");o._state="future";}}else{if(o._state){if(o._state==="past"){o.classList.remove("past");
40
+ }if(o._state==="future"){o.classList.remove("future");}o._state="";}}}}}};c.prototype.destroy=function(){k.prototype.destroy.apply(this);this.element.removeEventListener("touchstart",this.touchStartDelegate,false);
41
+ this.element.removeEventListener("touchmove",this.touchMoveDelegate,false);this.element.removeEventListener("touchend",this.touchEndDelegate,false);};window.stroll={bind:function(n,m){if(a()){f(n,l,m);
42
+ }},unbind:function(m){if(a()){f(m,g);}}};window.requestAnimFrame=(function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(m){window.setTimeout(m,1000/60);
43
+ };})();})();
@@ -0,0 +1,88 @@
1
+ /**
2
+ * Demo page styles, all list scroll effects styles are in sctroll.css
3
+ */
4
+ html, body {
5
+ margin: 0px;
6
+ padding: 0px;
7
+ }
8
+
9
+ body {
10
+ background: #323232;
11
+ font-family: 'Lato', Times, 'Times New Roman', serif;
12
+ font-size: 16px;
13
+ color: #eee;
14
+ margin-bottom: 40px;
15
+ line-height: 1;
16
+ }
17
+
18
+ header {
19
+ background: rgba(0, 0, 0, 0.2);
20
+ margin-bottom: 30px;
21
+ padding: 20px 100px 20px 20px;
22
+ font-size: 20px;
23
+ line-height: 1.3em;
24
+ }
25
+
26
+ header div {
27
+ margin-top: 10px;
28
+ }
29
+
30
+ a {
31
+ color: cyan;
32
+ }
33
+
34
+ article {
35
+ display: inline-block;
36
+ margin: 20px;
37
+ }
38
+
39
+ h2 {
40
+ font-size: 16px;
41
+ margin-bottom: 20px;
42
+ text-transform: uppercase;
43
+ }
44
+
45
+ small {
46
+ opacity: 0.6;
47
+ font-style: italic;
48
+ font-size: 14px;
49
+ margin-left: 5px;
50
+ }
51
+
52
+ /**
53
+ * List used for the demo page
54
+ */
55
+ ul {
56
+ position: relative;
57
+ width: 230px;
58
+ height: 480px;
59
+ margin: 0;
60
+ padding: 0;
61
+ overflow-x: hidden;
62
+ overflow-y: scroll;
63
+ list-style: none;
64
+
65
+ -webkit-perspective: 400px;
66
+ -moz-perspective: 400px;
67
+ -ms-perspective: 400px;
68
+ -o-perspective: 400px;
69
+ perspective: 400px;
70
+ }
71
+ ul li {
72
+ position: relative;
73
+ padding: 16px;
74
+ background: #eee;
75
+ color: #252525;
76
+ font-size: 18px;
77
+ z-index: 2;
78
+
79
+ -webkit-transform: translateZ(0px);
80
+ -moz-transform: translateZ(0px);
81
+ -ms-transform: translateZ(0px);
82
+ -o-transform: translateZ(0px);
83
+ transform: translateZ(0px);
84
+ }
85
+ ul li:nth-child(odd) {
86
+ background: #fff;
87
+ }
88
+
@@ -0,0 +1,61 @@
1
+ /*!
2
+ * stroll.js 1.2 - CSS scroll effects
3
+ * http://lab.hakim.se/scroll-effects
4
+ * MIT licensed
5
+ *
6
+ * Copyright (C) 2012 Hakim El Hattab, http://hakim.se
7
+ */.cards{-webkit-perspective:300px;-moz-perspective:300px;-ms-perspective:300px;-o-perspective:300px;perspective:300px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;-ms-perspective-origin:50% 50%;-o-perspective-origin:50% 50%;perspective-origin:50% 50%}
8
+ .cards li{-webkit-transition:all 600ms ease;-moz-transition:all 600ms ease;-ms-transition:all 600ms ease;-o-transition:all 600ms ease;transition:all 600ms ease;-webkit-transform-origin:100% 50%;-moz-transform-origin:100% 50%;-ms-transform-origin:100% 50%;-o-transform-origin:100% 50%;transform-origin:100% 50%}
9
+ .cards li.past{-webkit-transform:translate3d(0,-100px,-100px) rotateX(-90deg);-moz-transform:translate3d(0,-100px,-100px) rotateX(-90deg);-ms-transform:translate3d(0,-100px,-100px) rotateX(-90deg);-o-transform:translate3d(0,-100px,-100px) rotateX(-90deg);transform:translate3d(0,-100px,-100px) rotateX(-90deg)}
10
+ .cards li.future{-webkit-transform:translate3d(0,100px,-100px) rotateX(90deg);-moz-transform:translate3d(0,100px,-100px) rotateX(90deg);-ms-transform:translate3d(0,100px,-100px) rotateX(90deg);-o-transform:translate3d(0,100px,-100px) rotateX(90deg);transform:translate3d(0,100px,-100px) rotateX(90deg)}
11
+ .grow li{-webkit-transition:all 600ms ease;-moz-transition:all 600ms ease;-ms-transition:all 600ms ease;-o-transition:all 600ms ease;transition:all 600ms ease;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%}
12
+ .grow li.past{-webkit-transform:scale(0.01);-moz-transform:scale(0.01);-ms-transform:scale(0.01);-o-transform:scale(0.01);transform:scale(0.01)}.grow li.future{-webkit-transform:scale(0.01);-moz-transform:scale(0.01);-ms-transform:scale(0.01);-o-transform:scale(0.01);transform:scale(0.01)}
13
+ .flip{-webkit-perspective:400px;-moz-perspective:400px;-ms-perspective:400px;-o-perspective:400px;perspective:400px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;-ms-perspective-origin:50% 50%;-o-perspective-origin:50% 50%;perspective-origin:50% 50%}
14
+ .flip li{-webkit-transition:all 600ms ease,opacity 300ms ease;-moz-transition:all 600ms ease;-ms-transition:all 600ms ease,opacity 300ms ease;-o-transition:all 600ms ease,opacity 300ms ease;transition:all 600ms ease,opacity 300ms ease;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0}
15
+ .flip li.past{opacity:0;-webkit-transform-origin:0 100%;-moz-transform-origin:0 100%;-ms-transform-origin:0 100%;-o-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:rotateX(80deg);-moz-transform:rotateX(80deg);-ms-transform:rotateX(80deg);-o-transform:rotateX(80deg);transform:rotateX(80deg)}
16
+ .flip li.future{opacity:0;-webkit-transform:rotateX(-80deg);-moz-transform:rotateX(-80deg);-ms-transform:rotateX(-80deg);-o-transform:rotateX(-80deg);transform:rotateX(-80deg)}
17
+ .fly{-webkit-perspective:400px;-moz-perspective:400px;-ms-perspective:400px;-o-perspective:400px;perspective:400px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;-ms-perspective-origin:50% 50%;-o-perspective-origin:50% 50%;perspective-origin:50% 50%}
18
+ .fly li{-webkit-transition:all 600ms ease,opacity 300ms ease;-moz-transition:all 600ms ease;-ms-transition:all 600ms ease,opacity 300ms ease;-o-transition:all 600ms ease,opacity 300ms ease;transition:all 600ms ease,opacity 300ms ease;-webkit-transform-origin:50% 50% -50px;-moz-transform-origin:50% 50% -50px;-ms-transform-origin:50% 50% -50px;-o-transform-origin:50% 50% -50px;transform-origin:50% 50% -50px}
19
+ .fly li.past{opacity:0;-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);-ms-transform:rotateX(180deg);-o-transform:rotateX(180deg);transform:rotateX(180deg)}
20
+ .fly li.future{opacity:0;-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);-ms-transform:rotateX(-180deg);-o-transform:rotateX(-180deg);transform:rotateX(-180deg)}
21
+ .fly-simplified{-webkit-perspective:300px;-moz-perspective:300px;-ms-perspective:300px;-o-perspective:300px;perspective:300px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;-ms-perspective-origin:50% 50%;-o-perspective-origin:50% 50%;perspective-origin:50% 50%}
22
+ .fly-simplified li{-webkit-transition:all 600ms ease;-moz-transition:all 600ms ease;-ms-transition:all 600ms ease;-o-transition:all 600ms ease;transition:all 600ms ease;-webkit-transform-origin:100% 50%;-moz-transform-origin:100% 50%;-ms-transform-origin:100% 50%;-o-transform-origin:100% 50%;transform-origin:100% 50%}
23
+ .fly-simplified li.past{-webkit-transform:translate3d(0,-100px,-100px) rotateX(90deg);-moz-transform:translate3d(0,-100px,-100px) rotateX(90deg);-ms-transform:translate3d(0,-100px,-100px) rotateX(90deg);-o-transform:translate3d(0,-100px,-100px) rotateX(90deg);transform:translate3d(0,-100px,-100px) rotateX(90deg)}
24
+ .fly-simplified li.future{-webkit-transform:translate3d(0,100px,-100px) rotateX(-90deg);-moz-transform:translate3d(0,100px,-100px) rotateX(-90deg);-ms-transform:translate3d(0,100px,-100px) rotateX(-90deg);-o-transform:translate3d(0,100px,-100px) rotateX(-90deg);transform:translate3d(0,100px,-100px) rotateX(-90deg)}
25
+ .fly-reverse{-webkit-perspective:400px;-moz-perspective:400px;-ms-perspective:400px;-o-perspective:400px;perspective:400px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;-ms-perspective-origin:50% 50%;-o-perspective-origin:50% 50%;perspective-origin:50% 50%}
26
+ .fly-reverse li{-webkit-transition:all 600ms ease,opacity 300ms ease;-moz-transition:all 600ms ease;-ms-transition:all 600ms ease,opacity 300ms ease;-o-transition:all 600ms ease,opacity 300ms ease;transition:all 600ms ease,opacity 300ms ease;-webkit-transform-origin:50% 50% -50px;-moz-transform-origin:50% 50% -50px;-ms-transform-origin:50% 50% -50px;-o-transform-origin:50% 50% -50px;transform-origin:50% 50% -50px}
27
+ .fly-reverse li.past{opacity:0;-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);-ms-transform:rotateX(-180deg);-o-transform:rotateX(-180deg);transform:rotateX(-180deg)}
28
+ .fly-reverse li.future{opacity:0;-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);-ms-transform:rotateX(180deg);-o-transform:rotateX(180deg);transform:rotateX(180deg)}
29
+ .skew{-webkit-perspective:600px;-moz-perspective:600px;-ms-perspective:600px;-o-perspective:600px;perspective:600px;-webkit-perspective-origin:0 50%;-moz-perspective-origin:0 50%;-ms-perspective-origin:0 50%;-o-perspective-origin:0 50%;perspective-origin:0 50%}
30
+ .skew li{-webkit-transition:all 600ms ease,opacity 200ms ease;-moz-transition:all 600ms ease;-ms-transition:all 600ms ease;-o-transition:all 600ms ease;transition:all 600ms ease;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0}
31
+ .skew li.past{-webkit-transform:skewY(30deg);-moz-transform:skewY(30deg);-ms-transform:skewY(30deg);-o-transform:skewY(30deg);transform:skewY(30deg)}.skew li.future{z-index:0;-webkit-transform:skewY(-30deg);-moz-transform:skewY(-30deg);-ms-transform:skewY(-30deg);-o-transform:skewY(-30deg);transform:skewY(-30deg)}
32
+ .helix{-webkit-perspective:600px;-moz-perspective:600px;-ms-perspective:600px;-o-perspective:600px;perspective:600px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;-ms-perspective-origin:50% 50%;-o-perspective-origin:50% 50%;perspective-origin:50% 50%}
33
+ .helix li{-webkit-transition:all 600ms ease,opacity 200ms ease;-moz-transition:all 600ms ease;-ms-transition:all 600ms ease,opacity 200ms ease;-o-transition:all 600ms ease,opacity 200ms ease;transition:all 600ms ease,opacity 200ms ease;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%}
34
+ .helix li.past{opacity:0;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}
35
+ .helix li.future{opacity:0;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);transform:rotateY(-180deg)}
36
+ .wave li{-webkit-transition:all 600ms cubic-bezier(0.260,0.860,0.440,0.985);-moz-transition:all 600ms cubic-bezier(0.260,0.860,0.440,0.985);-ms-transition:all 600ms cubic-bezier(0.260,0.860,0.440,0.985);-o-transition:all 600ms cubic-bezier(0.260,0.860,0.440,0.985);transition:all 600ms cubic-bezier(0.260,0.860,0.440,0.985)}
37
+ .wave li.past{-webkit-transform:translateX(-70%);-moz-transform:translateX(-70%);-ms-transform:translateX(-70%);-o-transform:translateX(-70%);transform:translateX(-70%)}
38
+ .wave li.future{-webkit-transform:translateX(-70%);-moz-transform:translateX(-70%);-ms-transform:translateX(-70%);-o-transform:translateX(-70%);transform:translateX(-70%)}
39
+ .fan li{-webkit-transition:all 600ms cubic-bezier(0.390,0.575,0.565,1.000);-moz-transition:all 600ms cubic-bezier(0.390,0.575,0.565,1.000);-ms-transition:all 600ms cubic-bezier(0.390,0.575,0.565,1.000);-o-transition:all 600ms cubic-bezier(0.390,0.575,0.565,1.000);transition:all 600ms cubic-bezier(0.390,0.575,0.565,1.000);-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0}
40
+ .fan li.past{-webkit-transform:rotate(-60deg);-moz-transform:rotate(-60deg);-ms-transform:rotate(-60deg);-o-transform:rotate(-60deg);transform:rotate(-60deg)}
41
+ .fan li.future{-webkit-transform:rotate(70deg);-moz-transform:rotate(70deg);-ms-transform:rotate(70deg);-o-transform:rotate(70deg);transform:rotate(70deg)}
42
+ .tilt{-webkit-perspective:800px;-moz-perspective:800px;-ms-perspective:800px;-o-perspective:800px;perspective:800px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;-ms-perspective-origin:50% 50%;-o-perspective-origin:50% 50%;perspective-origin:50% 50%}
43
+ .tilt li{position:relative;-webkit-transition:all 1000ms cubic-bezier(0.260,0.860,0.440,0.985),opacity 300ms ease;-moz-transition:all 1000ms cubic-bezier(0.260,0.860,0.440,0.985);-ms-transition:all 1000ms cubic-bezier(0.260,0.860,0.440,0.985),opacity 300ms ease;-o-transition:all 1000ms cubic-bezier(0.260,0.860,0.440,0.985),opacity 300ms ease;transition:all 1000ms cubic-bezier(0.260,0.860,0.440,0.985),opacity 300ms ease}
44
+ .tilt li.past{opacity:0;-webkit-transform:translateY(100%) translateZ(-200px);-moz-transform:translateY(100%) translateZ(-200px);-ms-transform:translateY(100%) translateZ(-200px);-o-transform:translateY(100%) translateZ(-200px);transform:translateY(100%) translateZ(-200px)}
45
+ .tilt li.future{opacity:0;-webkit-transform:translateY(-100%) translateZ(-200px);-moz-transform:translateY(-100%) translateZ(-200px);-ms-transform:translateY(-100%) translateZ(-200px);-o-transform:translateY(-100%) translateZ(-200px);transform:translateY(-100%) translateZ(-200px)}
46
+ .curl{-webkit-perspective:600px;-moz-perspective:600px;-ms-perspective:600px;-o-perspective:600px;perspective:600px;-webkit-perspective-origin:0 50%;-moz-perspective-origin:0 50%;-ms-perspective-origin:0 50%;-o-perspective-origin:0 50%;perspective-origin:0 50%}
47
+ .curl li{-webkit-transition:all 600ms ease,opacity 200ms ease;-moz-transition:all 600ms ease;-ms-transition:all 600ms ease,opacity 200ms ease;-o-transition:all 600ms ease,opacity 200ms ease;transition:all 600ms ease,opacity 200ms ease;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden}
48
+ .curl li.past{opacity:0;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg)}
49
+ .curl li.future{opacity:0;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg)}
50
+ .papercut{-webkit-perspective:600px;-moz-perspective:600px;-ms-perspective:600px;-o-perspective:600px;perspective:600px;-webkit-perspective-origin:0;-moz-perspective-origin:0;-ms-perspective-origin:0;-o-perspective-origin:0;perspective-origin:0}
51
+ .papercut li{-webkit-transition:all 600ms ease;-moz-transition:all 600ms ease;-ms-transition:all 600ms ease;-o-transition:all 600ms ease;transition:all 600ms ease;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0}
52
+ .papercut li.past{-webkit-transform:skewY(-30deg);-moz-transform:skewY(-30deg);-ms-transform:skewY(-30deg);-o-transform:skewY(-30deg);transform:skewY(-30deg)}
53
+ .papercut li.future{-webkit-transform:skewY(30deg);-moz-transform:skewY(30deg);-ms-transform:skewY(30deg);-o-transform:skewY(30deg);transform:skewY(30deg)}
54
+ .zipper li{-webkit-transition:all 600ms cubic-bezier(0.390,0.575,0.565,1.000);-moz-transition:all 600ms cubic-bezier(0.390,0.575,0.565,1.000);-ms-transition:all 600ms cubic-bezier(0.390,0.575,0.565,1.000);-o-transition:all 600ms cubic-bezier(0.390,0.575,0.565,1.000);transition:all 600ms cubic-bezier(0.390,0.575,0.565,1.000);-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-ms-transform-origin:50% 0;-o-transform-origin:50% 0;transform-origin:50% 0}
55
+ .zipper li.past:nth-child(odd),.zipper li.future:nth-child(odd){-webkit-transform:translateX(80%);-moz-transform:translateX(80%);-ms-transform:translateX(80%);-o-transform:translateX(80%);transform:translateX(80%)}
56
+ .zipper li.past:nth-child(even),.zipper li.future:nth-child(even){-webkit-transform:translateX(-80%);-moz-transform:translateX(-80%);-ms-transform:translateX(-80%);-o-transform:translateX(-80%);transform:translateX(-80%)}
57
+ .fade li{-webkit-transition:opacity .35s ease-in-out;-moz-transition:opacity .35s ease-in-out;-ms-transition:opacity .35s ease-in-out;-o-transition:opacity .35s ease-in-out;transition:opacity .35s ease-in-out}
58
+ .fade li.past{opacity:0}.fade li.future{opacity:0}.twirl{-webkit-perspective:400px;-moz-perspective:400px;-ms-perspective:400px;-o-perspective:400px;perspective:400px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;-ms-perspective-origin:50% 50%;-o-perspective-origin:50% 50%;perspective-origin:50% 50%}
59
+ .twirl li{-webkit-transition:all 600ms ease,opacity 200ms ease;-moz-transition:all 600ms ease;-ms-transition:all 600ms ease,opacity 200ms ease;-o-transition:all 600ms ease,opacity 200ms ease;transition:all 600ms ease,opacity 200ms ease;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%}
60
+ .twirl li.past{opacity:0;-webkit-transform:rotate3d(80,-70,10,180deg);-moz-transform:rotate3d(80,70,10,180deg);-ms-transform:rotate3d(80,70,10,180deg);-o-transform:rotate3d(80,70,10,180deg);transform:rotate3d(80,70,10,180deg)}
61
+ .twirl li.future{opacity:0;-webkit-transform:rotate3d(80,70,10,-180deg);-moz-transform:rotate3d(80,70,10,-180deg);-ms-transform:rotate3d(80,70,10,-180deg);-o-transform:rotate3d(80,70,10,-180deg);transform:rotate3d(80,70,10,-180deg)}
metadata ADDED
@@ -0,0 +1,88 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: strolljs-rails
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.1
5
+ platform: ruby
6
+ authors:
7
+ - Nikhil Nanjappa
8
+ - Ashish Upadhyay
9
+ - Ankur Gera
10
+ - Gourav Tiwari
11
+ - Hrishita Vaish
12
+ autorequire:
13
+ bindir: bin
14
+ cert_chain: []
15
+ date: 2014-02-25 00:00:00.000000000 Z
16
+ dependencies:
17
+ - !ruby/object:Gem::Dependency
18
+ name: bundler
19
+ requirement: !ruby/object:Gem::Requirement
20
+ requirements:
21
+ - - ~>
22
+ - !ruby/object:Gem::Version
23
+ version: '1.5'
24
+ type: :development
25
+ prerelease: false
26
+ version_requirements: !ruby/object:Gem::Requirement
27
+ requirements:
28
+ - - ~>
29
+ - !ruby/object:Gem::Version
30
+ version: '1.5'
31
+ - !ruby/object:Gem::Dependency
32
+ name: rake
33
+ requirement: !ruby/object:Gem::Requirement
34
+ requirements:
35
+ - - ! '>='
36
+ - !ruby/object:Gem::Version
37
+ version: '0'
38
+ type: :development
39
+ prerelease: false
40
+ version_requirements: !ruby/object:Gem::Requirement
41
+ requirements:
42
+ - - ! '>='
43
+ - !ruby/object:Gem::Version
44
+ version: '0'
45
+ description: A collection of CSS list scroll effects. Works in browsers with support
46
+ for CSS 3D transforms including a special touch-enabled mode for iOS & Android 4.x.
47
+ email:
48
+ - nikhil.nanjappa@tcs.com
49
+ - ashish.upadhyaye@gmail.com
50
+ - ankurgera@gmail.com
51
+ - gouravtiwari21@gmail.com
52
+ - vaish.hrishita@tcs.com
53
+ executables: []
54
+ extensions: []
55
+ extra_rdoc_files: []
56
+ files:
57
+ - lib/strolljs-rails.rb
58
+ - lib/strolljs-rails/helper.rb
59
+ - lib/strolljs-rails/rails.rb
60
+ - lib/strolljs-rails/version.rb
61
+ - vendor/assets/javascripts/stroll.min.js
62
+ - vendor/assets/stylesheets/stroll-default-style.css
63
+ - vendor/assets/stylesheets/stroll.min.css
64
+ homepage: ''
65
+ licenses:
66
+ - MIT
67
+ metadata: {}
68
+ post_install_message:
69
+ rdoc_options: []
70
+ require_paths:
71
+ - lib
72
+ required_ruby_version: !ruby/object:Gem::Requirement
73
+ requirements:
74
+ - - ! '>='
75
+ - !ruby/object:Gem::Version
76
+ version: '0'
77
+ required_rubygems_version: !ruby/object:Gem::Requirement
78
+ requirements:
79
+ - - ! '>='
80
+ - !ruby/object:Gem::Version
81
+ version: '0'
82
+ requirements: []
83
+ rubyforge_project:
84
+ rubygems_version: 2.2.2
85
+ signing_key:
86
+ specification_version: 4
87
+ summary: stroll.js – because it scrolls, and trolls. https://github.com/hakimel/stroll.js
88
+ test_files: []