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

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

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

背景画像をスライドショーやフェードで切り替える【jQuery.BgSwitcher】–[FIT BLOG-フィットブログ]

2017/06/29 22 users 内藤 jQueryプラグイン 案件 康太 スライドショー

先日、とある案件で、背景画像をスライドさせて切り替える必要が発生しました。そこでそれを可能にするjQueryプラグインを探していたところ、大変使い勝手の良いjQueryプラグインを発見したのでご紹介させていただきます。jQuery.BgSwitcher「jQuery.BgSwi...内藤 康太　/　2017.06.29 背景画像をスライドショーやフェードで切り替える【jQuery.BgSwitch... 続きを読む

プラグインなしで拡大しながらフェードで切り替わるスライド - yuri memo

2017/02/05 17 users スライド デモ HTML ポンド フルスクリーン

2017 - 02 - 05 プラグインなしで拡大しながらフェードで切り替わるスライド CSS jQuery 拡大しながらフェードインするスライドを実装したのでめもめも。 さらっと言ってますけど、ほんと分からなくて泣きそうになりながら実装したんだよ・・・ぐすん。 とりあえず、デモをのせますね。 1. フルスクリーン背景バージョン 2. 通常スライドバージョン フルスクリーンか通常のかはHTMLと ... 続きを読む

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

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

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

ミニマルテイストなフルスクリーンメニューを実装できる「jQuery fatNav」 | bl6.jp

2015/04/30 20 users ミニマルテイスト ナビゲーションメニュー メニューアイコン

jQuery fatNavはミニマルテイストなフルスクリーンのナビゲーションメニューを実装することができます。デモではメニューアイコンをクリックするとオーバーレイでアニメーション付きのメニューが表示されます。フワッとさりげない感じで表示されるのがとてもお洒落ですね。 以下はjQuery fatNavのデモになります。シンプルでスッキリしたデザインが特徴的です。 デモ メニューはフェードでズームイン... 続きを読む

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

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

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

[CSS]アイデアが面白い！画像に美しいインタラクションを加えるスタイルシート | コリス

2013/10/17 25 users コリス 尾びれ CSS 類い アイデア

風景写真など、普通の画像の上にグリッドを描き、各マス目をホバーした際に尾ヒレのようにフェードで追従させるエフェクトが美しいスタイルシートを紹介します。 便利になるとかそういった類いのものではありませんが、ちょっとした何かに使ってみたいですね。 JavaScript無しというのはポイント高いです。 デモのアニメーション 実際の動作は下記ページで確認できます。 デモはCSS3対応ブラウザでご覧ください... 続きを読む

[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種類... 続きを読む

新FireFoxはちょっとChromeっぽくなって近々登場みたい : ギズモード・ジャパン

2012/06/21 20 users ギズモード Chrome 近々登場 ジャパン Mozilla

ソフトウェア , フリーソフト 新FireFoxはちょっとChromeっぽくなって近々登場みたい 2012.06.21 14:00 コンココーン、チョロメチョロメ、コンコーン！ Mozillaの開発者は、現在FireFox新バージョンの開発中。すでに、誰でもダウンロード可能のプレビュー版を公開しています。1番大きな特徴は、タブ。新FireFoxでは、複数タブ表示のさいに、使用中のタブ以外はフェード... 続きを読む

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

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

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

自力でjqueryで動きをつけたい場合の考え方 - バニデザノート

2012/05/06 25 users jQuery CSS バニデザノート プレゼンテーション 自力

なめらかに動くスライド、可愛いローディングやフェード、 次々と展開されるプレゼンテーション。 配布されている拡張ソースは圧縮されていて読めないし、 コピペすれば動いても、触れるのはcssとhtmlだけ。 だからなにがどうなってそうなるのか、 わからないままでもなんとなく使えてしまうjquery。 そのままでも一般的な動きは付けられますが 一歩すすんで要望や自分のイメージ通りにしようとしたときに ハ... 続きを読む

テキストをランダム表示してから整列していく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を使用しているので、フェードのエフェクト、スライドのエフェクトなどさまざまなアニメーションでオーバーレイを適... 続きを読む