＊画像に☆マークのエフェクトがランダムな位置に現れます＊

今回は、☆マークのpositionプロパティの値にJavaScriptで生成したランダムな数値を代入することにより、不規則な位置に☆が現れては消えるというエフェクトを作ってみました。

サンプルでは☆の出現位置は完全にランダムですが、計算式を工夫することで「特定のエリアに絞って、その範囲内でランダムに出現させる」ということも可能です。

【 CSS・JavaScript 】

＊チェックボックスにチェックを入れなければ、送信ボタンをクリックできない仕様のサンプルです＊

サイトにお問い合わせフォームを設置していると、お問い合わせ以外のメッセージが送られてきてしまうことがあります。

そういったメッセージが送られるのを少しでも防ぐ目的で、今回はチェックボックスにチェックを入れないと、送信ボタンをクリックできない仕様にしてみました。

【 HTML(input)・CSS・JavaScript 】

＊チェックの付け外しにアニメーションがついた、オリジナルチェックボックスです！＊

普通のチェックボックス（HTMLのinputタグ）を使うと、ブラウザで決められた既定のチェックボックスになってしまい、自由自在なカスタマイズはできません。

そこで、既定のチェックボックスはCSSで隠しつつ、オリジナルで作ったチェックボックスにチェックを入れたり外したりできる機能のサンプルを作ってみました！

【 HTML(canvas)・CSS・JavaScript 】

＊入力した文字が画像になり、ダウンロードできます！＊

文字色とふちどりの色を選択し、文字を入力して「画像化する」ボタンを押すと、入力した文字が画像かされます。

さらに、その後「画像をダウンロード」をクリックすることで、画像を保存できます。

【 HTML(canvas)・JavaScript 】

＊HTMLのcanvas要素にJavaScriptで矢印と文字のアニメーションを描写＊

今回のサンプルコードの特徴は、描写に関してはCSSを一切使用していないという点です。

canvas要素にJavaScriptで描写して画像として扱うことで、配置崩れなどを起こすことなく、他の要素に影響を及ぼさずにアニメーションをつけることが可能となります。

【 HTML(canvas)・JavaScript 】

＊クリック（タップ）するとボックスが回転してフタが開閉します＊

一見平面に見える「front」と書かれたボックスをクリックすると、回転して3Dであることがわかります。回転させるだけだと面白くないので、フタが開くようにしてみました。

フタが開いた状態のボックスをクリックすると、フタが閉じて元の状態に戻ります。

【 CSS・JavaScript 】

＊クリックで開閉するアコーディオンメニューです＊

シンプルですが、大項目に付属している「 ▼ 」マークがメニューの開閉に合わせて回転したり、子メニューのマウスオーバー時に背景色とフォントサイズが変わったりなど、ちょっとした工夫も入れています。

【 CSS・JavaScript 】

＊スクロールして画面内にコンテンツが含まれたら、スライドして現れる機能です＊

コンテンツまでのスクロール量と、画面（あるいはスクロール可能なボックス内）のスクロール量を取得し、それらの量を比べることでコンテンツのCSS変更タイミングを調整しています。

【 CSS・JavaScript 】

　

＊アナログ時計機能です＊

時間を数値で表示させるだけでなく、プログラムで現在の時刻を取得した上で時針、分針、秒針がリアルタイムで動くアナログ時計にしてみました。時計の針の他に、時刻の目安となる線や数字も付けています。

【 CSS・JavaScript 】

＊カラーボックスをクリックして色を選択することで、ユーザーが任意で好きな文字色・背景色にすることができる機能です＊

Webページにちょっとした遊び心を加えたいケースや、特定の色が見づらい人のためのアクセシビリティの向上に利用できます。

【 CSS・JavaScript 】