質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1363閲覧

cssとjavasciptで絵の具を飛び散らす。

art_porokyu

総合スコア44

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/03/11 23:30

編集2022/01/12 10:55

クリックで色を飛びちらせたい

任天堂ゲーム「スプラトゥーン」のような色の飛び散り具合を表現したいのですが、どのように行えば良いのでしょうか?

index.html

1<div class="box"></div>

style.css

1.box{ 2 width: 700px; 3 height: 466.3px; 4 background: red; 5 position: absolute; 6 left: 50%; 7 -webkit-transform: scale(1) translate(-50%); 8 transform: scale(1) translate(-50%); 9 animation: shake .3s infinite; 10} 11 12.scale{ 13 position: absolute; 14 left: 50%; 15 animation: scale 2s 1; 16} 17 18@keyframes shake { 19 0% { left: 32.2%; transform: translate(-50px, 0px) rotateZ(0deg)} 20 25% { left: 32.2%; transform: translate(-52px, 2px) rotateZ(1deg)} 21 50% { left: 32.2%; transform: translate(-50px, 2px) rotateZ(0deg)} 22 75% { left: 32.2%; transform: translate(-52px, 0px) rotateZ(-1deg)} 23 100% { left: 32.2%; transform: translate(-50px, 0px) rotateZ(0deg)} 24} 25 26@keyframes scale{ 27 0%{ left: 50%; 28 border-radius: 0; 29 transform: scale(1) translate(-50%); } 30 30%{ background: green;} 31 40%{ background: yellow;} 32 100%{ left: 30%; 33 border-radius: 100%; 34 background: blue; 35 transform: scale(0) translate(-50%); } 36} 37

main.js

1$(function(){ 2$('.box').on('click', function(){ 3 $(this).addClass("scale"); 4 }); 5 6 $('.box').on('click', function(){ 7 $(this).delay(2000).queue(function(next){ 8 $(this).removeClass("box"); 9 next(); 10 }); 11 }); 12)};

##ゴール
divで作った四角をクリックしたら、サークル状に収縮していき、絵の具が周囲に弾けてそれが背景になる。
イメージは画像のような感じです。
イメージ説明

##試したこと
divで作った四角をクリックしたら、サークル状に収縮していくまではできたのですが、そこから色を飛び散らす処理が思い浮かびません。

どのような方法を取ればいいかご教授願います。
宜しくおねがいします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/03/12 09:38

簡単な絵でもいいので書いてもらえると分かりやすいかと。 > ここからどのようにすれば良いか分かりません。 も何がゴールでどういう動きまでできたのか分かりませんし。
art_porokyu

2019/03/13 03:07

ご指摘ありがとうございます。 画像を載せました。
art_porokyu

2019/03/13 12:06

このようなサイトがあるんですね! ありがとうございます。 画像を用意するのも手ですね! ちなみにこのサイトを探し当てたキーワードを教えて頂けませんか?
Lhankor_Mhy

2019/03/13 12:09

「javascript paint splash」だったと思います。web技術系は日本語で探すより英語で探した方が見つかりやすいです。 すでに消えてしまったページだったので、web archive で探しました。
art_porokyu

2019/03/13 12:12

なるほど。 英語でさがされたのですね! もう一度自分でも調べてみます! ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問