【Lightning機能】スライダー機能を使ったパラパラアニメの作り方｜

当サイトでも配置している『Lightningのスライダー機能』を使ったアニメーションの作り方を解説します。

超カンタンなので、よかったら真似してみてください。

コレ↓を作ります

サンプル

作り方

１．Lightning　VKブロックレイアウト ＞ スライダー　を編集画面に追加します。

２．左側のリストビューを開いて『スライダー』の左側　＞　をクリックして、スライダーを展開します。

３．スライダーの中にある『スライダーアイテム』にカーソルを合わせ、右横に表示されるの　⁝　（呼び方：縦の三点リーダー 　または　ケバブメニュー）をクリックして『複製』をクリックします。これを繰り返して『スライダーアイテム』を４つ作ります。

４．それぞれのスライダーアイテムに用意した画像を入れていきます。

＊あらかじめ、４つの画像すべて『中央寄せに』し、画像サイズを『サムネイル』に変更しています

• スライダーアイテム１　右向き
• スライダーアイテム２　正面向き
• スライダーアイテム３　左向き
• スライダーアイテム４　正面向き

５．スライダー（親）をクリックして、ブロック編集画面の『スライド設定』を変更していきます。

６．一度下書きをして、プレビューしてみましょう。

問題なく動いていれば完成です。お疲れさまでした！

失敗例

PNGなどの背景が透過する画像の場合は、こんな風に残像が残ってしまうこともあります。気をつけてね。

まとめ

Lightningを提供しているVektor（ベクトル）さんは、初心者にもやさしい有料コンテンツが多数用意されています。気になる方はチェックしてみてください。