【かんたん】スライダーアニメーション生成ツール【Sliderland】とは?

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「Sliderland」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・スライダーアニメーションを作成したい方
・点を動かして、動きを付けたい方
・簡易的なプログラムを試したい方

「Sliderland」って何?

Sliderland」とは、(@blinry)さんが開発した 「スライダーアニメーション」作成ツールのことです。デフォルトで用意されている「変数(t・x・i)」の値を編集すると、64個のスライダーを自由に動かせます!(おもしろい!)

Sliderland
A minimalist creative coding playground, using only HTML sliders. Make animations using math!
本や雑誌の「3Dアニメーション」が作れちゃう!?【3D Book Image CSS Generator】とは?
みなさんこんにちは!おさかなです!今回は「3D Book Image CSS Generator」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・3Dブックを作成したい方・表紙画像を本にし...

実際に使ってみよう!

アニメーションをチェック!

それでは早速サイトにアクセスしましょう!

こんな感じで、動くアニメーションが作れるみたいです!(わくわく…!)

左右にある「矢印マーク」を押すと…?

様々なアニメーションのパターンが見れます。(おお!)

(ほっとひと息🍵)

変数の値を、編集しよう!

ページ上部にある「エディタ」には、プログラムが記述されており、自由に編集できます!(いいね)

例えば「階段」のようなアニメーションで、変数の値を8→5にすると、段数が5段に変更されました!(やったね🌸)

【p5.js】「砂」のアニメーション作成【Falling Sand】とは?
みなさんこんにちは!おさかなです!今回は「Falling Sand」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・p5.jsの学習をしたい方・JacaScriptでアニメーションを作成し...

保存しよう!

アニメーションを保存する時は、右下の「revord」ボタンを押して、録画します。

キリの良いタイミングで、「stop」ボタンを押しましょう!(えい!)

すると「mp4形式」のアニメーションが、自動保存されます!

↓実際に作成したものがこちら

Amazon.co.jp: アルゴリズム図鑑 絵で見てわかる26のアルゴリズム eBook : 石田保輝, 宮崎修一: 本
Amazon.co.jp: アルゴリズム図鑑 絵で見てわかる26のアルゴリズム eBook : 石田保輝, 宮崎修一: 本
おさかな
おさかな

ナビまるがいっぱいだー!

ナビまる
ナビまる

僕はスライダーの点じゃないわ!笑

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

マウスで動かした通りに【アニメーション】が作れちゃう?!【Animatize】とは?
みなさんこんにちは!おさかなです!今回は「Animatize」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・簡単なアニメーションを作りたい方・マウスで動かしたとおりに、アニメーションを作...
おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。引っ越し以外の理由で3回も転校したのに、結局中卒。
現在はマイペースに「プログラム」書いたり、「作曲」したり「文章」書いたり色々してます。
SAOのユウキが好きです!

おさかなをフォローする

この記事は役に立ちましたか?

タイトルとURLをコピーしました