スクロールすると出てくる「トップへ戻る」ボタンの作り方 | コトダマウェブ
「フォント」というと文字の種類を指すものというイメージがありますが文字だけでなくアイコンの形をしたフォントというのがあるのをご存知ですか？実は、みなさんも何気なく目にしているものだったりします。例えば、こういうものです。 これ全部、フォン... 「トップへ戻る」ボタンのデザイン15パターン ボタンで表示を切り替えてご覧ください。 See the Pen PAGE TOP BUTTON01 by kenichi (@ken81) on CodePen. See the Pen PAGE TOP BUTTON02 by kenichi (@ken81) on CodePen. See the Pen PAGE TOP BUTTON03 by kenichi (@ken81) on CodePen. See the Pen PAGE TOP BUTTON04 by kenichi (@ken81
jQueryでサムネイルから画像切り替えできるイメージギャラリー機能を実装する | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
ネットショップなんかで、複数のサムネイルがついた商品写真のコンテンツをよく見かけますよね。今回はそのコンテンツに、サムネイルをクリックもしくはマウスオーバーで、メインの写真がサムネイルに対応した画像に切り替わる機能を実装していきたいと思い…
複数のタグをサクッと追加できるjQueryプラグイン「Input_Tag」を作りました - Qiita
テキストフィールドに入力すると、自動補完で選択肢がでてきて、タグが追加されるような仕組みを入れたかったのですが、既存のもので使い勝手がよさそうなものがなかったので作ってプラグインとしてgithubで公開してみました。 Input_Tagのデモ 設置方法 jQueryとjQuery UI、CSSを読み込む <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="style.css">
【jQuery】タイプライターで文字を打つようにテキストを表示できるプラグイン ｜ KLUTCHE
タイプライターで文字をタカタカ打つようなアニメーションでテキストを表示するjQueryプラグインです。 動きの緩急や停止もできて、ターミナルにコマンドを入力しているような動きが表現できます。 デモ デモページ こんなんできます。 使用するJavascript Typist jQuery Plugin jquery.typist.jsをダウンロードします。 HTML jQueryプラグインなので、jQueryの後にjquery.typist.jsをを読み込んであげます。 &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js&quot;&gt;&lt;/scr
円形アニメーションで美しいエフェクトを作るCSSのTransitionsを使った実装例:phpspot開発日誌
Circle Hover Effects with CSS Transitions | Codrops 円形アニメーションで美しいエフェクトを作るCSSのTransitionsを使った実装例。 マウスオーバーで円形に美しいアニメーションをするデモが公開されています。将来的には当たり前のように使われているテクニックかもしれません。 デモが７個あるのですが、円形を使って様々にアニメーションして美しい上に、色々な応用例が考えられて楽しいです 関連エントリ 円形の冊子ページをめくる風機能をCSS3とjQueryで実現するチュートリアル テキストを円形に描画するチュートリアル jQueryとCSS3を使ったPath風の円形メニューサンプル アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」
[JS]jQueryのプラグイン33+1選 -2011年8月
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
カスタマイズ可能なアニメーションスクロールが実現できるjQueryプラグイン「PageScroll」:phpspot開発日誌
カスタマイズ可能なアニメーションスクロールが実現できるjQueryプラグイン「PageScroll」 2011年08月25日- PageScroll | jQuery Plugins カスタマイズ可能なアニメーションスクロールが実現できるjQueryプラグイン「PageScroll」 アニメーションさせるイベントや、アニメーションの種類、onScrollStart、onScrollFinishといったイベントハンドラの設定まで出来るというものです。 デモページがこれを使ってなかなかいい感じに実装されていて、メニューにカーソルを合わせると指定位置に加速度をつけながら移動するという面白いものになっています。 メニューをfixedで固定してあるので意外と使いやすいものになっていることが分かると思います。 クリック不要にすることでストレスを減らせている感じ メニューにカーソルを合わせると指定位置に
Google＋風の円形リストを作成できるjQueryプラグイン「CircleList」:phpspot開発日誌
CircleList jQuery Plugin Google＋風の円形リストを作成できるjQueryプラグイン「CircleList」。 ULで定義したリストを初期化するだけで次のように円形にアニメーションします。各アイテムはドラッグ＆ドロップで他の円リストに移動することが出来ます。 更に、範囲指定で複数アイテムの選択なんかもできるようになっています。 実装は必要プラグインを読み込んだ後、次のように初期化するだけです。 <ul id='list'> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>4</li> </ul> <script> $('#list').circlelist(); </script> ジェネレーターもあって、その場で動きを作れてコードも出力する機能もあったりします。 ちょっとしたサプライズ効果に使えそうですね。 関連
[JS]奥行きを生み出す『パララックス』を簡単に実装できるスクリプト -Smart3D
複数の画像のスクロールのタイミングをずらして表示するパララックスを簡単に実装できるjQueryのプラグインを紹介します。 jQuery.Smart3D デモページ [ad#ad-2] パララックスはそれぞれのタイミングをずらして視差効果を生み出し、奥行き感を出すものです。 上記デモでは背景と人物の画像2枚をそれぞれマウスに合わせてずらして表示しています。 使用画像 5枚の画像を使用したパララックス Smart3Dの実装 一番最初に紹介したデモの実装方法です。 HTML 各画像をリスト要素で配置します。 <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS スタイルシートでサイズを設定し、好みでborderなどのデザイン
Home - Red-Team-Design
About our web design school Our Web Design School was created in 2015 to help people learn new professions and companies find competent specialists. The school program is aimed at studying modern web design technologies. About the profession A web designer is someone who designs the user interfaces of applications, web services, and websites. User interfaces are all the things you see on your comp
onehackoranother.com | Default Web Site Page
SORRY! If you are the owner of this website, please contact your hosting provider: webmaster@onehackoranother.com It is possible you have reached this page because: The IP address for this domain may have changed recently. Check your DNS settings to verify that the domain is set up correctly. It may take 8-24 hours for DNS changes to propagate. It may be possible to restore access to this site by
背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」:phpspot開発日誌
背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」 2011年04月25日- jQuery Backstretch by Scott Robbin 背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」 大きな写真等を背景にしていると、ブラウザ幅によって折り返されたりしてかっこ悪くなってしまいますが、このプラグインを使えばブラウザ幅に応じて自動伸縮してくれます。 使い方はプラグインを読み込んだ後、次のように１行書くだけで実装できます。 <script type="text/javascript"> $.backstretch("http://farm3.static.flickr.com/2443/3843020508_5325eaf761.jpg"); </script> 背景に大きな画像を指定し
jQuery Marquee Animation Plugin Preview - CodeCanyon
<p><strong>Marquee Animation</strong> is a jQuery plugin by <strong>Fusio...
背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」:phpspot開発日誌
背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」 2011年05月19日- Documentation: Overlay - Vegas Background jQuery Plugin 背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」。 背景画像を大きくサイトに使う場合に、単に写真を使ってもカッコイイのですが、ドットパターンを合成してよりカッコよくすることが出来ます。 その昔、Photoshopで画像にテレビに写ったような走査線を入れるようなプラグインが流行ったりしましたが、そういう処理は今やjQueryでやる時代のようです。 大きい写真を背景に使ったデザイン。 画像が小さくてもブラウザサイズに応じて引き伸ばしてくれる機能もついてます。 拡大してみると、まぁ
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」:phpspot開発日誌
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。 普通に並べるとちょっと残念なことに。空白ができちゃいます。 プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。 まず、必要な
タブが画像のjQueryプラグイン | labs.yusukenakanishi.com
本日ご紹介するのはですね。タブが画像になっているjQueryのプラグイン。 タブがテキストになってるのはたくさんありますよねぇ。「私、タブが画像になってると嬉しいんだけど。」「テキストが画像になればねぇ。」という多くのお声をいただきまして開発させていただきましたのがこちらimageTabs.js。 ちょっとじっくりご覧下さいこのDemo。 Demoを見る imageTabs.js Demoを見たり触ったりで大体わかっていただけたかと思うのですが簡単にご説明をします。jQueryプラグインですから、jQueryを読み込んでからimageTabs.jsを読み込むようにするんですねー。 // head内の記述 <script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.mi
テキストをタイプライター風に表示するjQueryプラグイン集｜BLACKFLAG
jQueryでWebページ上にテキストを表示する際に、 タイプライター風に一文字一文字入力されるような動きをつけれないか調べていたところ いくつかプラグインが存在していたのでメモ書き程度に紹介してみます。 News ticker (BBC style) | jQuery Plugins ≫News ticker (BBC style) | jQuery Plugins 対象とするIDやCLASSを指定した後、 開始時間のタイミングや細々オプションが設定可能で 使いやすそうなプラグインです。 grab bag ≫grab bag テキスト表示であれこれ動きをつけれるプラグイン。 タイプライター風に表示するには「$(“#my-container”).typewriter();」で 実装可能なもよう。 jQuery TickerType Plugin ≫jQuery TickerType Plu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Victor Coulon : Mon blog High Tech
http://www.kfsoft.info/MyFadeOverImage/demo.php
http://alpaca.chocosk.server-cowboy.net/blog/jquery/jquery-toastmessage-plugin/