strolljs-rails 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +15 -0
- data/lib/strolljs-rails/helper.rb +20 -0
- data/lib/strolljs-rails/rails.rb +13 -0
- data/lib/strolljs-rails/version.rb +5 -0
- data/lib/strolljs-rails.rb +5 -0
- data/vendor/assets/javascripts/stroll.min.js +43 -0
- data/vendor/assets/stylesheets/stroll-default-style.css +88 -0
- data/vendor/assets/stylesheets/stroll.min.css +61 -0
- metadata +88 -0
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,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: []
|