0

私は有名な超初心者で、中級者から角度のある人です。

質問: すべてが有名な位置に固定されているため、有名な角度を使用してスクロール可能なセクションを作成するにはどうすればよいですか?

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();

ここに画像の説明を入力

4

1 に答える 1