

スクロール時の動きが地味なのでhttp://lab.hakim.se/scroll-
effects/のような動きをつけたいのですが、あまりに構造が違いすぎて途方に暮れているのですが、これに似た動きをする別のおすすめのjqueryはありますでしょうか。


CC BY-SA 3.0
2015-07-02T08:19:12.890
11955
2015-11-30T19:24:26.110
7724
question
monaca
ons-listにエフェクトをかけたい


`<ons-list>`は単なるCSSのプリセットですので、スタイリングにこだわりたいなら`<ons-
list>`をあえて使う必要はありません。普通に`<ul>`と`<li>`でマークアップして、CSSをいくらか書いてstroll.jsを使われてはどうでしょうか。

以下はAngularでの使用例です。

[code]

    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;
      };
    });
[/code]

[code]

    /**
     * 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;
     }
[/code]

[code]

    <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>
[/code]

-


CC BY-SA 3.0
2015-09-01T15:44:10.617
15123
2015-09-01T15:44:10.617
8532
11955
answer