JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス
2018年8月6日 JavaScript, jQuery Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ ↑私が10年以上利用している会計ソフト！ wavify See the Pen wavify Demo by Mana (@manabox) on CodePen. GitHub wavifyはjQueryのプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVGコードを用意すればOK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg
jQueryUIのDialogをカスタマイズする6つの物凄く細かい小技 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） jQueryUIのdialogは結構お世話になっているのですが、たまに欲しい機能がなかったり、あっても説明されてなかったりするのでここにDialogカスタマイズTipsをしたためておきます。 この記事の内容は既に古くなっています。現在最新バージョンのjQueryUIでは挙動が改善されていたり、渡せるオプションが変わっていたりします。 Modalしたダイアログをオーバーレイクリックで閉じる 任意の要素をクリックして閉じる アニメーションで閉じる・開く エフェクト中にオーバーレイの後ろに回りこんでしまうのを回避する 閉じる・開くアニメーションにパラメータを渡す 閉じるついでにデストロイする 1. Modalしたダイアログをオーバーレイクリックで閉じる escキー押下で閉じるオプションはあるのですが、このオプションはない様子。 そこで
jQuery UI Datepicker を試してみる（導入編） – 北風研究室
日付をテキストボックスへ入力を支援のために、カレンダーを表示して選べるようにするのは便利です。しかし実装はなかなか大変です。そのような手間をすでにライブラリとして提供してくれる Datepicker (jQuery UI Datepicer) というものがあります。 見た目もなかなか良くて、機能も充実しているのでお勧めです。 jQuery UI Datepicker は、ポップアップでカレンダーを表示して（常に表示も可能）日付を選ぶと関連付けしたテキストボックスへ値を日付形式でテキストボックスに表示します。（下図参照） jQuery UI Datepicker （カレンダー）は日付入力の支援を簡単に実現できます。 まずは、インストールです。HTTP サーバーのアクセスできる場所へ jQuery, jQuer-UI を展開します。 CentOS の Apache のデフォルト設定を例に説明し
使い道は色々！iphone風のラジオボタンやトグルスイッチが作れるJSを紹介！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのももこです。 今回はiphoneで使用されているフォームの部品と同じ物を使えるようにするJSをご紹介します。 iphone-style-switches iPhoneのラジオボタン風の部品が作れます。 用意するものはjqueryとスイッチの切り替え時に使用する背景画像です。 デモの場合、背景画像はcssスプライトを使用する前提で作られています。 選択した要素にクラス：selectedを振りbackground-positionを切り替える事でON・OFFを実現しています。 HTML <p class="field switch"> <input type="radio" id="radio1" name="field" checked /> <input type="radio" id="radio2" name="field" /> <label for="rad
jQuery UI の Slider プラグインによるスライダー
jQuery UI の Slider プラグインについての記事。 Slider プラグインは、水平スライダーや垂直スライダーを簡単に作れる。 実装例（サンプル） 実装例（サンプル）について スライダー左端の四角のハンドルをドラックして、トラック上を移動させることができる。 トラック上をクリックすると、ハンドルを、その場所へ、移動させることができる。 実装例（サンプル）のソースコード 読み込み パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="stylesheet" href="themes/base/jquery.ui.all.css" /> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="ui/
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.techboon.info/archives/278
Loading...
https://repopgl.org/