スクロールに同期するコンテンツを作るためのJavaScriptライブラリ - StarryStickyScroll - - WEB制作・WEBデザイン 株式会社STARRYWORKS
Home > TOOLS > スクロールに同期するコンテンツを作るためのJavaScriptライブラリ - StarryStickyScroll - Newer Older 概要 ページをスクロールしてもついてくるコンテンツを作るためのJavaScriptクラスです。必要なJavaScriptファイルを読み込み、１行のJavaScriptを追加するだけで利用でき、横スクロールにも対応しています。 アニメーションなどにYahoo UI Libraryを利用しているので少し設定を変更するだけで、簡単に様々なアニメーション効果を得ることができます。 設置方法 JavaScriptファイルの読み込み <head>内に以下のタグを挿入します。JavaScriptのファイルのパスは実際にサーバーにアップしたパスに置き換えてください。 <!-- Yahoo UI Library --> <script
第1回 まずは実装してみよう | gihyo.jp
はじめに この連載では、Javascriptは知っているけどAjaxは実装したことがないという方に向け、YouTube APIを利用したWebアプリケーションを題材に、実装の方法を解説します。 JavascriptのライブラリはjQueryを使用します。jQueryによるAjax実装、基本的な使い方、また、UIへの応用実装も合わせて解説します。 Ajaxってなに？ Ajaxとは、Asynchronous Javascript+XMLの略称です。Javascriptを使い、Webページとは非同期（Asynchronous）にXML形式（もしくはテキスト形式）のデータ通信を行う手法を指します。 Ajaxを使うと特別なプラグインなどを必要とせず、Webページの必要な部分だけ必要に応じて書き換えることができるため、ユーザビリティの高いWebアプリケーションを作ることができます。また、異なるWebサ
jquery.jsを読み解く：第1回 jQueryライブラリ（1～171行目）｜gihyo.jp … 技術評論社
はじめに jQueryとは、John Resigによって開発され、最近非常に注目を集めている Javascriptライブラリです。 JavaScriptとHTMLの対話を劇的に改善し、Ajaxなどにより複雑化してきているWebアプリケーション構築に必要な処理を非常に簡潔に書くことができます。また、ブラウザの種類やバージョンによる違いも吸収してくれるため、プログラマの作業量も減らしてくれます。 本連載では、jQueryライブラリのコードを読みながら、実装として中で何が行われているのかを見ていこうと思います。 想定している読者は、jQueryライブラリをただ使うだけでなく、やっていることを理解したいという方、使われているコードを応用して自分なりの改造をしてみたい方、新たなプラグインを開発したいという方などです。 今回の連載では執筆開始時点の最新版であるバージョン1.2.2を対象としています。説
[JS]パネルをフェードや加減スクロールで切り替えるスクリプト -wSide
wSideは、パネルの切り替えにフェードや加減スクロールなど多彩なアクションを実装するスクリプトです。 wSide, plugin jquery wSideはjQueryのプラグインで、動作にはjquery.jsが必要です。 切り替え時の多彩なアクションは、デモページを参照ください。 シンプル デモ 縦方向・横方向への加減スクロール、フェード エフェクト付き デモ 反動付きスクロール、縦横斜めのスクロール アドバンス デモ CSSを利用して、さまざまな効果を狙ったパネルの切り替え
[JS]ページ内をスムーズにスクロールできるスクリプト(基本編) | コリス
当サイトでも使用しているページ内をスムーズにスクロールするスクリプトの紹介です。 スクリプトの概要 JSファイルのダウンロード ページの先頭へスムーズにスクロールさせる方法 ページ内の任意の場所にスムーズにスクロールさせる方法 メモ 更新履歴 横移動や別ページからスムーズにスクロールできる方法は、応用編です。 [JS]ページ内をスムーズにスクロールできるスクリプト(応用編) スクリプトの概要 ページの先頭や任意の要素に、スムーズにスクロールさせることができるスクリプトです。 動作環境 Win IE5, IE5.5, IE6, IE7, Firefox1.5, Firefox2, Opera8, Opera9, Safari3.01beta Mac Safari1.5, Safari2, Firefox1.5, Firefox2 使用条件 本スクリプトは、非商用利用に限りフリーで使用すること
![[JS]ページ内をスムーズにスクロールできるスクリプト(基本編) | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
[JS]動作が華麗でダイナミックな画像ギャラリーのスクリプト集
Interactive DOM Scriptingにエントリーされている画像ギャラリーとしても利用できるスクリプトの紹介です。 どのスクリプトも、フラッシュのような華麗でダイナミックな動きを見せてくれます。
[JS]画像にベベル効果を与えるスクリプト -bevel.js
bevel.js (with IE 6-7 support) 画像にべベル効果を与えるには、bevel.jsを外部スクリプトとして指定し、画像にclassを指定します。 べベル効果は15種類あり、角度・明度・グロウ・影・色などを数値で指定することができます。
DHTML & AJAX アイデア見本帖 サンプル集
著： Alf Magne Kalleland 訳： 今里了次 添付：CD-ROM 1点 ISBN：9784798113180 サイズ：B5変 ページ：216 販売価格：\2,625（本体\2,500 消費税5%） プロが伝授する 現場ですぐに役立つグッド・アイデア集 JavaScriptを代表とするDHTMLさらにAJAXと呼ばれる技術は、クロスブラウザ対応で、Flashのようなプラグインもいらずに、動的なユーザーインターフェースが手軽にできるため、その導入のしやすさから、今脚光を浴びつつあります。本書は、そんなNon-Flashでできる、DHTMLのアイデア集です。本書で紹介する、DHTMLのサンプルは、どれもが実用性の高いものばかりで、しかもデータはそのまま使えてしまうので、現場ですぐに役立ち、作業効率がアップするはず。もちろん簡潔なサンプルの解説があるので、自分でカスタマイズしていく
Ajaxでどんな事が出来るのかを知るサンプル集26種類 jQuery interface編 : 4GALAXYのメモ
16 26 08 2007 Ajaxでどんな事が出来るのかを知るサンプル集26種類 jQuery interface編 jQuery, Samples, Ajax 海外のjQueryを使ったAjaxサンプル集に日本語の紹介文をつけた記事 Effects Ajaxエフェクト集 要素の出現・消滅など全62種類のAjaxエフェクトサンプル Test new animate function 要素のAjaxアニメーションジェネレーター Use new functions stop, stopAll and pause to clear queue and stop flickering Ajaxでディレイ(遅延)を設定できるツールチップを表示サンプル Draggables | Droppables Ajaxでドロップ＆ドラッグ出来るサンプル10種類 Sortables list
[JS]画像に3Dの鏡面効果を与えるスクリプト -reflection.js
3d image reflection with javascript reflection.jsの動作には、prototype.jsとscriptaculous.jsが必要で、外部スクリプトとして使用します。 デモ：背景白 デモ：背景黒 鏡面効果を与える画像のコードは、下記のように記述します。 画像箇所 <div id="holder"> <img src="image.jpg" /> </div> トリガー <script type="text/javascript"> new Reflect3D('holder'); </script>
[JS]動きが軽快なアコーディオンタイプのナビゲーション -Mootools menu
Mootools menuは、スムーズにアニメーションする動きが快適なアコーディオンタイプのナビゲーションのスクリプトです。 Mootools menu with accordeon and effects アコーディオンの開閉時にもフェード効果があり、よい演出だと思いました。 ナビゲーションの階層表現(デモのgraphic design-custom designでレベル3)の見た目が同じなので、インデントや色・形などで見た目に変化をつけないとちょっと分かりづらいかもしれません。 Mootools menuはmootoolsのプラグインで、動作にはmootools.jsが必要です。
[JS]デザインがかっこいいカレンダーのスクリプト -calendar.js
Calendar: a Javascript class for Mootools that adds accessible and unobtrusive date pickers to your form elements カレンダーには3つのデザインが用意されており、スタイルシートでデザインの変更も可能です。 calendar.jsはmootoolsのプラグインのため、動作にはmootools.jsが必要です。
[JS]キーボードやホイール操作にも対応したスライドバー -slider.js
slider.jsは、通常のマウスでのドラッグ操作だけでなく、マウスのクリック・ホイール操作や、キーボードの矢印キー・Home・Endキーにも対応しているスライドバーのスクリプトです。
Flashムービーのサイズをブラウザ幅に応じて自動調整できるJSライブラリ「FitFlash」:phpspot開発日誌
FitFlash - Smart Flash Resize Script FitFlash is a smart script that resizes your flash automatically if your browser window size is smaller or greater than your flash minimum desired size keeping it accessible independent of screen resolution. Flashムービーのサイズをブラウザ幅に応じて自動調整できるJSライブラリ「FitFlash」。 通常、Flashムービー(SWF)はブラウザに貼り付けた状態だと固定サイズとなっています。 このムービーサイズをJavaScriptで動的にうまく調節できるライブラリがFitFlashです。 FitFlashは次
JavaScript で文字をトリミングする（改善版）
JavaScript を用いてエントリータイトル等の文字をトリミング（指定した文字数だけ表示する）するカスタマイズです。前回の「JavaScript で文字をトリミングする」は文字数だけでトリミングしたものですが、今回の改善版はバイト数で計算します。全角はそのまま1文字として数え、半角英数は2文字（2バイト）を1文字としてカウントします。 左のスクリーンショットが5文字でトリミングしたサンプルです。上は全角のみなので5文字でトリミングし、下は半角を含むので計7文字でトリミングしています。 さらにスクリプトを修正すれば、特定の半角文字（"M"とか"W"のような幅の広い文字）を全角として数えることも可能と思われます。完璧に横幅を揃えることはできませんが、かなり精度の良いトリミングができると思います。 今回も「id 属性名」と「要素名+ class 属性名」で指定したタグの中に記述された文字列を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]軽快な動きのMac OS Xのドック風のスクリプト -Jquery Dock
[JS]mootools.jsを使用した気持ちいい動きをする画像ギャラリー
横にスライドするきれいな動きのアコーディオンJavaScript*ホームページを作る人のネタ帳