スクロール時の動きが地味なのでhttp://lab.hakim.se/scroll-effects/のような動きをつけたいのですが、あまりに構造が違いすぎて途方に暮れているのですが、これに似た動きをする別のおすすめのjqueryはありますでしょうか。
1 件の回答
<ons-list>
は単なるCSSのプリセットですので、スタイリングにこだわりたいなら<ons-list>
をあえて使う必要はありません。普通に<ul>
と<li>
でマークアップして、CSSをいくらか書いてstroll.jsを使われてはどうでしょうか。
以下はAngularでの使用例です。
ons.bootstrap().controller('appController', function($scope, $timeout){
$timeout(function(){
stroll.bind('.stroll');
});
$scope.range = function(min, max, step){
step = step || 1;
var input = [];
for (var i = min; i <= max; i += step) input.push(i);
return input;
};
});
/**
* Demo page styles, all list scroll effects styles are in sctroll.css
*/
html, body {
margin: 0px;
padding: 0px;
}
body {
background: #323232;
font-family: 'Lato', Times, 'Times New Roman', serif;
font-size: 16px;
color: #eee;
margin-bottom: 40px;
line-height: 1;
}
article {
display: inline-block;
margin: 20px;
}
h2 {
font-size: 16px;
margin-bottom: 20px;
text-transform: uppercase;
}
/**
* List used for the demo page
*/
ul {
position: relative;
width: 230px;
height: 480px;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: scroll;
list-style: none;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-ms-perspective: 400px;
-o-perspective: 400px;
perspective: 400px;
}
ul li {
position: relative;
padding: 16px;
background: #eee;
color: #252525;
font-size: 18px;
z-index: 2;
-webkit-transform: translateZ(0px);
-moz-transform: translateZ(0px);
-ms-transform: translateZ(0px);
-o-transform: translateZ(0px);
transform: translateZ(0px);
}
ul li:nth-child(odd) {
background: #fff;
}
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/hakimel/stroll.js/master/css/stroll.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>
<script src="https://cdn.rawgit.com/hakimel/stroll.js/master/js/stroll.min.js"></script>
<body ng-controller="appController">
<article>
<h2>Grow</h2>
<ul class="grow stroll"><li ng-repeat="i in range(1, 100)">Item{{i}}</li></ul>
</article>
<article>
<h2>Cards</h2>
<ul class="cards stroll"><li ng-repeat="i in range(1, 100)">Item{{i}}</li></ul>
</article>
</body>
-