strolljs-rails 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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: []
|