こんなことができるんだ！CSSのボーダーを破線や点線にするスタイルシートのテクニック | コリス

2020/08/25 192 users コリス 点線 傾斜 CSS アニメーション

ただし、このCSSでは破線や点線の大きさや長さをコントロールできません。また、ボーダーに傾斜やフェードやアニメーションを与えることもできません。 しかし、いくつかのテクニックを使用することで、それが実現できます！ Amit Sheenが作成したDashed Border Generatorで簡単に実現できます。 See the Pen Dashed Bor... 続きを読む

フェード表示やタイピング風など、テキスト表示に動きをつけられるjQueryプラグイン 8 | NxWorld

2015/11/09 66 users 備忘録 NxWorld jQueryプラグイン 回転 選択肢

いずれもテキストがフェードや回転といったアニメーション付きで表示されたり、一文字ずつタイピングされているような見せ方を実装することができるjQueryプラグインです。同じようなプラグインが並んでいる感じですが、軽量なものやオプションが豊富に揃っているもの、日本語にもしっかり対応しているかなどそれぞれ特徴もあるので、こういったものを使いたい時に少しでも選択肢が広がるよう良さそうなものを備忘録兼ねてま... 続きを読む

[CSS]さまざまなスタイルのツールチップが簡単に実装できるSassでつくられた -Simptip | コリス

2013/11/07 96 users Sass コリス class CSS アニメーション

classを変更するだけで、ツールチップを表示する方向、カラーを変更したり、フェードやスライドのアニメーションで表示したりなど、さまざまなスタイルのツールチップを実装できるSassでつくられたスタイルシートを紹介します。 実装にはSassの知識は必要なく、簡単に利用できます。 Simptip Simptip -GitHub Simptipのデモ Simptipの使い方 Simptipのデモ ツール... 続きを読む

[CSS]画像の上に半透明なパネルを簡単に配置できる便利なスタイルシート（フェードも可） -Label.css | コリス

2013/05/21 109 users コリス 半透明 エフェクト CSS ホバー時

画像の上に半透明なラベルを天地中央、左右に簡単に配置でき、しかもホバー時にフェードでラベルを表示するなどのエフェクトも備えたスタイルシートを紹介します。 Label.css Label.css- GitHub Label.cssのデモ Label.cssの使い方 Label.cssのデモ デモでは、画像のラベルを動的に試すことができます。 通常利用する時は、静的に。 デモ 左のパネルでラベルを表示... 続きを読む

[JS]画像ホバーで、さまざまな要素を配置した半透明のパネルをアニメーションで表示するスクリプト -HCaptions | コリス

2013/03/10 120 users jQuery コリス jquery.js Step 半透明

画像をホバーすると、スライドやフェードのアニメーションで表示する半透明のパネルを実装するjQueryのプラグインを紹介します。 パネルは実装もカスタマイズも簡単です。 HCaptions -GitHub HCaptionsの準備 HCaptionsのデモと実装 HCaptionsの設定 HCaptionsの準備 まずは、スクリプトを使う準備から。 Step 1: 外部ファイル 「jquery.js... 続きを読む

シンプルで汎用性に優れたレスポンシブ対応のタブコンテンツ -Basic Tabs | コリス

2013/03/05 87 users コリス 切替 タブ レスポンシブ対応 実装

jQueryとCSS3アニメーションを使ってシンプルに実装する、レスポンシブ対応のタブコンテンツを紹介します。 BasicTabs - The Simple jQuery/CSS3 Solution Basic Tabsのデモ Basic Tabsの実装 Basic Tabsのデモ タブはレスポンシブ対応で、表示サイズに合わせて最適化されます。 タブの切替はCSS3アニメーションで、左からフェード... 続きを読む

[JS]テキストをFlashのような美しいさまざまなアニメーションで表示するスクリプト -animateText.js | コリス

2012/12/11 78 users コリス jQuery Flash スクリプト アニメーション

Flashのような美しいアニメーションで、複数のテキストをスライドやフェードなどで表示するjQueryのプラグインを紹介します。 animateText.js animateText.js -GitHub animateText.jsのデモ animateText.jsの使い方 animateText.jsのデモ ページ上部のデモでは、スライド、フェードなどのアニメーションで、テキストが次々に表示... 続きを読む

[JS]フェードで表示・非表示するFAQコンテンツをシンプルなコードで実装するチュートリアル | コリス

2012/11/25 67 users コリス ANSWER jQuery チュートリアル エフェクト

jQueryを使って、FAQのAnswerをフェードで表示・非表示を切り替えるコンテンツをシンプルなコードで実装するチュートリアルを紹介します。 Code a Dynamic Questions & Answers FAQ Page with jQuery デモ 実装 デモ FAQのデザインは、非常にシンプルです。 エフェクトはCSSに依存していないため、自由にデザインを変更して利用できます。 デ... 続きを読む

