【TweenMax + ScrollMagic】スクロールで段違いになるブロック

【天秤座今日の運勢】 ジャンプしてブロック壊したり、栗踏んだりする横スクロールアクションをやろう(目標) 【らっきょうカラー】 白だろ阿呆
ちなみに画面が上にスクロールしないと、上から6ブロック目ぐらいに見えない天井が出来るみたいです。
Above the fold意識して書いてると、PageSpeed Insightsでパフォーマンス計測したときに「スクロールせずに見えるコンテンツのレンダリングをブロックしている javascript/css を排除する」って指摘されないよね!
公式さんを手違いでブロックしそうになった、、、右端スクロールやばい
【天秤座今日の運勢】 ジャンプしてブロック壊したり、栗踏んだりする横スクロールアクションをやろう(目標) 【らっきょうカラー】 白だろ阿呆
たまたまスクロールしてたら「ブロックしますか?」って出てくそほど笑ってる
【天秤座今日の運勢】 ジャンプしてブロック壊したり、栗踏んだりする横スクロールアクションをやろう(目標) 【らっきょうカラー】 白だろ阿呆
とりあえずスクロールしなくても気づけるように公式系をブロックしてきたwww😂
Mキーで呼び出せる全体マップにはオブジェクトが正確に書かれている。方向キーでスクロールさせる事が出来る。マウスホイールで拡大出来る。 これらを使えば、「左の海と右の海の水位差は何ブロックか」などといったものも確認できるぞ。イエァァ
スマホ画面の反応がバグっていて、スクロールしていると勝手に止まったりしてイライラ。 意図せぬクリックをしちゃうのが困る。 ♥️の誤爆位ならまだしも、気付かない内に、リムやブロックしてる事故がありそうで怖いなぁ
ブロック区切りの横スクロールだとして端の方に行くと非同期でマップロードする時配列どう操作すればいいんだろう・・・ Chunkの配列用意して端に行くと始端の要素をアンロードしてシフトして終端にロードとか?

初めてやったので(あとアニメーションをちゃんと理解してないので)自分の理解用のメモ

サンプルコード(CodePen)
※サンプルは手っ取り早くbootstrapを使ってます。

使用ライブラリ

アニメつけてるjs

TweenMax.js

スクロール用のjsとそのプラグイン

ScrollMagic.js

animation.gsap.min.js(ScrollMagicのプラグイン)

デバッグ用

debug.addIndicators.min.js(ScrollMagicのプラグイン)

js部分

  // スクロール用のコントローラー追加
  var controller = new ScrollMagic.Controller();

  // アニメーション定義
  var tween = new TimelineMax()
  .fromTo(
// fromToはこれ(先に指定したやつ。ここだと.anim-1のy:0)からこれ(後に指定したやつ。ここだと.anim-1のy:"250%")に変化させる
    $(".anime-wrap .anim-1"), .2, {y: "0"}, {y: "250%"}, 0
  ).fromTo(
    $(".anime-wrap .anim-5"), .2, {y: "0"}, {y: "250%"}, 0
  ).fromTo(
    $(".anime-wrap .anim-2"), .2, {y: "0"}, {y: "100%"}, 2// 0番目の中にあるけど3番目に実行
  ).fromTo(
    $(".anime-wrap .anim-6"), .2, {y: "0"}, {y: "100%"}, 0
  ).fromTo(
    $(".anime-wrap .anim-3"), .2, {y: "0"}, {y: "210%"}, 1
  ).fromTo(
    $(".anime-wrap .anim-7"), .2, {y: "0"}, {y: "210%"}, 0
  ).fromTo(
    $(".anime-wrap .anim-4"), .9, {y: "0"}, {y: "140%"}, 0// 0番目の中で一番遅くしてみた.9のところで実行の時間調整できる
  ).add(// 次にやるアニメーションを追加
    TweenMax.fromTo(// 上記が終わって一番最後に実行
      $(".anime-wrap .anim-8"), .2, {y: "140%"}, {y: "240%"}, 0
    )
  );

  // シーンの定義
  new ScrollMagic.Scene({
    triggerElement: ".anime-wrap", 
    triggerHook: .9, // トリガー位置
    offset: "0%", // 開始地点
    duration: "100%" // 開始から終了までのスクロールの長さ
  })
  .setTween(tween)
  .addTo(controller)
  .addIndicators({name: "scroll"});// デバッグ用なのでリリース時は必ず消す。画面右に出てるtriggerとかの目安の位置

[紹介元] jQueryタグが付けられた新着投稿 – Qiita 【TweenMax + ScrollMagic】スクロールで段違いになるブロック

  • コメント

    1. 匿名希望
      2017/09/13(水) 16:56:50

      【天秤座今日の運勢】
      ジャンプしてブロック壊したり、栗踏んだりする横スクロールアクションをやろう(目標)
      【らっきょうカラー】
      白だろ阿呆

    2. 匿名希望
      2017/09/13(水) 16:56:50

      スマホ画面の反応がバグっていて、スクロールしていると勝手に止まったりしてイライラ。
      意図せぬクリックをしちゃうのが困る。
      ♥️の誤爆位ならまだしも、気付かない内に、リムやブロックしてる事故がありそうで怖いなぁ

    3. 匿名希望
      2017/09/13(水) 16:56:50

      Mキーで呼び出せる全体マップにはオブジェクトが正確に書かれている。方向キーでスクロールさせる事が出来る。マウスホイールで拡大出来る。
      これらを使えば、「左の海と右の海の水位差は何ブロックか」などといったものも確認できるぞ。イエァァ

    4. 匿名希望
      2017/09/13(水) 16:56:50

      とりあえずスクロールしなくても気づけるように公式系をブロックしてきたwww😂

    5. 匿名希望
      2017/09/13(水) 16:56:50

      【天秤座今日の運勢】
      ジャンプしてブロック壊したり、栗踏んだりする横スクロールアクションをやろう(目標)
      【らっきょうカラー】
      白だろ阿呆

    記事に戻る

関連記事