I want to put an effect on the ons-list.

ons.bootstrap().controller('appController', function($scope,$timeout){
  $timeout(function(){
    roll.bind('.stroll');
  });

  $scope.range=function(min,max,step){
    step=step||1;
    var input = [ ];
    for (vari=min;i<=max;i+=step) input.push(i);
    return input;
  };
});

/**
 * Demopage styles, all list scroll effects styles are in sctroll.css
 */
US>html,body{
	margin:0px;
	padding:0px;
}

body{
	background: #323232;
	font-family: 'Lato', Times, 'Times New Roman', serif;
	font-size: 16px;
	color:#ee;
	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-personal: 400px;
	   -moz-personal: 400px;
	    -ms-personal:400px;
	     -o-personal: 400px;
	        perspective —400px;
}
	ulli{
		position:relative;
		padding —16px;
		background: #eee;
		color:#2525;
		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: #ffff;
	}

<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>

<bodying-controller="appController">
  <article>
    <h2>Grow</h2>
    <ul class="grow roll"><ling-repeat="in range (1,100)">Item {{i}}</li></ul>;;
  </article>
  <article>
    <h2>Cards</h2>
    <ul class="cards roll"><ling-repeat="i in range (1,100)">Item {{i}}</li></ul>;;
  </article>
</body>