私は有名な超初心者で、中級者から角度のある人です。
質問: すべてが有名な位置に固定されているため、有名な角度を使用してスクロール可能なセクションを作成するにはどうすればよいですか?
HTML: これは、正方形のグリッドを作成します。このコードは、Famous/angular tutから取得したものです。
<fa-app id="app">
<fa-grid-layout fa-options="myGridLayoutOptions">
<fa-modifier ng-repeat="item in list"
fa-size="[100, 100]"
fa-origin="[0.5, 0.5]"
fa-align="[0.5, 0.5]"
fa-rotate-z="item.rotate.get()">
<fa-surface fa-background-color="item.bgColor">
{{item.content}}
</fa-surface>
</fa-modifier>
</fa-grid-layout>
</fa-app>
CSS: アプリ ウィンドウの配置
#app {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
CTRL: 3x3 グリッドを作成し、リスト項目をループします
var Engine = $famous[('famous/core/Engine')];
var Surface = $famous[('famous/core/Surface')];
var Transitionable = $famous['famous/transitions/Transitionable'];
var Easing = $famous['famous/transitions/Easing'];
$scope.myGridLayoutOptions = {
dimensions: [3, 3]
};
$scope.list = [
{content:"hello", bgColor: "#b58900", rotate: new Transitionable(0)},
{content:"world", bgColor: "#cb4b16", rotate: new Transitionable(0)},
{content: "famous", bgColor: "#dc322f", rotate: new Transitionable(0)},
{content: "angular", bgColor: "#d33682", rotate: new Transitionable(0)},
{content: "is", bgColor: "#6c71c4", rotate: new Transitionable(0)},
{content: "cool!", bgColor: "#268bd2", rotate: new Transitionable(0)},
{content: "asd", bgColor: "#d33682", rotate: new Transitionable(0)},
{content: "ass", bgColor: "#6c71c4", rotate: new Transitionable(0)},
{content: "fffs!", bgColor: "#268bd2", rotate: new Transitionable(0)},
{content:"hello", bgColor: "#b58900", rotate: new Transitionable(0)},
{content:"world", bgColor: "#cb4b16", rotate: new Transitionable(0)},
{content: "famous", bgColor: "#dc322f", rotate: new Transitionable(0)},
{content: "angular", bgColor: "#d33682", rotate: new Transitionable(0)},
{content: "is", bgColor: "#6c71c4", rotate: new Transitionable(0)},
{content: "cool!", bgColor: "#268bd2", rotate: new Transitionable(0)},
{content: "asd", bgColor: "#d33682", rotate: new Transitionable(0)},
{content: "ass", bgColor: "#6c71c4", rotate: new Transitionable(0)},
{content: "fffs!", bgColor: "#268bd2", rotate: new Transitionable(0)}
];
$scope.animate = function() {
for (var i = 0; i < $scope.list.length; i++) {
$scope.list[i].rotate.set(Math.PI * 4, {curve: Easing.inOutElastic, duration: 3000 * i})
};
};
$scope.animate();