みなさんこんにちは!おさかなです!
今回は「Sliderland」について、書いていこうと思います!
それでは、レッツゴー!!!!!
想定読者
・スライダーアニメーションを作成したい方
・点を動かして、動きを付けたい方
・簡易的なプログラムを試したい方
・スライダーアニメーションを作成したい方
・点を動かして、動きを付けたい方
・簡易的なプログラムを試したい方
「Sliderland」って何?
「Sliderland」とは、(@blinry)さんが開発した 「スライダーアニメーション」作成ツールのことです。デフォルトで用意されている「変数(t・x・i)」の値を編集すると、64個のスライダーを自由に動かせます!(おもしろい!)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/e80c135ebcbcc1328a5d1215d6d2fada.png)
Sliderland
A minimalist creative coding playground, using only HTML sliders. Make animations using math!
![](https://osakanav.com/wp-content/uploads/2021/11/3dbook-top-160x90.gif)
本や雑誌の「3Dアニメーション」が作れちゃう!?【3D Book Image CSS Generator】とは?
みなさんこんにちは!おさかなです!今回は「3D Book Image CSS Generator」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・3Dブックを作成したい方・表紙画像を本にし...
実際に使ってみよう!
アニメーションをチェック!
それでは早速サイトにアクセスしましょう!
![](https://osakanav.com/wp-content/uploads/2022/06/sliderland.png)
こんな感じで、動くアニメーションが作れるみたいです!(わくわく…!)
![](https://osakanav.com/wp-content/uploads/2022/06/sliderland.gif)
左右にある「矢印マーク」を押すと…?
![](https://osakanav.com/wp-content/uploads/2022/06/sliderland-yajirusi.png)
様々なアニメーションのパターンが見れます。(おお!)
![](https://osakanav.com/wp-content/uploads/2022/06/sliderland-type.gif)
(ほっとひと息🍵)
変数の値を、編集しよう!
ページ上部にある「エディタ」には、プログラムが記述されており、自由に編集できます!(いいね)
![](https://osakanav.com/wp-content/uploads/2022/06/sliderland-code.png)
例えば「階段」のようなアニメーションで、変数の値を8→5にすると、段数が5段に変更されました!(やったね🌸)
![](https://osakanav.com/wp-content/uploads/2022/06/sliderland-edit.gif)
![](https://osakanav.com/wp-content/uploads/2022/05/sand-top-160x90.png)
【p5.js】「砂」のアニメーション作成【Falling Sand】とは?
みなさんこんにちは!おさかなです!今回は「Falling Sand」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・p5.jsの学習をしたい方・JacaScriptでアニメーションを作成し...
保存しよう!
アニメーションを保存する時は、右下の「revord」ボタンを押して、録画します。
![](https://osakanav.com/wp-content/uploads/2022/06/sliderland-record.png)
キリの良いタイミングで、「stop」ボタンを押しましょう!(えい!)
![](https://osakanav.com/wp-content/uploads/2022/06/sliderland-stopbtn.png)
すると「mp4形式」のアニメーションが、自動保存されます!
![](https://osakanav.com/wp-content/uploads/2022/06/sliderland-douga.png)
↓実際に作成したものがこちら
https://amzn.to/38OeZul
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おさかな
ナビまるがいっぱいだー!
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
ナビまる
僕はスライダーの点じゃないわ!笑
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2022/01/animetize-top-160x90.png)
マウスで動かした通りに【アニメーション】が作れちゃう?!【Animatize】とは?
みなさんこんにちは!おさかなです!今回は「Animatize」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・簡単なアニメーションを作りたい方・マウスで動かしたとおりに、アニメーションを作...