Smoothslides - ケン・バーンズ効果を使ったカルーセル MOONGIFT
最近はWebサイトにカルーセルを載せて写真をスライド表示するのを多く見かけるようになりました。大抵右から左に写真が流れていくものが多いのですが、あまり多いと見飽きてしまいます。これではせっかくの写真が印象に残りません。 より写真を強調したカルーセルを考えるならばSmoothslidesを使ってみても面白そうです。 Smoothslidesの使い方 Smoothslidesを使うと写真が単に表示されるだけでなく、上下左右にゆっくりと動きます。写真がより印象深くなるのではないでしょうか。 これはケン・バーンズ効果と呼ばれ、静止画に動きと生命を与える手法として知られています。AppleのiPhoto、iMovieなどでも実装されているものになります。写真を楽しむ上で欠かせないテクニックと言えそうです。 SmoothslidesはJavaScript製、Creative Commonsのオープンソ
Smoothslides Demo
By Kevin Thornbloom A responsive jQuery slideshow with beautiful panning effects. 1) Include CSS in your website's header <link rel="stylesheet" href="css/smoothslides.theme.css"> 2) Add your images to a div with a class of smoothslides. Also give the div a unique ID to differentiate it from other Smoothslides on the page. You'll get better results with images that are the same size. 3) Add the ja
Vegas – Webサイトの背景を使う写真スライダー
最近、Webサイトの背景に大きな写真を埋め込む表示が見られるようになってきました。デザイナーのプロフィールサイトやランディングページに使うとインパクトがあります。 さらにその写真が複数あるといった時に使ってみたいのがVegasです。画像の切り替えをスタイリッシュに行ってくれるjQueryプラグインです。 Vegasの使い方 左右や上下のスライドではなく、フェードイン/アウトを効果的に使っているのに注目です。写真のトーンを統一してあると一段と格好良さそうです。 VegasはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Vegas Background jQuery Plugin jaysalvat/vegas
雑誌のように美しいレイアウトを生み出すために、Flipboardが開発したレイアウトエンジン | Goodpatch Blog
はじまり 2010年、私たちはFlipboard Pagesという、Webの記事をiPad向けにマガジンページにするというレイアウトエンジンを作りました。 Flipboard Pagesは、Vanity FairやNational Geographicと言った世界一流の出版社のコンテンツをページ割します。 Pagesは、それぞれの出版社のブランドアイデンティティとカスタムタイポグラフィーを再現する美しいレイアウトを生み出すことが出来ます。限定されたモバイルデバイス（例えばiOS 3.2のオリジナルiPad）でも充実かつ高いパフォーマンスでレンダリングするために、PagesはCSS3、SVG、そしてvanilla JavaScriptを使いました。出版社のレイアウトのためのダウンロードファイルサイズは平均すると、およそレイアウト、スタイリング、フォント、ネームプレートイメージなどで90キロバ
iOS7風の背景をボカしてオシャレにするエフェクト実装「oblurlay」:phpspot開発日誌
implement a blur view of iOS7 style with css and jquery. oblurlay iOS7風の背景をボカしてオシャレにするエフェクト実装「oblurlay」。 iOSで、バックグラウンドをすりガラスですかして見たようなエフェクトがありますが、これをブラウザ上で実現するためのjQueryプラグインです。 背景に馴染む上になんかシャレオツ！ 関連エントリ iOS7用インタフェース作成用のワイヤーフレーム「iOS 7 Wireframe Kit」 フリーのiOS7アイコン800個セット iOS7のワイヤーフレーム作成用illustratorキット「Awosomekit」 iOS7のUIが詰まったPSD「iOS7 GUI PSD」
2013年下半期に紹介したjQueryプラグイン68選まとめ – bl6.jp
今年も残すところあとわずかとなりました。今年もたくさんのjQueryプラグインを紹介してきたので復習もかねてまとめてみました。前回は2013年上半期をまとめたので、今回は2013年下半期に紹介したjQueryプラグインのまとめです。全部で68のプラグインがありました。上半期の50に対し下半期68なので、両方合わせると118になります。それでは、以下どうぞ。 [ads_center] スライダー、カルーセル系 Excolo Slider タッチやマウススライドにも対応しているjQueryスライダーです。 タッチにも対応しているシンプルなjQueryスライダー「Excolo Slider」 Owl Carousel タッチ操作やレスポンシブにも対応しているカルーセルです。 タッチ操作やレスポンシブにも対応したカルーセルを実装できるjQueryプラグイン「Owl Carousel」 Coin S
試してみよう。背景の要素を自然にぼかす·Vague.js MOONGIFT
Vague.jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 iOS 7が登場した直後に一気に注目を集め始めたのが背景をぼかす表現ではないでしょうか。類似のライブラリは幾つかあると思いますが、今回はVague.jsを紹介します。 一例。メインの画像以外はぼかしています。 画像を切り替えることもできます。アルバムに良さそうです。 こちらは中央以外がぼやけています。 こんな感じの表現も可能です。 Vague.jsでは擬似的ではなく、Webページの上に一枚重ねてぼかし表現を加えています。そのため若干重たい気がしますが、画像だけでなくテキストもぼかされるのでより正確な表現ができるようになっています。 iOS 7のレイヤーの重なり具合を表現するUIは新鮮ですが、自然なパララックスはとても難しいです。そこに大きな需要があるのではないかと
NoCode jQuery Slider : jQuery Slideshow : 2024 WOW!
An image slider is an image slider, and they're all roughly the same, correct? Not so quickly. What are the primary criteria for selecting any kind of web component? Compatibility, simplicity of setup, great performance, and an attractive design and feel. With our Slider we've tried to create the perfect html slider that covers all these needs and even more: Compatibility with the widest feasible
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
http://www.extrapixcel.com/zoom-in-zoom-out-full-screen-jquery-slider/
Slideshowify - Project Home
Scott Robbin
Loading...
Ken Burns Zooming Effect Jquery Slider / Slideshow Script
Help Center - Slider Revolution