JS 波のアニメーション canvasを使ったアニメーションで波のような動きのサンプルです。 円弧の描画を繰り返して、波のようなアニメーションを実装しています。 実装にはjQueryを使っています。 HTML [[<canvas id="canvas_wav... 2020-03-28 22:57:39
CSS 左右に行き来するアニメーション 車、電車などホームページでちょっとした演出を施したいときのサンプルです。 CSSのアニメーションを利用して、画像を左右に行き来させています。 画像を変えればいろんなものに応用ができます。 一部jQueryを使ってますが、ほぼCSSの... 2019-07-28 14:44:36
JS ブラウザのURLを書き換える JavaScriptを使ってURLを書き換えます。 jQueryで実行するボタンを作り、下記の一行を書くだけで簡単に実装できます。 $(document).ready(function(){ $('#demo_btn1').click(function() {... 2019-07-28 15:45:35
HTML 横書きのふりがな 文字の上にふりがな(ルビ)を付けたいときに使えるrubyタグのサンプルです。 漢字の読み方を記述するときにふりがなを使います。 HTMLではふりがな用のタグが用意されてます。 ふりがなは概ねのブラウザで横書きの上に配置されます。... 2019-12-28 23:05:25
jQueryとCSS カードをクリックでめくる表現 jQueryとCSSのアニメーションを使って、カードをクリックすると画像がめくれる表現のサンプルです。 以前カードをめくるような表現のサンプルを記載しましたが、改善版です。 要素をコピペで量産、順番を変えてもJSの修正は不要のため、編集が楽になりました。... 2019-07-28 04:58:36
HTML5 ダウンロードボタン HTML5であればaタグに、download属性を書くだけでダウンロードボタンが作れます。 下記の画像をダウンロードしたいとき、右クリックで保存するのが一般的ですが、サイトの都合によってボタンを押したときにダウンロードが始まるようにしたい場合... 2019-07-28 04:49:43
JS CSV読み込みjQueryで表示 CSVを読み込み、jQueryで出力するサンプルです。 HTML5のFile APIを使ってローカルのCSVファイルを取り込み、加工できる状態にするスクリプトです。 下記のようなカンマ区切りのファイルをローカルに置き、... 2019-07-28 04:54:43
SVG 三角形のサンプル SVGで三角形を描くサンプルを紹介します。 ちょっとしたデザインで三角が使いたくなった時にいちいちフォトショップやイラストレーターで作成して、サーバーア... 2019-07-28 05:17:22
JS メーラー起動 HTMLではmailto:でリンクを作るとデフォルトのメーラーが立ち上がり、メールを送るよう促すことができます。 しかし、meilto:で書かれたメールアドレスは迷惑... 2019-07-28 13:51:44
jQuery 長押しで発動 マウスやスマホ用の長押しボタンのサンプルです。 クリックやタップの他に、長く押された時にイベントを発生したときは以下のように作ります。 このサンプルではボタンに触れて2秒後に設定しています。... 2019-07-28 04:12:53