PFold: Paper-Like Unfolding Effect | Codrops
A highly experimental jQuery plugin that let’s you unfold elements to reveal more content just like on a piece of paper. Unfolding directions and number of steps can be specified. PFold is a very experimental jQuery plugin that makes it possible to open elements in a paper-like unfolding effect. An element can be unfolded in 3D in order to reveal some other content. The idea is to have several lev
dynamo.js
A dead-simple way to generate dynamic bits of HTML and add subtle effects to your content. About Dynamo is the simple way to add a new dimension to your site content. Cycle through various bits of text to add subtle variations to your work, or to draw attention to portions of your webpage. It was created by this guy and can be found on GitHub. Usage Implementing dynamo with your content involves l
Windy: A Plugin for Swift Content Navigation
This jQuery plugin can be used to swiftly navigate content items. The effect will make the items fly away like a deck of cards caught in a tiny storm. Windy is a jQuery plugin that allows a rapid navigation through a pile of items using some CSS 3D transforms and transitions. The effect of a continuous navigation flow reminds of a deck of cards or sheets flying away, hence the name. This plugin id
まるで画像。テキストを曲線上で表現する·CSSWARP MOONGIFT
CSSWARPはテキストをベジュ曲線や円に沿って表示するJavaScript/CSSライブラリです。 Web Fontの登場によってWebサービスのロゴをテキストで記述するサイトも増えています。しかしまっすぐではなく多少のイフェクトをかけようと思ったらIllustratorのようなソフトウェアを頼らざるを得ませんでした。そこでCSSWARPを使って複雑な文字の描画を実現しましょう。 これがテキストというのが驚きです。 ちゃんと文字として選択できます。 こちらは自分で文字を作れるデモ。 ビジュ曲線でぐりぐり動かせます。 回り込みもできます。 円に沿って描いています。 その結果のHTMLを取得できます。IE9/Opera/Firefox/WebKit対応です。 CSSWARPはベジュ曲線などに沿って文字が描けます。テキスト、曲線の動き、フォント、フォントの配置など細かく変更が出来ます。後は生成
jQuery.twinkle · get the visitor's attention · larsjung.de
0.10.0Draw your visitor's attention to special parts of your website. Examples of the different effects can be experiecend in this demo. All available options are described right below. Quick startTwinkle at a specified element: $(selector).twinkle(); Select an effect and add some effect options: var options = { 'effect': 'drop', 'effectOptions': { 'color': 'rgba(0,0,255,0.5)', 'radius': 100 } };
多彩なイフェクトをご覧あれ。華麗なスライド切り替え·RefineSlide MOONGIFT
RefineSlideは様々なイフェクトに対応したスライド切り替えソフトウェアです。 プレゼンテーションの基本はスライドですが、その切り替えに際してただ入れ替わるだけでは面白くありません。HTMLのスライドであればRefineSlideを使って華麗に、ダイナミックに切り替わるようにしてみましょう。 縦に切り替わるパターン。 右から左へ。 左右に切れていくパターン。 デモ動画です。 RefineSlideを使うとダイナミックなイフェクトが容易に実現します。WebサイトのトップページやHTMLによるプレゼンテーションなど色々な場面で使えるのではないでしょうか。 RefineSlideはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOONGIFTはこう見る 最近のWebサイトではトップページでサービスの紹介動画を載せるか、画像ベースのスライ
3D Restaurant Menu Concept | Codrops
A responsive 3D menu concept for a restaurant website. The idea is to show the menu as a folded flyer and unfold it in order to show the menu items. Applying CSS 3D transforms to components can bring some more realism to normally flat web elements. We’ve experimented with some simple concepts for restaurant websites and came up with a 3D folded menu (a real menu, not a “web” menu). The result is a
Fokus - Emphasized text-highlighting using JavaScript
Fokus uses JavaScript to emphasize anything you select by covering the rest of the page with semi-transparent black. Try it out by selecting this paragraph or the sample content below. You'll see the entire page fade out while this text is highlighted. If you want to use Fokus on your site you just need to include the fokus.min.js script (3kb, no dependencies). Fokus is also available as a Chrome
クライアントサイドだけでここまでできる。JavaScriptの画像加工ライブラリ·Pixastic MOONGIFT
PixasticはJavaScriptによる画像編集エンジンです。 画像のちょっとした加工であればわざわざ高価なソフトウェアを使うことなくオンラインで実現できるようになってきました。今回紹介するPixasticもその一つ、多彩なイフェクトを画像に対してダイナミックに適用するライブラリです。 元の写真です。 白黒加工を施しました。 画像を重ねる処理です。 色彩を変更しました。 エッジ検出。 垂直反転。 ネガ加工。 ノイズを乗せています。 セピア加工。 ぼかし。 カラーヒストグラム。 明るさを調整。 丸を使ったモザイク。 シャープ。 切り抜き。 ポスタリゼーション。 モザイク加工。 PixasticはPhotoshopでいうフィルター的な機能を数多く実装しています。その処理の殆どは画像全体にかかるものになっていますが、カスタマイズすれば指定範囲にだけイフェクトを行うこともできるでしょう。またオ
CSS3だけで作るミニチュア風写真·tiltShift.js MOONGIFT
tiltShift.jsはミニチュア風写真をCSS3で実現するソフトウェアです。 少し前に風景をまるでミニチュアの写真のように加工するテクニックが流行りました。やり方も既に手順化されており、色々なカメラアプリでも楽しめます。そんな加工をCSS3で行ってしまうライブラリがtiltShift.jsです。 イフェクト後の写真です。 左上を解除しました。こちらが元の写真です。 右上を解除しました。 左下を解除しました。 右下を解除しました。 tiltShift.jsは元の画像には一切の編集を行わず、中央をそのままに外側にぼかしをかけることでtilt shiftイフェクトを実現しています（実際にはもっと細かく処理されていますが）。オプションもあり、写真ごとに微調整してみても面白そうです。 tiltShift.jsはjQuery/JavaScript製、GPLのオープンソース・ソフトウェアです。 MO
様々な3Dエフェクトアニメーションでのコンテンツスライダーを実装できるjQueryプラグイン「Adaptor::jQuery content slider」｜BLACKFLAG
jQueryを使ってのコンテンツスライダーを実装するプラグインは多々ありますが jQueryとCSS3での3Dアニメーションでスムーズな切り替えを簡単に実装できる 「Adaptor::jQuery content slider」がいろいろと参考になりそうだったので 自分用メモとして紹介してみます。 Adaptor :: jQuery content slider Adaptor, an extensible jQuery content slider | Phil Parsons デモページはこちら 使い方もとても簡単。 HTMLでは切り替える一つ一つのコンテンツ要素は ＜figure＞タグで制御しているようです。 ※プラグインページのチュートリアル参照 ◆HTML <div class="slider-viewport"><!-- works as a viewport for the
Circle Hover Effects with CSS Transitions | Codrops
A tutorial about how to create different interesting hover effects on circles with CSS transitions and 3D rotations. In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which
Examples of Creative and Modern Effects in Web Design | Codrops
From hover to scroll, there are many ways to surprise and engage website visitors. The possibilities are endless. Get inspired with these examples of creative and modern effects in web design. Modern web technologies are pushing the boundaries of creativity and today we want to share a little collection of modern websites with some great effects. From hover to scroll, there are many ways to surpri
jqIsoText: jQuery Text Effect Plugin
Some content on our pages are more important than other and we want to made him eye catching. There are lot of techniques to achieve that. One of them is jqIsoText. With this plugin we’re changing size of letters in text. It starts from one font size and increment or decrement to other font size. On that way we’re getting something similar to isometric projection. That can be done for whole block
CSS Filter Effectsの使い方
こんにちは、橋本です。 今日は最新版のChromeとWebkit(Nightly Build)で実装された「CSS Filter Effects」の使い方について書いていきたいと思います。 途中のサンプルは、最新のChromeもしくはWebkitを使って見てみてください。 また、サンプルではおなじみの麦わら帽をかぶった女性の画像を使っています。 この画像の女性はレナという方だそうで、この画像は元々はプレイボーイ誌に載っていたヌード写真の一部だそうです。 wikipedia: レナ (画像データ) 「CSS Filter Effects」とは、簡単に言うと「CSSで画像に対して画像処理フィルタを適用しちゃおう！」というものです。 Photoshopの画像処理フィルタのようなものだと思っていただけるといいかと思います。 具体的には、以下のようなフィルタが実装されています。 ・色相・明度・彩度
3D Thumbnail Hover Effects | Codrops
A tutorial about how to create 3D thumbnail hover effects with CSS 3D transforms and jQuery. Today we want to show you how to create some exciting 3D hover effects using CSS3 and jQuery. This idea is inspired by the cool hover effect that you can find on the page of the Google SketchUp Showcase. In our examples, we’ll use thumbails that will reveal some more information on hover. We will create a
スクロールによってリストの表示をダイナミックに変化させる·stroll.js MOONGIFT
stroll.jsはCSS3を使ったスクロール時に多彩なイフェクトを実現するJavaScriptライブラリです。 WebページはJavaScriptによってどんどんダイナミックに変化させられるようになっています。そこにさらにCSS3を組み合わせることでスクロール時のイフェクトをこんなにダイナミックにできます。それを実現するのがstroll.jsです。 例です。スクロールさせるとリスト部の描画が滑らかに変化します。 3Dを使っている場合は特に奇麗です。 様々な変化があります。 スクロールは上から下、下から上の両方に対応しています。 ソースです。ul.classでアニメーション方式を指定しています。後は単純なリストです。 デモ動画です。全部で13種類のアニメーションがあります。 stroll.jsではリストのスクロールに伴うイフェクトを容易に実現できます。スクロールの速度によってイフェクトの幅
Fluid CSS3 Slideshow with Parallax Effect | Codrops
In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides. In this tutorial, we are going to create a slideshow with a parallax effect with the help of some CSS3 properties. We’ll use radio buttons and sibling combinators for controlling which slide is s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mercedes-Benz International: News, Pictures, Videos & Livestreams.
知っておくと何かと応用が利くCSS3を使った表現テクニックいろいろ
