【HTML/CSS】たかがフェードイン/フェードアウトするだけの挙動に全力で取り組んだ結果、最強のCSSができてしまった話【最強】

2018/06/19 22 users REVEL 挙動 CSS エウレカ HTML

【HTML/CSS】たかがフェードイン/フェードアウトするだけの挙動に全力で取り組んだ結果、最強のCSSができてしまった話【最強】エウレカのPairsグローバル事業部エンジニアの山内です。 この記事は、eureka Advent Calendar 2017 13日目の記事です。 昨日は新卒エンジニア鈴木康文さんの「Goのフレームワーク“Revel”を触... 続きを読む

【HTML/CSS】たかがフェードイン/フェードアウトするだけの挙動に全力で取り組んだ結果、最強のCSSができてしまった話【最強】 | eureka tech blog

2017/12/13 3803 users 挙動 CSS HTML 最強 eureka tech blog

エウレカのPairsグローバル事業部エンジニアの山内です。 この記事は、eureka Advent Calendar 2017 13日目の記事です。 昨日は新卒エンジニア鈴木康文さんの「 Goのフレームワーク“Revel”を触ってみた 」でした。 これからGoをはじめてみようという方にはとても入っていきやすい内容です。是非。 # 前置き 最近、HTML要素をフェードイン/フェードアウトする実装をし... 続きを読む

jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法 | BlackFlag

2015/08/25 39 users jQuery BlackFlag 縮小 主流 アウト

今やWebサイトを作る際にはほぼ必須アイテムとなっている ページの最上部に戻るための「ページトップへ」ボタン。 最近ではページ内をある程度スクロールするとボタンが出現するタイプが主流になっています。 そんな「ページトップへ」ボタンの出現方法を フェードイン／アウト、下方向からスライドイン／アウト、ボタン要素を拡大／縮小、 の3つパターンで実装する方法を紹介してみます。 【フェードイン／アウト】 j... 続きを読む

スクロールしたらふわっと画像が表示されるjQueryプラグイン「Lazy Load」 |　バニデザノート

2015/07/23 24 users Lazy Load バニデザノート jQueryプラグイン

最近またよく見かけるようになってきた動きのひとつなので、ご紹介します。 スクロールしたら、画像を読み込むようにすることで、上手にコーディングすればロード時間も短縮できるかもなプラグインです。 画像がフェードインアニメーションするのを見ているだけでも、なんとなく「手が掛かっているように見える」という効果もあるかもです。 続きを読む

CSS3を使った多彩なアニメーション用ライブラリ「magic」:phpspot開発日誌

2013/06/21 26 users Magic アニメーションエフェクト Flash CSS3

CSS3を使った多彩なアニメーション用ライブラリ「magic」 2013年06月21日- magic css3 animations CSS3を使った多彩なアニメーション用ライブラリ「magic」 要素をフェードイン、アウトさせる等の多彩なアニメーションが詰まっています。 スマホやタブレットで要素にアニメーションエフェクトを付けたい際に使えるかもしれません 関連エントリ Flashみたいに美しいC... 続きを読む

シンプル多機能なWebオーディオ再生ライブラリ「howler.js」:phpspot開発日誌

2013/02/04 27 users phpspot開発日誌 ループ オーディオ プレイヤー 音声

howler.js - Modern Web Audio Javascript Library - GoldFire Studios シンプル多機能なWebオーディオ再生ライブラリ「howler.js」 オーディオの再生、停止、ループ、フェードイン/アウトの他、1秒〜3秒はA、3秒〜6秒はBといった感じでCSSスプライト風に音声をスプライトできます。 とりあえずプレイヤーのUIはいいから再生とか基... 続きを読む

CSSを使った様々な画像表示エフェクトをプレビューしながらコード生成できるジェネレーター。フェードインなどのよくあるエフェクトから3D表現まで24種類のエフェクトを生成できます。

2012/11/05 33 users ジェネレーター エフェクト CSS コード 3D表現