[CSS]コピペで簡単にCSS3アニメーションを実装できるライブラリ・ツールのまとめ | コリス

2012/11/21 375 users コリス トゥイーン CSS イージング コピペ

CSS3アニメーションで、背景を変えたり、ボタンをバウンドさせたり、画像をフェードやフリップで表示したりなどをコピペで実装できるライブラリ、緩急をともなったイージングやトゥイーンの微調整を設定できるオンラインツールをまとめて紹介します。 animatable CSS3アニメーションの基本から、かっこいい応用までコピペで簡単に実装できます。 詳細：CSS3アニメーションの基本的な実装例のまとめ An... 続きを読む

フェード・スライド・バウンド・フリップ・スターウォーズなど、CSS3アニメーションのコードを自動で生成するオンラインツール -liffect | コリス

2012/11/05 64 users コリス スターウォーズ キャプチャ アニメーション スライド

リストで実装した複数の画像を24種類のかっこいいCSS3アニメーションで順番に表示するコードを1クリックで自動生成するオンラインツールを紹介します。 liffect - effect for lists キャプチャは「Zoom In」、左上から順番にズームインします。 用意されているアニメーションは全部で24種類！ どれも使いたくなるようなかっこいいアニメーションです。 アニメーションは全24種類... 続きを読む

[JS]パララックス、スライドなど、スクロール時のエフェクトをよりスムーズにしたスクリプト -SuperScrollorama | コリス

2012/05/27 172 users パララックス コリス トゥイーン エフェクト スクリプト

パララックスをはじめ、フェードやスライド、トゥイーンなど、多種多様なアニメーションに対応している、「スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ」で紹介した「scrollorama」を強力にパワ [...] 続きを読む

テキストをランダム表示してから整列していくjQueryプラグインを作ってみました | bl6.jp

2012/03/19 78 users jQueryプラグイン テキスト ランダム bl6.jp 以下

テキストをランダムでフェード表示させて、アニメーションで整列させていくっていうのをjQueryで作りたく色々と試しながらなんとかできたのでプラグイン（jquery.random.text.return.js）にしてみました。ぶっちゃけほぼ使い道がなさそうなプラグインですけど。。ということで以下使い方です。 使い方 とりあえずサンプルみた方が早いので以下のページから見れます。 サンプル 使い方はめっ... 続きを読む

[CSS]1ページで構成されたウェブサイトで使える、かっこいいCSS3アニメーションのテクニック | コリス

2012/01/31 113 users コリス div要素 ナビゲーション アニメーション スライド

CSS3アニメーションを使って、ダイナミックなスライドやフェードのアニメーションでページ（コンテンツ）を切り替えるテクニックを3つ紹介します。 Demo 3 Demo 3は左からスライドのアニメーションで切り替わります。 実装 デモは一見、Homeを含む4ページで構成されているように見えますが、1ページで作成されています。 HTML HTMLはdiv要素で配置したコンテンツが4つ、ナビゲーションが... 続きを読む

[CSS]アニメーションを伴った画像ギャラリーをCSS3で実装するチュートリアル | コリス

2012/01/31 53 users コリス jQuery チュートリアル CSS アニメーション

jQueryなどのJavaScriptを使用せずに、フェードのアニメーションで画像が切り替わるギャラリーを実装するCSS3のチュートリアルを紹介します。 各画像への#リンクも有効です。 Pure CSS3 Sliderのデモ Pure CSS3 Sliderの実装 Pure CSS3 Sliderのデモ 画像ギャラリーのナビゲーションは下部の丸いアイコンで、クリックするとフェードのアニメーションで... 続きを読む

jQueryを使ったアニメーションと、ユーザビリティの話。それとCSS3。 - 甘味志向＠はてな

2011/12/03 150 users jQuery ユーザビリティ Tips モロ 甘味志向

JavaScript, CSS3 JavaScript Advent Calendar 2011、2日目のもろへいやです。とても遅れてすいません… 私は技術的な話は得意ではないので、デザイン面からJavaScriptプログラマーに向けてのTipsを書きたいと思います。今回は、アニメーションの話を書いてみます。 jQueryは標準で、要素の表示・非表示を切り替えるときにフェードやスライドを使うことが... 続きを読む

文字を映画ばりにカッコよくアニメーションさせるjQueryプラグイン「jWise.js」:phpspot開発日誌

2011/11/16 72 users jQueryプラグイン phpspot開発日誌 文字 以下

HavaLite 文字を映画ばりにカッコよくアニメーションさせるjQueryプラグイン「jWise.js」 アニメーション系は説明が難しいので以下のデモページを見ていただくのが一番速いです。 デモページ 数種類のアニメーションがあり、切り替えタイミングやフェードの状態なんかはオプション指定できます。 あとは $(element).jwise(options); で動きます プロモーションサイトなん... 続きを読む

