Flashを使用せずに、液体が流れるように画像を少しずつ表示するスクリプトをWeb Reflectionから紹介します。 JavaScript Liquid Image FX demo 上記のデモでは、Firefoxのロゴが左から順に上下左右から液体が流れるように画像を少しずつ表示します。 また、動きを組み合わせたデモもあります。
[JS]液体が流れるように画像を少しずつ表示するスクリプト -Liquid Image FX
Flashを使用せずに、液体が流れるように画像を少しずつ表示するスクリプトをWeb Reflectionから紹介します。 JavaScript Liquid Image FX demo 上記のデモでは、Firefoxのロゴが左から順に上下左右から液体が流れるように画像を少しずつ表示します。 また、動きを組み合わせたデモもあります。
第22回 JavaScriptによるUIの実装：ドラッグ | gihyo.jp
こんにちは。前回に引き続き、JavaScriptでUIを実装する方法を紹介していきます。 要素のドラッグ ウェブアプリでよく使われるインタフェースのひとつ、ドラッグを実装してみます。ドラッグを使用するケースは幾つかありますが、今回は投稿用フォームをドラッグで移動できるようにするという使い方を想定してみます。 投稿フォームで入力する際、そのページのコンテンツを見ながら入力したいということはよくあります。フォームを好きな位置に移動できればそれが実現できます。 ドラッグの基本HTML <div class="js-drag" id="js-drag-1"> <form class="js-drag-form" onsubmit="return false;"> <textarea></textarea> <input class="submit" type="submit" value="送信"
Allan Jardine | Reflections | Design
Design is a suite of web-design and development assistive tools which can be utilised on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet. Usage Using Design is extremely simple: Drag the Design link below to your bookmark bar (or add it to your bookmarks by right clicking the link and selecting 'Add to bookmarks/
デザイナー・ノンプログラマにおすすめしたいThree.jsのカンタン3D体験 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアののびすけです。最近毎日ハムスターになる夢を見ます。 前回の記事「圧倒的な3D表現にWebの未来を感じるWebGLを使ったサイト・デモ20選」にまとめましたが、WebGLを使ったサイトが最近話題になっていますね。 従来の平面で考えるWebの時代から次の時代への移り変わりを感じる今日この頃です。 今回は実際にWebGLを使った3D表現にチャレンジしてみます。 JavaScriptで記述しますが、初心者向けにまとめたのでノンプログラマやデザイナーの方にもチャレンジしてほしいです！実際にコード書くところは5分（早い人なら1分）でできると思います。 そもそもWebGLとは PC上で3Dを描画するための技術にOpenGLというものがあります。OpenGLは3DグラフィックスAPIとも呼ばれていて、様々なプラットフォームに対応しており、広く普及しています。 このOpenGLをWe
Bootstrap Admin Theme - Bootstrap3に対応した管理画面テンプレート
これは知っておいて損はないでしょう！ Bootstrapの便利な使いどころとして管理画面があります。管理画面は限られた関係者しか使いませんのでBootstrap臭がしても気にすることはありません。それなりの表示がすぐに実現できるのは使い勝手を向上します。 しかしそんな適当な範囲を超えて実用性のある管理画面を実現できるBootstrapテンプレートがBootstrap Admin Themeです。Bootstarp 3系に対応していますので最新のウィジェットもばりばり使えるでしょう。 Bootstrap Admin Themeの主なページとしては、 ログイン ダッシュボード カレンダー グラフ ボタン/アイコン WYSIWYGエディタ フォーム/ウィザード テーブル その他ウィジェット が用意されています。これだけあれば後は組み合わせるだけで（Bootstrap本来の機能も使いつつ）リッチな
すごい便利になった！javascript入門の基礎知識と小技まとめ
作成：2013/12/24 更新：2014/11/01 Web制作 > サイト構築中にちょっとした動きをのせたいとき、どうすれば良かったのか何度も調べ直さないといけないことがあります。今回はJavaScript で初心者の方でもすぐ活用できるように、使用頻度の高いリファレンスと基本知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ できること １．リファレンス スクリプトの書き方／基礎知識 ２．スクリプトの記述 ３．文字列／特殊文字 ４．演算子 ５．オブジェクト ６．プロトタイプ ７．イベント ８．変数 ９．if文 １０．配列 １１．連想配列 １２．正規表現 １３．デバッグ できること １．リファレンス JavaScriptは開発環境の準備がほぼ不要で、コピー＆ペーストだけで、動くものができてしまいます。他の言語だとそう簡単にはいきません。サ
[JS]jQueryのプラグイン100選 -2013年総集編
今年も数多くの素晴らしいjQueryのプラグインがリリースされました。当ブログで紹介したものをはじめ、未紹介のものまで、jQueryのプラグイン100+α選です。 今年目立ったのは、アニメーションを使ったスクロール関連のスクリプト。 スクロール前提の1ページサイト、パララックスなど、コンテンツをより大きなサイズで楽しむものが増えました。また、スマフォ・タブレットに大きく影響を受けたインタラクションも目立ちましたね。 1ページコンテンツ用のスクロール関連 パララックス スクロール関連 スクロールで定位置関連 その他スクロール操作・補助関連 スクロールバー関連 レスポンシブ関連 エフェクト関連 ナビゲーション関連 レイアウト関連 画像ギャラリー関連 画像拡大・配置・キャプション関連 コンテンツスライダー関連 カルーセル関連 アニメーション関連 フォーム関連 コンテンツのツアー関連 テキスト関連
[JS]パネルをグリッドに沿ってドラッグ&ドロップで移動し、レイアウトを自由に構築できるスクリプト -Gridster
CSS3アニメーションのかっこいいエフェクトを伴って、パネルをグリッドに沿ってドラッグ&ドロップで移動し、レイアウトを自由に構築できるjQueryのプラグインを紹介します。 パネルはグリッドに沿って、カラムをまたいでも移動できます。移動した際に他のパネルは指定した縦列・横列数とマージンを維持します。 他のパネルも移動可能です。 対応ブラウザ Internet Explorer 9+ Firefox Chrome Safari Opera Gridsterの使い方 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="libs/jquery.js"></script> <script type="text/javascript" src="jquery.gridster.js"></scri
[JS]スクリプト初心者でも簡単！ユーザーの訪問状況ごとにコンテンツを変更するスクリプト -Aware.js
サイトに初めて来たユーザーには使い方を表示、リピーターには更新されたコンテンツを目立つように表示、などのようにユーザーの状況に応じてコンテンツをカスタマイズしたり、レイアウト変更ができるjQueryのプラグインを紹介します。 「ここまで読みましたね」マークをつけることもできます。
Glide.js
シンプル・軽量で、レスポンシブ対応、タッチデバイス対応、スワイプもキーボード操作にも対応したカスタマイズにも優れたOOCSSベースでマークアップされたスライダーを実装するjQueryのプラグインを紹介します。 Glide.js Glide.js -GitHub Glide.jsのデモ Glide.jsの使い方 Glide.jsのデモ デモはスマフォ・タブレットをはじめ、最新のモダンブラウザでご覧ください。 スライドのエフェクトにCSS3を使用していますが、IE8などの古いブラウザでも代替のエフェクトで動作します。 デモページ Glide.jsの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></
[JS]ナビゲーションを最上部に固定し、各セクションにアニメーションでスクロール移動させるスクリプト -SMINT | コリス
SMINT SMINTの使い方 Step 1: 外部ファイル スクリプトを外部ファイルとして記述します。 <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/jquery.smint.js"></script> </head> Step 2: HTML まずは、最上部に配置されるナビゲーションから。 <div class="subMenu" > <div class="inner"> <a href="#" id="sTop" class="subNavBtn">Home</a> <a href="#" id="s1" class="subNavBtn">Section 1</a> <a href="#" id="s2" c
レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js | コリス
スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示してみます。 デモページ：幅480pxで表示 skel.jsの使い方 jQueryや他のスタイルシートなどを用意せずに、すぐに利用できます。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="skel.js"></script> jQueryもスタイルシートも他のファイルは必要ありません。 Step 2: スクリプトのセットアップ スクリプトのセ
[CSS]背景を固定させて、カーテンのようにスクロールさせるテクニック | コリス
去年くらいからよく見かけるようになったスクロールすると、カーテンを持ち上げるように次々にコンテンツが表示されるテクニックをスタイルシートのみ版とスクリプト併用パワーアップ版の二つを紹介します。 まずは、スタイルシートのみ版から。 Fixed image backgrounds スクロールするとヘッダは固定表示で、画像を配置した背景がカーテンを持ち上げるように次のコンテンツが表示されます。 背景は写真も面白いですが、ソリッドなカラーでも面白い効果が得られますね。 Fixed image backgroundsをスクロール 実装はシンプルです、ポートフォリオなどでよく見かけるテクニックです。 Demo 1のHTML HTMLの基本構造は、header要素があり、各スライドはsection要素です。section内には見出しやテキストや画像などを自由に配置できます。 <header> <a hr
[JS]シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のスクリプト -Unslider
シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のjQueryのプラグインを紹介します。 デスクトップのキーボード操作やスマフォ・タブレットのスワイプ操作にも対応！ Unslider Unslider -GitHub Unsliderの特徴 Unsliderのデモ Unsliderの使い方 Unsliderの特徴 超軽量のオープンソース スクリプトは3KBと超軽量のオープンソースです。 実装は簡単でクリーン HTMLは非常にシンプルで、カスタマイズも容易です。 高さの調整 サイズに合わせて、スライダーの高さを自動調整します。 レスポンシブ対応 デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。 キーボード操作の対応 キーボード（矢印キー）での操作をサポートします。 スワイプ操作の対応 jQuery.event.swipeをサポートしているので、スワイプ操作に
実践しながらjQueryを学べるオンライン学習サイト・Try jQuery
実際にコードを書いて学べる学習コンテンツ・Try jQueryのご紹介です。jQuery公式のオンライン学習サイトっぽいですね。英語ですけどこれから学ぼうという方にはうってつけかもしれません。 実践でjQueryを学べるサイトです。スライドも完備されています。英語が苦手な方にはちょっと難しいかもですけど・・ ドメインから察するに公式のものでいいと思います・・確認はしていませんけど。内容は基本的なものからスタートします。 スライドからスタートです。 他の学習サイト同様、指示通りに進めていきます。 正解ならSuccess!の文字が出て次に進みます。 これから始めたい、という方は如何でしょうか。 Try jQuery
Graphical Webの拡がり；HTML5とその周辺技術で実現する | gihyo.jp
もちろん、すべてHTML5を中心とする標準技術であるため、JavaScriptを通じてそれぞれを組み合わせて利用できます。 注目されるGraphicalWeb こうした新しいWebのグラフィックス技術の拡大もあり、2012年にはThe Graphical Webというカンファレンスがスイス開催されました。 The Graphical Web2012のWebサイト 実はこのカンファレンス、2002年から10年以上も続いているカンファレンスで、2011年まではSVG Openという名前で開催されていました（ちなみに、2007年には日本で開催されました）。しかし、2012年からカンファレンス内で扱う技術はSVGのみにとどまらず、HTML5 media、CSS3 Animations、2D Canvas、WebGLなどの技術も取り上げることとなり、こうした技術の総称としてカンファレンスのタイト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLテーブルの行を見やすくするテーブルクロスJavaScript*ホームページを作る人のネタ帳
[JS]面倒なスマフォ・タブレットでの異なるビューポートサイズの確認が簡単にできるスクリプト -rFrame
WEB制作者の為のベストエントリ38個まとめ-part4*ホームページを作る人のネタ帳
丸の内を楽しむ、今を届けるポータルサイト
