画像をダイナミックに配置し、それに負けないくらいダイナミックなアニメーションで画像を拡大表示するギャラリーのチュートリアルをCodropsから紹介します。
[JS]壁一面に写真を並べたようなギャラリーを作成するチュートリアル
画像をダイナミックに配置し、それに負けないくらいダイナミックなアニメーションで画像を拡大表示するギャラリーのチュートリアルをCodropsから紹介します。
[JS]複数の打ち出し画像をスライドのアニメーションで変更するスクリプト
サイトのトップページやプロモーションページに最適な複数の画像をスムーズなアニメーションでスライド表示するスクリプトをSoh Tanakaから紹介します。 実装のイメージ 画像のスライドはコントローラーでの手動操作と自動操作に対応しています。 スクリプトのベースにはjQueryが使用されており、HTML/CSS/JavaScriptのコードも紹介されているのでカスタマイズも可能です。 Inspiration 上記のスクリプトのようなテクニックを使用したサイトのショーケースです。 フレームやコントローラーなどUIをサイトのテーマにあわせるといっそう洗練された印象を与えます。
ヨモツネット
この Web サイトの概要 ヨモツネットは、気になった技術の実験場と個人的な日記を中心としたサイトです。主に卓矢エンジェルや、Web 関連についてを話題にしています。 卓矢エンジェルとは 卓矢エンジェルは、デザインに陣羽織、振袖、手甲、鎧、脚半などといった和なテイストを取り入れたファッションブランドです。卓矢エンジェルを着る人たちはエンジェラーと呼ばれ、ゴシックやパンク、デコラなどのようにひとつの系統として分類されています。 この Web サイトの構成 日記 日々の出来事や Web についての話題を題材にした日記 実験室 便利な javaScript の配布や、マークアップの Tips など 自己紹介 この Web サイトの制作者について お問合せ 制作者への連絡用メールフォーム リンク 友人の Web サイトなどへのリンク このサイトについて 著作権、その他の情報などについて
JSタブ切替え応用編 —他ページから直接タブにアクセスする— - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 他ページからそれぞれのタブにリンクすることってできますか？ —タブ切替をサクッと実装, くりはらさんのコメント 確かに便利そうなので、やってみました。ページ内リンクと同じように「なんたら.html#Contents」とかってURLでアクセスできます。意外と簡単～。サンプルは以下の画像から。 考え方 tab.dive = function(){ var hash = window.location.hash; hash = hash.split("?"); hash = hash[0].split("#"); if(hash[1] == 'page2') tab.sho
FAQ形式によるJavaScriptの本質がわかる超入門 - 風と宇宙とプログラム
はじめに JavaScriptは簡単な言語のようでいて、実は奥が深く、初心者にとってなかなかその本質がわかりにくい言語です。ここでは、JavaScriptの言語的エッセンスを理解できるようなものをFAQ形式で書いてみました。ご意見や誤り等を指摘してもらえたら嬉しいです。 なお、JavaScriptの標準化であるECMAScriptは、今年末にEdition 5 がリリースされる予定です。このFAQは、現在のバージョンであるEdition 3をベースにしています。 ECMAScriptって何ですか？ ECMAはEuropean Computer Manufacturer Association(欧州電子計算機工業会)の略で、標準化団体です。NetscapeのJavaScriptとMicrosoftのJScriptをベースに、純粋なプログラム言語部分を抽出したものをECMAで標準化したスクリプ
[JS]液体が流れるように画像を少しずつ表示するスクリプト -Liquid Image FX
Flashを使用せずに、液体が流れるように画像を少しずつ表示するスクリプトをWeb Reflectionから紹介します。 JavaScript Liquid Image FX demo 上記のデモでは、Firefoxのロゴが左から順に上下左右から液体が流れるように画像を少しずつ表示します。 また、動きを組み合わせたデモもあります。
[JS]ホバー時に光源が移動するエフェクトがかっこいいスクリプト
マウスのホバー時に、光源がカーソルに追従するエフェクトがかっこいいスクリプトをcoders.meから紹介します。
マウスオーバー時にクールに画像を切り替えるjQueryサンプル:phpspot開発日誌
Sliding Boxes and Captions with jQuery | Build Internet! マウスオーバー時にクールに画像を切り替えるjQueryサンプル。 マウスオーバーで滑らかにキャプションが現れたり、画面を切り替えたりできるサンプルのデモとダウンロードが出来ます。 デモページ CSSをでレイヤーを重ね合わせて、上の要素をアニメーションさせてるだけのようですが、なかなかこれがクールですね。 $('.boxgrid.caption').hover(function(){ $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'220px'},{queue:fals
ロールオーバーで他の画像を切り替えるJavascript ｜ ZIYOTOY.NET【じよとい】
同じような機能を２つの案件で求められたので作りました。 大きな画像があって、サムネールにロールオーバーすると大きな画像のほうもロールオーバーする、というものです。 ロールオーバーで他の画像を切り替えるサンプル for文からのイベント予約 for文を回して複数の要素からスコープの異なる他の要素に何かしたいという時、for文内部からaddEventListenerしたりしたい時がありますが、 function hogehoge() { var foo = bar.getElementsByTagName("a"); var baz = ["0", "1", "2", "3", "4"]; for(var i=0; i<foo.length; i++) { var hoge =baz[i]; var callback = function(){ return hoge; }; foo.addEv
ferretarmy.com - ferretarmy リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
jQuery - StackTrace
jQuery とは、John Resig によって開発された JavaScript ライブラリです。 Ajax や DOMプログラミングを「簡潔に」「簡単に」書くことができる、軽量で強力なフレームワークです。 jQueryプロジェクトは、4つのプロジェクトで構成されています。 jQuery Core jQuery のコアライブラリを開発するプロジェクトです。Ajax や DOMプログラミングフレームワークを提供します。 jQuery UI jQuery Core上に構築された強力なユーザインターフェースライブラリです。 Sizzle 高速なセレクタエンジンです。jQueryでも使用されています。単独でも使用可能です。 QUnit 使いやすいJavaScriptのテスティングフレームワークです。 このサイトでは、jQuery Core、jQuery UI の日本語リファレンスを公開しています
jQuery 開発者向けメモ
jQuery 開発者向けのメモです． ずっと以前に，jQuery に関する日本語の情報がまだ少ない頃に作ったページですが， その後 jQuery を再び利用する機会があったので，最新バージョン向けに記述を更新しました． 住宅ローンシミュレーションです． jQueryを利用したフォームの動的な追加や，flotプラグインによるグラフ描画などを行っています． 本ページの記載に間違い等見つけた方はブログのエントリまで連絡いただけるとうれしいです． 最終更新：2009/1/10 jQueryとは jQuery は様々な処理を短く簡単に書ける JavaScript ライブラリです． 独自のXPATH/CSSセレクタを利用することで，多くのDOM操作を非常に簡単に書くことが出来ます． JavaScriptのDOM操作や，XMLHTTPRequest，XMLの操作などを覚えなくとも， Ajaxを利用したイ
Tori's Eye
Welcome to Tori's Eye! Tori's eye is a Twitter visualization tool, inspired by papercraft and origami. It's a visual and technical experiment implemented using only standard XHTML/CSS and Javascript. What does it do? Enter a word in the search box and then catch some birds with your mouse to read the tweet they're carrying. Tori's Eye fetches the latest tweets containing the word you input from Tw
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
Twitterをサイトに組み込むチュートリアル＆サンプル集:phpspot開発日誌
Twitterをサイトに組み込むチュートリアル＆サンプル集。 当サイトにて、色々とTwitterの機能を実装する仕組みを色々と紹介しましたが、それらをまとめてみました。 JavaScript によるTwitterメッセージの埋め込み Twitterのメッセージをページに載せられるJavaScript「Twitter.js」 JavaScript 単体でTwitterのメッセージをサイトに簡単に埋め込み可能 サイトにリアルタイム更新＆検索機能付きTwitter窓を設置できるjQueryプラグイン「Juitter」 画面遷移なしにTwitterステータス表示＆検索ができるウィジェットを設置可能。 PHP製のウィジェットや投稿用サンプルコード等 Twitterのメッセージ表示などができるPHP＆AJAXなブログパーツ実装が可能な「Ptwix」 Twitterのメッセージ表示用のリロード機能付きウ
JavaScriptツール&ライブラリ50選 | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Smashing Editoria氏がSmashing Magazineにおいて50 Fresh JavaScript Tools That Will Improve Your Workflowのタイトルで50のJavaScriptに関連したツールやライブラリを紹介している(実際には51)。RIA開発においてJavaScriptは重要な地位を占めつつあり、適切な開発ツールやライブラリ、フレームワーク、プラグインを選択することは、迅速で効果的な開発を実現するために欠かせない。紹介されているツールやライブラリは次のとおり。 JavaScriptツール FireUnit (Firebug向けJavaScrip
目的を持ってAjaxを使うためにjQueryの文法を知ろう
目的を持ってAjaxを使うためにjQueryの文法を知ろう：jQueryで学ぶ簡単で効果的なAjaxの使い方（2）（1/3 ページ） いま話題の「jQuery」を使って、目的を持ったAjax開発の効率化や使いどころ・注意点などについてサンプルを見ながら解説していきます。Webデザイナ／プロデューサーも必見！ 連載第1回の「Aptanaで始めるJavaScriptライブラリ『jQuery』超入門」では、Ajaxを使うためのJavaScriptライブラリとしてjQueryの使い方を紹介しました。実際にAjaxを使ったシステムを作るときに、Ajaxを使うことが目的になってしまっている場合があります。残念ながら、このようなプロジェクトは失敗することの方が多いのが現実です。本来の目的というものは、Ajaxを使ったシステムによる業務の効率化であったり、ユーザビリティの改善によるリピータの確保であったり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マウスオーバーをデザインする | DesignWalker
[JS]アクティブなタブとパネルの境界線を無くすチュートリアル
youlove.us