コメンターとは コメンターは、クリエイターの気になるサイトやページをシェアして、匿名ならではの自由なコメントをみんなで楽しむコミュニティです。 このページをシェア 上記リンクをブックマークツールバーに登録することで、閲覧中のサイトをその場でシェアできます。 続きを読む

MacOS X Lion風のスクロールをブロック要素に付けられる「Antiscroll」:phpspot開発日誌

2012/09/06 36 users マウスホイール スクロールバー トラックパッド カーソル

Antiscroll - os x lion style cross-browser native scrolling on the web that gets out of the way MacOS X Lion風のスクロールをブロック要素に付けられる「Antiscroll」 カーソルを合わせるとクールなスクロールバーがフェードインで現れ、マウスホイールやトラックパッドで動くスクロールを実装可... 続きを読む

フェードイン・アウトも自由自在！波形を見ながらiPhoneの着信音を超簡単に自作できるMacApp「Ringer」

2012/01/02 20 users iPhone MacApp OZPA 諸兄 波形

音楽大好き！@OZPA です。 さて今回は、iPhoneの電話・メール着信音を簡単に作れるMacアプリ「Ringer」のご紹介。フェードイン・フェードアウトまで設定できる優れものですぞ！ Ringer – Ringtone Maker 1.3.2 価格: ￥350 (記事公開時) カテゴリ: ミュージック App Storeで詳細を見る。 さて、音楽好きの諸兄なら、iTunesに入っている音源を着... 続きを読む

[CSS]classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css | コリス

2011/10/16 460 users コリス class CSS stylesheet シェイク

フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できるクロスブラウザ対応のスタイルシートを紹介します。 ※JavaScriptは一切使用していません。 Animate.cssの使い方 「animate.css」を外部ファイルとして指定し、アニメーションを加えたいエレメントにclassを付与するだけです。 外部ファイル <link rel="stylesheet... 続きを読む

[JS]ウェーブ状のアニメーションでフェードイン・アウトさせる超軽量スクリプト -WaveAnimate | コリス

2011/09/04 47 users コリス アコーディオン エレメント div要素 アニメーション

WaveAnimateのデモ デモでは3通りのアニメーションがあり、上キャプチャのものは端のエレメントから順番にフェードします。 エレメント（右端の赤）を除外し、アコーディオンのようなアニメーションを適用することもできます。 赤いエレメントを除外したデモ WaveAnimateの実装 デモを例に、実装方法を紹介します。 HTML デモではdiv要素で実装したボックスを配置しているだけです。 <di... 続きを読む

[JS]あらゆる要素をランダムにフェードアウト・インさせるスクリプト -LivingFade | コリス

2011/07/25 83 users コリス フェードアウト エフェクト スクリプト div要素

デモでは複数のdiv要素がボックス状に配置されており、「Fade Out」「Fade In」ボタンをクリックすると、フェードアウト・フェードインのエフェクトがランダムなタイミングで適用されます。 デモ：ベーシック callback機能もあり、エフェクトが終了すると、メッセージが表示されます。 エフェクトの適用範囲を指定することも可能で、下記は右下のdiv要素に異なるclass名を与え、その箇所のみ... 続きを読む

アプリケーションごとに音量を保存しておいて、アプリが切り替わるたびにシステム音量を変更『Globvler』 | Macの手書き説明書

2011/06/12 29 users テキストエディタ 音量 iTunes Mac たび

アプリケーションごとにシステム音量を自動的に変更できるアプリです。 たとえばテキストエディタを最前面に表示している時は自動的に音量を小さくなるようにしたり、iTunesを最前面にした時は音量を大きくして音楽に集中といったような使い方ができると思います。 フェードイン/アウトも設定できるので急に音が大きくなって耳が痛くなるということもなくていいですね。 Globvler (無料) 続きを読む

あらゆる要素をぱらぱらフェードイン＆フェードアウトさせるためのjQueryプラグイン『diagonalFade』 | IDEA*IDEA