[JS]アニメーションで動作する画像ギャラリーの超軽量すぎるスクリプト -Rhinofader | コリス

2011/10/31 125 users jQuery slideshow コリス images 手動

実用的なオプションを備えた、フェードのアニメーションで切り替わる画像ギャラリーを実装するjQueryのプラグインを紹介します。 操作方法は自動・手動の2つです。 左下のアイコンで再生・停止、左右の矢印アイコンで画像を前後に切り替えます。 Rhinofaderの実装 HTML 画像はリスト要素で実装します。 <ul id="slideshow"> <li><img src="images/001.j... 続きを読む

CSSで様々なアニメーションが実現できる「Animate.css」:phpspot開発日誌

2011/10/22 78 users animate.css CSS phpspot開発日誌 要素

Animate.css - a bunch of plug-and-play CSS animations CSSで様々なアニメーションが実現できる「Animate.css」 要素をバウンス、フラッシュ、フェード、シェイクといった多彩なアニメーションを使ってCSS3だけで変化させられる仕組みです。 CSSだけでもここまで出来るのかというところを確認する意味でも一度みておいてよさそうです 関連エント... 続きを読む

[JS]さまざまな要素にオーバーレイをアニメーションで簡単に適用できるスクリプト -Simple Overlay | コリス

2011/06/22 55 users コリス キャプチャ エフェクト スライド スクリプト

上記ページの右上にもデモが掲載されており、左の「Try It」ボタンをクリックすると下記のようにモニターの画像にオーバーレイが適用されます。 オーバーレイの解除はオーバーレイをクリックです。 デモのキャプチャ（拡大） Simple Overlayの主な特徴 さまざまなエフェクト jQueryを使用しているので、フェードのエフェクト、スライドのエフェクトなどさまざまなアニメーションでオーバーレイを適... 続きを読む

[JS]美しいエフェクトを備えた水平タイプのアコーディオンのスクリプト -zAccordion | コリス

2011/06/13 113 users コリス ドロップシャドウ アコーディオン jQuery 実装

滑らかなスライドのアニメーション、繊細なドロップシャドウ、フェードで表示されるインフォボックスなど、美しいエフェクトを備えたアコーディオンのjQueryのプラグインを紹介します。 zAccordion — An Inverted Accordion スライドの重ね順を反転させたちょっと面白いデモ。 zAccordionの実装 HTML アコーディオンの各パネルはリスト要素で実装します。 続きを読む

[JS]多彩なエフェクトが面白い、ボックスにパネルをスライド・フェード表示するスクリプト -Mosaic | コリス

2011/04/19 119 users Mosaic circle コリス キャプチャ エフェクト

デモページ ダイナミックな斜め方向のスライドのアニメーションで表示 Mosaicの実装 HTML: circle 上記の一番上のキャプチャ、「circle」の実装例です。   続きを読む

CSS3で画像もJSも使わないモーダルボックスサンプル:phpspot開発日誌

2011/03/28 64 users phpspot開発日誌 CSS3 アニメーション ボックス

CSS Modal ? Paul Hayes CSS3で画像もJSも使わないモーダルボックスサンプル。 ボックスが徐々に大きくなりつつフェードも組み合わせたアニメーションがCSS3で実現されているところがいいです。 ボックスも影がついてて閉じるボタンだってあります。 JavaScriptを切っても動いてます。 実際に使う場合はやっぱりJSを使ったほうが便利なものが出来るわけですが、CSS3だけでも... 続きを読む

[JS]ページ遷移にフェードやスクロールのアニメーションを加えるスクリプト -Pageswitch | コリス

2010/11/23 257 users コリス example スクロール スクリプト アニメーション

デモページ Pageswitchの実装 実装は簡単です。 HTML 既存のHTMLに、特に手を加える必要はありません。 idに使用している「example」は適当なものに変更できます。 <div id="example"> <a href="http://coliss.com/">Example #1</a><br /> <a href="http://www.example.com">Examp... 続きを読む

[JS]jQueryのプラグイン33+1選 -2010年7・8月 | コリス

2010/08/31 336 users jQuery コリス アニメーション 背景 プラグイン34選

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Shadow animation シャドウをアニメーション。 bgFade マウスホバーで背景をフェードでアニメーション。 hoverFade マ [...] 続きを読む

jQueryのアニメーション関連いろいろまとめ :: 5509(+1)

2010/02/09 407 users jQuery animateメソッド Tips 単体 スライド

jQueryを使えば単体でもフェードやスライドなどのアニメーションを誰でも簡単に使えますが、animateメソッドを使うとより便利に凝ったアニメーションを実行することができます。animateメソッドを使って何かを作るときに役立ちそうなチュートリアルと、すぐ使いたい人向けのプラグインを集めました。 TIPS/チュートリアル プラグイン/animateメソッドの拡張など プラグイン/単体で使えるもの... 続きを読む