古いiOSとダメな古いAndroidではposition:fixedが使えないんですけど、それを判別するのに Modernizr.positionFixed みたいの無いのかと思って探してたらjQuery mobileの中見つけた。
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 コンテンツのスライドイン・ アウトと簡易的なスライダー を実装する、というスクリ プト。うまく説明できません が、目を惹くことは出来そう です。 デモを見てもらったほうが早そうなので見た目の解説は割愛します。語彙が欲しい。 動作サンプルご覧頂いたほうがいいっぽいです。 Sample 素敵な動きですね。 コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <s
こんにちは、机に置いたおもちゃの日焼けが気になるもりたです。 今回は、前からちょっと気になっていたウェブフォントをカーニングできるJS「HTMLで文字詰めするタイポグラフィー用JS」を試してみました。 http://fladdict.net/blog/2011/02/auto-kerning.html ※現在はアクセスできなくなっています。 ご存知のとおり、jsを使わなくてもletter-spacingを使ってcssだけで設定しようと思えばできるんですが、ひと文字ずつの設定となるとhtmlもcssもすっきりしなくなる上にめんどくさい! こうパッとガッとスッと設定したい! そんな希望を叶えてくれるのが「FLAutoKerning.js」です! ポイント1:導入が楽です 手順は簡単、サイトからファイルをダウロードしてjqeryと一緒に読み込ませて<head>内に設定を書くだけ。 入れてみたデモ
【img via WordPress Pencil and Pins-07 by thisismyurl】 ブログの表示速度は早ければ早い方が良い! そう思って様々なWordPress用プラグインを試しているのだが、最近、画面内に画像が表示された段階で画像を読み込むような動作をしているメディアが気になっていた。 調べてみたところ、そのような処理をしてくれる「jQuery Image Lazy Load WP」というプラグインがあった。実際に導入してみたらそれなりに効果を発揮したので、紹介する! 「jQuery Image Lazy Load WP」のインストール 「jQuery Image Lazy Load WP」を入れることによってどういう効果があるかというと、本来であればページ内にある全画像を最初に読み込むため特に画像数が多い記事やページは読み込み速度が遅くなりがちなのだが、このプラ
The document discusses the structure and functionality of a todo application built with Ruby on Rails, covering model validations, controller actions, and JSON responses for creating, updating, and deleting todos. It includes testing strategies using RSpec and Mocha, as well as JavaScript with libraries like Chai and Sinon for assertions and mocking. Additionally, it emphasizes using AJAX for dyna
jGravity Demo ページ内の要素に重力を与えて落下させられるjQueryプラグイン「jGravity」。 一見なんの変哲もないページだったとしてもボタンを押すと全ての要素に重力を与えてブラウザの下の方に落下させるというエフェクトがかけられます。 「Initiate jGravity」ボタンで重力を与えます。 次のようにアイテムが落下します。 使いドコロは難しいですが、驚きのエフェクトとして覚えておいてもよさそうです 関連エントリ エフェクトが色々選べるイメージスライダー実装jQueryプラグイン「Adaptor」 ターミナルに文字を打ってるアニメーションエフェクトが作れるjQueryプラグイン「Typist」 jQueryでフリップエフェクトを使った良プラグインやサンプル集10 画像ホバー時に20種類以上の多彩なエフェクトがかけられるjQueryプラグイン「Adipoli」
Tシャツ等の商品の色を自由に変えられるjQueryプラグイン「Product Colorizer」 2012年10月24日- Product Colorizer 1.1 | A jQuery Plugin Written by Nik Korablin Tシャツ等の商品の色を自由に変えられるjQueryプラグイン「Product Colorizer」 色を選択すると同じ絵柄で色だけを変更することが出来るjQueryプラグインです。 商品をウェブ上でカスタマイズできるようなECサイトなどで使えそうですね。 色部分をクリックで自由に色が変えられます。まあ、色に応じた写真を用意しておくのも手ではありますが、何百通りとかある場合や、自分でカスタマイズするようなシステムの場合は使えそう 仕組みがまた面白くて、次のようにPNG画像でマスクを被せつつ色をかぶせているみたいです。 面白いアイデアですね。応
Jquery Eight-Bit Plugin 8bitキャラクターを描画できるjQueryプラグイン「EightBit.js」。 サイト上の描画ツールを使ってドット絵を描いて、そのドット絵を描画できるというもの。画像ではなくCSSなため、拡大してもうまい具合に8ビット感が出せます。 ボタンを押すと、グラフィックをコード化したものが出力されるのでそちらをデータとして描画できます なかなか面白い仕組みですが、画像の変換ツールなんかが出てきたら実用的ですかね 関連エントリ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 クールなドアノブ風の%グラフを描画できるjQuery Knob XMLを超見やすく折畳み表示できるjQueryプラグイン「XML Tree」 faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン「jQuery Favicon
jQuery HighchartsTable plugin, from PMSIpilot テーブルをグラフに変換してくれるjQueryプラグイン。 CSVをダウンロードしてExcelでグラフ化、といった事は仕事でよく行う人も多いかと思いますが、jQueryを使ってテーブルをグラフにしちゃおうというプラグインです グラフはSVGで表現されるので非対応ブラウザでは表示ができない点に注意したほうがよさそうですが、管理画面やツールなんかで利用すると便利そうです。 棒グラフ。1つのチャートを比較 線グラフ ミックスバージョン 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 CSS3とjQueryでインタラクティブなグラフを作成するチュートリアル jQuery+HTML5でカッコいいアニメーションす
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け(※自分含む)のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス(parallax)を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript(jQuery)でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
Loodsmedia ディスプレイ内のコンテンツもパララックスします。 Jarallaxの使い方 「Demo 3」を例に、実装方法を簡単に紹介します。 外部ファイル 「jquery.js」と当スクリプトをhead内に外部スクリプトとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jarallax-0.2.3b.js"></script> HTML HTML自体は通常通りに実装し、アニメーションのエフェクトを適用するエレメントには参照できるようid, classなどを付けます。 <h1 class="logo">Jarallax</h1> <div class="container" id="slide1"> <h2>見出し:slide
[対象: 中〜上級] 僕のブログではてブ数がいちばん多いのはウェブページを高速化するTIPSを解説した記事です(まだ読んでない人はぜひ読んでください!)。 その記事では高速化全般を扱っていましたが、今日の記事ではJavaScriptに的を絞って表示速度をスピードアップできる施策を6つ紹介します。 もともとはSearch Engine PeopleブログのOptimizing JavaScript for Better Web Performanceで説明されていたものです。 記事作者のJoydeep Deb(ジョイディープ・デブ)氏に僕のブログでの転載許可をもらえました (Thanks, Joydeep!)。 逐一の翻訳ではなく、書かれている内容をもとに僕の言葉で解説していきます。 1. HTTPリクエスト削減のためにJavaScriptファイルを1つに統合する ウェブページの表示を高速化
equalize.js ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 $('#height-example').equalize(); などとすれば、幅や高さを瞬時に揃えることが出来ます。 ↓こんな感じに↓ 高さだけではなくて、 ↓幅も同様に全部揃えられます↓ カラムの高さを揃えることでスッキリできますが、簡単にできるのは有難いですね 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ アイテムをドラッグ&ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 コンテンツ幅に対してテキストを最大にして美しくレイアウトできる「BigText」
Yannis Chatzikonstantinou / Freetile.js アイテムをタイル状に並べる新しいjQueryプラグイン「Freetile」 LightBoxばりに流行ったこのレイアウトプラグインですが、新しいプラグインが出た模様。 プラグインは色々ありますがそれぞれ使い勝手が違ったりするので1つの選択肢として覚えておいてもよさそうですね 使い方は以下のように簡単で、オプションでアニメーションするかなどのシンプルなオプションが選べる模様です $('#container').freetile(); 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 BigVideo.js MP4などの動画をウェブページの背景いっぱいに配置します。 Video Background サイズ変更可能
2019-02-27(水)【東京】 JJUGナイトセミナー「JVM言語を作ろう! GraalVMで遊ぼう!」のセッション資料です。 阪田 浩一 (@jyukutyo): ポノス株式会社 / 関西Javaエンジニアの会 / Javaチャンピオン オラクル社からGraalVMというものが発表され、話題を呼んでいます。GraalVMは、HotSpot VM上に新しいJITコンパイラGraalと、言語実装用フレームワーク/ASTインタプリタであるTruffle、ネイティブイメージ作成機能とその実行に使われるSubstrateVMを併せ持ったものです。すでに、Truffleを使用したJavaScriptやRuby、R、Pythonの実装がGraalVMにあり、これらの言語とJavaは、コードから"相互に"呼び出しができます。独自の言語も、ASTにさえできれば、Truffleを使い、JVM上で実行でき
にょい~ん、ぐい~んなどの緩急をともなったアニメーションを実装するCSSやJavaScriptのスニペットをまとめたEasing Functionsを紹介します。 Easing Functions Cheat Sheet Easing Functions -GitHub イージングのアニメーションの動きを確認 イージングのアニメーションの種類 イージングのアニメーションの実装 イージングのアニメーションの動きを確認 イージングとは動きに加速や減速を加え等速で動くのとは違ったエフェクトを与えるもので、最初ゆっくりでだんだん早くしたり、床にバウンドするような動きを与えます。 登録されているイージングのアニメーションの動きは、それぞれのグラフをホバーするとレッドのアローがその動きをします。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く