2011/04/08 63 users IDEA DOM エフェクト jQueryプラグイン こいつ

こいつもメモしておこう・・・。写真やらその他のDOMをぱらぱらとフェードイン＆アウトさせるためのプラグインですよ。↑ おしゃれなエフェクトですよね。もちろん時間や方向やらを指定することができますよ。ショーケースやらポートフォリオやらのサイトを作るときに便利かもですね。» diagonalFade : A jQuery plugin 続きを読む

利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」:phpspot開発日誌

2009/04/16 271 users phpspot開発日誌 CSS インパクト 通知 右上

Notimo Demos site 利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」。 次のリンクをクリックしてみてください。 → 通知を表示してみる ページの右上にフェードインで表示するのはなかなかインパクトが大きいですね。 スクロールしても、いやみではない感じにちゃんとついてきてくれます。 使い方もかなり簡単で、必要なJSとCSSを読み込んだ後、イ... 続きを読む

素晴らしいjQueryのチュートリアル45選 | CREAMU

2009/02/06 314 users CREAMU jQuery lightbox キャプチャ 以下

jQueryでクールなインターフェースを実装したい。 そんなときにおすすめなのが、『40+ Excellent jQuery Tutorials』。素晴らしいjQueryのチュートリアル45選だ。 以下にいくつかご紹介。 » デザイナーのためのjQueryチュートリアル » Facebookスタイルのlightbox » ソートできるポートフォリオの作り方。↑のキャプチャはこちら » フェードイン... 続きを読む

MP3ファイルをロスレス編集することができるフリーソフト「mp3DirectCut」 - GIGAZINE

2008/05/08 570 users GIGAZINE ノーマライズ 音量 音質 検出

MP3ファイルを編集すると通常は再エンコードによって音質が劣化してしまいますが、音質を全く劣化させずに不要な部分をカット・コピーなどによる編集が可能なフリーソフトがこの「mp3DirectCut」です。 単純に指定部分を切り取ったりコピーしたり貼り付けるだけでなく、音量の変更やノーマライズ、フェードイン/アウト、無音区間の検出、リアルタイムにMP3形式に変換しながらの録音、さらにはCUEシートをも... 続きを読む

利用者にメッセージを分かりやすく伝えるJavaScriptライブラリ「Window.Growl 2.0」:phpspot開発日誌

2007/07/10 112 users phpspot開発日誌 JavaScriptライブラリ

利用者にメッセージを分かりやすく伝えるJavaScriptライブラリ「Window.Growl 2.0」 2007年07月10日 Window.Growl 2.0 利用者にメッセージを分かりやすく伝えるJavaScriptライブラリ「Window.Growl 2.0」 「Window.Growl」を使えば、クリックするとフェードイン表示し、数秒後に消える、というようなメッセージボックスを簡単に実装... 続きを読む

次々と美麗な写真をダウンロードして見せるスクリーンセーバー「Slickr」

2007/05/03 217 users スクリーンセーバー Flickr フェードアウト 美麗 タグ

「Flickr」という超有名な写真共有サイトから、指定したタグやグループ別、あるいは注目度が高くて人気のある美麗な写真をどんどんダウンロードし、フェードイン・フェードアウト、ズームイン・ズームアウトなどの効果を駆使して次々と見せてくれるというすごいスクリーンセーバー、それが「Slickr」です。 ただ見るだけでなく、ダウンロードして表示した写真は片っ端から指定容量に達するまで保存され、表示中に「こ... 続きを読む

glayer.js - グレーアウト表示ライブラリ

2006/08/07 300 users Lightbox.js ライブラリ Reader 背景全体

Lightbox.jsや、Livedoor Readerのフィード追加画面のような、背景全体をグレーアウト表示させるためのライブラリです。(gray＋layerで、glayer.js) Lightbox JS livedoor Reader - RSSリーダー なお、Ver 2.0 にて、prototype.js、script.aculo.usの使用せずに、glayer.jsのみでフェードイン、フ... 続きを読む