# ページロード時のアニメーションについて

**URL:** <https://www.nocode-faq.com/t/topic/2548>\
**Category:** bubble\
**Created:** [2022 年 1 月 26 日午前 8:57 UTC](https://www.nocode-faq.com/t/topic/2548 "2022-01-26T08:57:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rintaro.ishii0719](https://avatars.discourse-cdn.com/v4/letter/r/e99b99/32.png) [@rintaro.ishii0719](https://www.nocode-faq.com/u/rintaro.ishii0719)\
**Post date:** [2022 年 1 月 26 日午前 8:57 UTC](https://www.nocode-faq.com/t/topic/2548/1 "2022-01-26T08:57:35Z")

</div>

ページを開いたときにこんな感じの花吹雪を舞わせたいなと思っているのですが、  
こういったことはBubbleでもできるものでしょうか？

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/1/1826b7f71734ed1a50fdb3de623cb88649c3e377.png)

こちらのようにHTML+JSで実装するしかないものでしょうか？

> **[紙吹雪が舞う | 動くWebデザインアイディア帳](https://coco-factory.jp/ugokuweb/move02/5-8/)**

---

<div class="post-metadata">

**Author:** ![jansnap](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/jansnap/32/6599_2.png) [@jansnap](https://www.nocode-faq.com/u/jansnap)\
**Post date:** [2022 年 1 月 27 日午前 12:20 UTC](https://www.nocode-faq.com/t/topic/2548/2 "2022-01-27T00:20:15Z")

</div>

参考ページはparticles.jsですが、vanta.jsなんかも選択肢の一つですよね。  
Bubbleに元から備わっているエレメントではそういった機能はないので、JavaScriptを使うしかなさそうです💦  
（ひょっとしたらプラグインがあるかも知れませんが）

---

<div class="post-metadata">

**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\
**Post date:** [2022 年 1 月 27 日午前 7:20 UTC](https://www.nocode-faq.com/t/topic/2548/3 "2022-01-27T07:20:23Z")

</div>

昔、調べたことありますが、BubbleのPluginもなさそうです💦

---

<div class="post-metadata">

**Author:** ![yukikun](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yukikun/32/3485_2.png) [@yukikun](https://www.nocode-faq.com/u/yukikun)\
**Post date:** [2022 年 1 月 27 日午前 7:29 UTC](https://www.nocode-faq.com/t/topic/2548/4 "2022-01-27T07:29:30Z")

</div>

気合いがあればできますね。  
息抜きでサンプル見ながら無理やり実装したので、エラー出まくりですが紙吹雪表示されます。  
ガバガバ実装なので、出るとき出ない時があります。（出なかったらリロードしてください）  
正しくは、javascriptをロードするタイミングをしっかり制御してあげないと毎回綺麗に表示されるようにならないと思います。

> **[Bubble - Visual Programming](https://coffeelogggg.bubbleapps.io/version-test/testttt)**
>
> Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

---

<div class="post-metadata">

**Author:** ![rintaro.ishii0719](https://avatars.discourse-cdn.com/v4/letter/r/e99b99/32.png) [@rintaro.ishii0719](https://www.nocode-faq.com/u/rintaro.ishii0719)\
**Post date:** [2022 年 1 月 27 日午前 9:50 UTC](https://www.nocode-faq.com/t/topic/2548/5 "2022-01-27T09:50:15Z")

</div>

皆さん、ご回答いただき誠にありがとうございます！

プラグインはなく、JSで実装する必要があるのですね！

BubbleでJSを使ったことがないので、調べながらやってみます！  
（また、詰まったらご質問してしまうかもしれません。。）