- JS 数字のカウントアップ演出
- 数字を指定した数まで足して、積み上がっていく表現をJavaScriptで実装するサンプルです。 今回はライブラリを使って数字をカウントアップさせます。 金額や点数を演出するときなどに使えそうです。 ここでは最低限のオプションだけ実装しています...
- 2019-08-04 00:05:58
kipure
UIサンプルギャラリー「キプレ」
jQuery
HTML
Package
CSS
JavaScript
PHP
jQuery
HTML5
CSS3
Smarty
Twig
AngularJS
SVG
python
VueJS
BackboneJS
Blade
GoogleAppsScript
Laravel
Node.js
PWA
React
SCSS
Git
close
MENU
用途
新着
履歴
言語
- デザイン [32]
- jQuery 時差読込レイジーロード
- CSS3 オンマウスで画像拡大
- jQuery カラーピッカー
- jQuery スクロールで表示
- jQuery オーバーレイ
- CSS3 アニメーション
- CSS3 角を丸くする
- CSS 画像のぼかし、補正
- jQuery マウスオーバーで画像入れ替え
- jQuery レスポンシブデザイン
- jQuery スライドスイッチ
- jQuery 透明度を変更する
- CSS マーカーのような表現
- CSS3 flexを使った配置３（行間の操作）
- jQuery IDやClass指定でスタイルを変える
- jQuery メニューのトグルボタン
- jQuery アコーディオンメニュー
- jQuery フェードインアウト
- jQuery スクロールでクラス付加、解除
- jQuery オーバーレイ スマホ版
- jQuery メディアクエリと同様の出し分け
- CSS 左右に行き来するアニメーション
- CSS ヘッダー固定
- CSS 湯気の表現
- jQuery 長押しで発動
- CSS3 グラデーション
- CSS displayやvisibilityなど非表示にする
- CSS3 陰影
- jQuery ツールチップ
- jQuery パララックス 簡易版
- jQuery クラスで一括操作
- HTML 【基本編】 [2]
- グラフいろいろ [5]
- jQuery プラグイン [5]
- Apple関連 [3]
- 図形いろいろ [10]
- オーバーレイ [1]
- スクロール [11]
- ajax 非同期通信 [2]
- コピー [2]
- 便利なウェブツール [7]
- 震える [2]
- ブラウザ制御系 [10]
- SQL [1]
- 画像 [15]
- 印刷 [2]
- JavaScript【基本編】 [2]
- htaccess [2]
- unix [1]
- jQuery【基本編】 [5]
- スマホならでは [8]
- jQuery ハマりがち [4]
- リンク [1]
- アコーディオン [1]
- ローカルストレージ [1]
- フォーム [11]
- 文字が多い時 [5]
- ティッカー [1]
- モーダルウィンドウ [1]
- 配置 [10]
- ウェブ広告関連 [4]
- Google関連 [1]
- 文字を目立たせたい [2]
- 時間的な制御 [4]
- 動画 [1]
- 数字 [3]
- 条件分岐 [3]
- アニメーション [17]
- 絞り込みフィルター [2]
- コーディング [2]
- HTML
- Package
- CSS
- CSS3
- CSS3 要素を回転させる
- CSS3 flexを使った配置３（行間の操作）
- CSS3 flexを使った配置２（要素の改行）
- CSS3 画像を左右に回転する
- CSS3 数値を演算で演算して指定する
- CSS3 震える表現
- CSS3 ウィンドウサイズ変更でアニメーション
- CSS3 陰影
- CSS3 グラデーション
- CSS3 背景のサイズ
- CSS3 アニメーション
- CSS3 角を丸くする
- SCSS
- CSS 画像のぼかし、補正
- CSS ヘッダー固定
- Storybookの実行メモ（Vue.js版）
- CSS 湯気の表現
- CSS マーカーのような表現
- CSS 印刷のときに非表示
- CSS floatとheightとtopの50%
- CSS positonのabsoluteとrelative
- CSS 吹き出し
- CSS 初めてのCSS
- CSS 覚えておくと便利なセレクタ
- CSS displayやvisibilityなど非表示にする
- CSS floatで子要素の高さを親要素へ反映させる
- JavaScript
- jQuery
- jQuery 画像遅延読み込みのサンプル
- jQuery スクロールでURLを書き換える
- jQuery 自動ドア風アニメーション
- CSS 左右に行き来するアニメーション
- jQuery 消去法のUI
- jQuery タブ（横）シンプル版
- jQuery 要素をタグで囲う
- jQuery スライドスイッチ
- jQuery クラスで一括操作
- jQuery 透明度を変更する
- jQuery コンテンツの選択と変更
- jQuery 要素のクローンを作成
- jQuery 入力フォームの変更時に発動させる
- jQuery フォームをフォーカスする、はずすで発動
- jQuery 非同期通信の完了検知
- jQuery 要素を追加・移動する
- jQuery 要素を追加するいろんな方法
- jQuery 同じ処理の部分だけまとめる
- jQuery 使ってしまいそうな非推奨のメソッド
- jQuery マウスオーバーで画像入れ替え
- jQuery 長押しで発動
- 広告費の指標「ROI」
- 広告費の指標「ROAS」
- 広告費の指標「CPA」
- jQuery フェードインアウト
- jQuery 処理を遅らせる
- CSS3 やわらかい動き
- jQuery キーを押されたら実行
- jQuery 日付指定
- jQuery BMIの計算ツール
- jQuery 画像読み込んでから発火
- jQueryとCSS カードをクリックでめくる表現
- jQuery スクロールでクラス付加、解除
- jQuery マウスのトリガーいろいろ
- JS 緯度経度を取得する
- jQuery クラスをSVGタグに追加、変更
- jQuery 要素のスライド
- URLエンコード、デコードツール
- jQuery iframeを後から読み込み
- jQuery JSONの読み込み
- jQuery 処理の実行
- jQuery 指定の高さを超えたらボタンを表示
- jQuery メディアクエリと同様の出し分け
- jQuery パララックス 簡易版
- jQuery スタイルの数値取得
- jQuery メニューのトグルボタン
- jQuery スクロールで移動速度を変える
- jQuery 画像のコピー防止の比較
- jQuery 文字数に応じてスタイル変更
- jQuery デバイス判別
- jQuery 右クリックを画像ごとに制御
- jQuery アコーディオンメニュー
- jQuery オーバーレイ スマホ版
- jQuery HTMLの属性を指定して編集
- jQuery Cookieで表示回数制限
- jQuery スムーズスクロール
- jQuery レスポンシブデザイン
- jQuery IDやClass指定でスタイルを変える
- jQuery クッキーに保存
- jQuery 時差読込レイジーロード
- jQuery ツールチップ
- CSS3 オンマウスで画像拡大
- jQuery カラーピッカー
- jQuery カードをめくる表現
- jQuery ドロワーメニュー
- jQuery プルダウン
- jQuery フォームの値を取得する
- jQuery スクロールで表示
- jQuery オーバーレイ
- jQuery テキストティッカー
- jQuery IDを取得する
- jQuery スクロール最下部を検知
- jQuery 「.live」メソッドは使わない
- jQuery 一覧の絞り込み
- jQuery 離脱時に警告を出す
- jQuery 初めてのjQuery
- jQuery タブ（横・縦）
- jQuery カルーセル
- jQuery ウィンドウ操作
- jQuery モーダルウィンドウ
- jQeury スクロールでヘッダー表示
- jQuery パララックス基本動作
- AngularJS
- AngularJS リピートのフィルターいろいろ
- AngularJS 構文を表示させない
- AngularJS bindについて
- AngularJS 基礎 Hello world
- AngularJS 並び替え
- VueJS
- BackboneJS
- Node.js
- JS 数字のカウントアップ演出
- JS 時間取得と加工
- JS ESモジュールを使ったDOM操作
- JS 文字列一致
- JS 感圧で遊ぶ
- JS 感圧の検証
- JS 元画像のサイズと表示画像のサイズ
- JS タップ圧力（感圧）検知
- JS URLのハッシュ値をUIに活用する
- JS 加速度検知
- JS 傾き検知
- JS idやclassの値取得
- JS バイブレーション
- JS CSV読み込みjQueryで表示
- JS クリックでコピー
- JavaScript 値のチェック
- JS URLクエリ取得
- JS cookie書き込み
- JS メーラー起動
- JS unixタイムを取得
- JS aタグを使わないリンクいろいろ
- JS ブラウザのURLを書き換える
- webGL 図形を描画してみる
- enchant.js ゲームやアプリ作りの入門
- JavaScript 文字省略 clamp.js
- JS レーダーチャート
- JS 線グラフ
- JS 棒グラフ
- JS 円グラフ
- JS はじめてのJavaScript
- PHP
- Smarty
- Twig
- Blade
- Laravel
- React
- PHP コードの再利用
- PHP クラスの継承
- PHP ハッシュについて
- QRコード 生成ツール
- PHP 単語の分解
- PHP 文字列切り出し
- PHP 四捨五入 切捨て 切上げ
- exif 画像に付随した情報を調べる
- Access-Control-Allow-Originエラー回避
- SVG
- python
- GoogleAppsScript
- Git
- デザイン [32]
- jQuery 時差読込レイジーロード
- CSS3 オンマウスで画像拡大
- jQuery カラーピッカー
- jQuery スクロールで表示
- jQuery オーバーレイ
- CSS3 アニメーション
- CSS3 角を丸くする
- CSS 画像のぼかし、補正
- jQuery マウスオーバーで画像入れ替え
- jQuery レスポンシブデザイン
- jQuery スライドスイッチ
- jQuery 透明度を変更する
- CSS マーカーのような表現
- CSS3 flexを使った配置３（行間の操作）
- jQuery IDやClass指定でスタイルを変える
- jQuery メニューのトグルボタン
- jQuery アコーディオンメニュー
- jQuery フェードインアウト
- jQuery スクロールでクラス付加、解除
- jQuery オーバーレイ スマホ版
- jQuery メディアクエリと同様の出し分け
- CSS 左右に行き来するアニメーション
- CSS ヘッダー固定
- CSS 湯気の表現
- jQuery 長押しで発動
- CSS3 グラデーション
- CSS displayやvisibilityなど非表示にする
- CSS3 陰影
- jQuery ツールチップ
- jQuery パララックス 簡易版
- jQuery クラスで一括操作
- HTML 【基本編】 [2]
- グラフいろいろ [5]
- jQuery プラグイン [5]
- Apple関連 [3]
- 図形いろいろ [10]
- オーバーレイ [1]
- スクロール [11]
- ajax 非同期通信 [2]
- コピー [2]
- 便利なウェブツール [7]
- 震える [2]
- ブラウザ制御系 [10]
- SQL [1]
- 画像 [15]
- 印刷 [2]
- JavaScript【基本編】 [2]
- htaccess [2]
- unix [1]
- jQuery【基本編】 [5]
- スマホならでは [8]
- jQuery ハマりがち [4]
- リンク [1]
- アコーディオン [1]
- ローカルストレージ [1]
- フォーム [11]
- 文字が多い時 [5]
- ティッカー [1]
- モーダルウィンドウ [1]
- 配置 [10]
- ウェブ広告関連 [4]
- Google関連 [1]
- 文字を目立たせたい [2]
- 時間的な制御 [4]
- 動画 [1]
- 数字 [3]
- 条件分岐 [3]
- アニメーション [17]
- 絞り込みフィルター [2]
- コーディング [2]
JavaScript
JavaScriptに関するキーワードから探す
acceleration
addEventListener
Array
Chart
clamp
clearInterval
click
console
cookie
crossorigin
CSV
D3
Date
decodeURIComponent
devicemotion
deviceorientation
document
draggable
enchant
encodeURIComponent
ES Modules
event
File
for
force
function
geolocation
getElementById
getElementsByClassName
getHours
getMinutes
getSeconds
getTime
hash
height
hello
history
host
href
if
import
indexOf
innerHeight
innerHTML
length
location
log
match
module
naturalHeight
naturalWidth
navigator
offsetHeight
onclick
onmousedown
open
originalEvent
parent
parseInt
pathname
port
position
preventDefault
protocol
pushState
querySelector
replace
replaceState
script
scrollHeight
search
setTimeout
stopPropagation
toFixed
toggle
toGMTString
toLocaleString
toLowerCase
touches
touchforcechange
touchmove
touchstart
userAgent
vibrate
webgl
width
window
XDomainRequest
XMLHttpRequest
JavaScriptに関するサンプル
- JS 時間取得と加工
- JavaScriptではいろんな時間の情報を使えるよう整っています。改めて整理してみました。 まずはどんな時間を扱うことが多いのか。 年月日の形式ではなくて、時差について二つだけ。 協定世界時（UTC） Mon, 20 May 2019 09:33:22 GMT...
- 2019-08-08 00:30:38
- JS ESモジュールを使ったDOM操作
- ES Modulesの仕様で書いたクラスを付けするだけのシンプルなサンプルです。 2017年からES6 Modules、ES Modules、またはESMと呼ばれるJavaScriptを外部参照する際の新しい仕様が広まってきました。 まだ筆者も勉強中ですが、簡単に説明...
- 2019-08-08 00:18:15
- JS 文字列一致
- if文で文字列の部分一致を判定して出しわける構文のサンプル。 よく使うけど、忘れがちなので備忘録です。 正規表現の文字列一致 [[ ua = navigator.userAgent; if(ua.match(/chrome/)) { conso...
- 2019-08-07 23:05:10
- JS 感圧で遊ぶ
- iPhone6s以上限定ですが、押し込んで面白い表現を作ってみようと思います。 タッチ3Dの押し込まれた値によってどんなことができるか検証します。 この記事はiPhone6s以上で閲覧をお願いします。 #press_area3{ width:200px; hei...
- 2019-08-07 22:47:03
- JS 感圧の検証
- この記事はiPhone6s以上で使える3Dタッチ（感圧）についての検証です。 iPhone6s以上だと画面を強く押すと圧力を感知して、タップとは違う挙動になります。 その挙動に対してJSによる感圧を取得する関数でトリガーを実装すると、どう...
- 2019-08-07 22:43:16
- JS 元画像のサイズと表示画像のサイズ
- サイト上で画像を小さく表示することはよくありますが、表示されている縦横のサイズはよく使うのですが、たまに元の画像のサイズを使いたい時があります。 そんな時は以下のようなJavaScriptで元の画像のサイズを取得することができます。 [[<img id="neko" src="/img/demo/cat/002.jpg"...
- 2019-08-07 22:34:44
- JS タップ圧力（感圧）検知
- スマホやタブレットなどでは、タップした圧力を検知し、操作するシーンが増えてきました。JavaScriptで圧力を数値化する関数が用意されているので、実装してみました。 画面をグッと押し込むと発動するサンプルです。 このサンプルはスマホやタブレットなどのタップの圧力を検知できる端末で参照してください。 #press...
- 2019-07-29 21:46:07
- JS URLのハッシュ値をUIに活用する
- URLの最後に#をつけて文字列をつけるとページ内のIDのまでページ内で移動します。一瞬で移動せずにスクロールとアコーディオンを組み合わせたUIのサンプルです。 ページ内からのリンクはaタグで書くだけ。 クリックすると、アコーディオンで隠れているコンテンツのところまで、スクロールし、コンテンツを表示します。...
- 2019-08-07 22:06:43
- JS 加速度検知
- スマホを振ったときにJavaScriptで仕掛けを作りたいときのサンプルです。 このサンプルではiOS、Androidのブラウザで、スマホを握って振ったときに、文字が切り替わるスクリプトを実装しています。 $(function(){ window.addEvent...
- 2019-07-29 21:35:59
Top