ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。（CSS3のアニメーション機能のみで実現） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。（CSS3のアニメーション機能のみで実現） デモページ ダウンロード↓ こんばんは、デザイナーのOです。 まずはデモをどうぞლ(╹◡╹ლ)。 先日、「ページ背景に画像をフルスクリーンで表示させてスライドショーを流す」という案件がありました。 これの実装ですが、まっさきに考えたのはやはりjQueryプラグインでした。 この手のプラグインなら探せばそこら中にごろごろ転がってるし、あまり新鮮味が感じられないというか・・ ところが、いつものようにプラグインあさりしてたら、こんな面白い記事が目に留まった！ Fullscreen background image slideshow with CSS3 これ、CSS3のみでフルスクリーンのスライドショーを作るという試みですな！僕的には結構面白くて、特に三番目のデモ、背景
シンプルで汎用性が高くてめちゃ軽いJQueryプラグイン『Glide.js』を使ってスライダーを作ろう - あのねノート。
2013-09-09 シンプルで汎用性が高くてめちゃ軽いJQueryプラグイン『Glide.js』を使ってスライダーを作ろう やり方 Glide.jsは、画像や動画だけじゃなく、どんな要素でも組み込めるスライダーを作れる軽量JQueryプラグインです。 Glide.js | Simple, Lightweight & Fast jQuery Slider Glide.jsは以下の仕様となっています。 シンプルかつ軽量 レスポンシブ対応 タッチ対応 スワイプ対応 キーボード対応 OOCSS Demoを見るとわかりますが、めちゃめちゃ軽いです。 ではドキュメントにしたがって、コードを書いてみましょう。 チュートリアル ドキュメントにしたがってコードを書いていきます。 まずはJQueryとGlide.jsを読み込みます。 <script src="http://code.jquery.com/
Fullscreen Slit Slider with CSS3 and jQuery
A bene placito You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity. Ralph Waldo Emerson Regula aurea Until he extends the circle of his compassion to all living things, man will not himself find peace. Albert Schweitzer Dum spiro, spero Thousands of people who say they 'love' animals sit down once or twice a day to en
[JS]シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のスクリプト -Unslider
シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のjQueryのプラグインを紹介します。 デスクトップのキーボード操作やスマフォ・タブレットのスワイプ操作にも対応！ Unslider Unslider -GitHub Unsliderの特徴 Unsliderのデモ Unsliderの使い方 Unsliderの特徴 超軽量のオープンソース スクリプトは3KBと超軽量のオープンソースです。 実装は簡単でクリーン HTMLは非常にシンプルで、カスタマイズも容易です。 高さの調整 サイズに合わせて、スライダーの高さを自動調整します。 レスポンシブ対応 デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。 キーボード操作の対応 キーボード（矢印キー）での操作をサポートします。 スワイプ操作の対応 jQuery.event.swipeをサポートしているので、スワイプ操作に
JavaScriptのスライダーにブラー効果をつけてみる実験 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 先日リニューアルのご報告をした Matsukaze.で使用している ブラー効果をつけたスライダーで、実験的に採用した手法を記録しておきます。 基本的な仕組み ぼかし画像の透明度について 簡単なデモ まとめ 基本的な仕組み まずスライダーに使用する絵を連結して一枚の画像にしたものを作成。 そして、その画像を横にブレさせた画像を別途用意します。 ぼかし画像は、例えばFireworksなら「移動（ぼかし）」を水平方向にかけ、 さらにその上に反対方向の「移動（ぼかし）」をかけたものを透明度50%ぐらいで重ねています。 ぼかしの強さはコンテンツの内容・大きさとご相談で、いい按排を探ります。 HTML上ではその2つの画像を、ぼかし画像を上にして重ね合わせて配置し、 スライダーが動く時にぼかし画像の透明度を変更してスピード感を出します。 基本
JQuery Cycle Plugin
Check out Cycle2, the latest in the Cycle line of slideshows. Overview The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Easing Plugin. How it Works The plugin provides a method called cycle which is
jQuery Slider² - Make your site slide - wex.im
What is it? It's now back. A small and lightweight jQuery-plugin to create simple inline slideshow. TODO/Changes 1.2.0 ? What to do? 1.1.0 (22.8.2011) Random starting slide now possible. It's also possible to choose slide by clicking progress balls now. 1.0.0 (21.6.2011) Rewrote the plugin. Much nicer now ;) 0.0.5 (?) On hover shown controls Link-support to slides 0.0.4 (15.3.2011) Fixed problem
jQueryで簡単スライダー | WEBZARU
文字や画像のコンテンツをスライドさせて効率良く見せたいということがよくあります。 このような動きのある表現を実装する場合には、一般的にJavaScriptを使って実装しますが、jQueryのライブラリを使ってシンプルに作成するというのが流行りです。 スライダーのライブラリは検索すればたくさんありますが、jQuery Slider²を使って簡単にスライダーを実装する方法をご紹介。 jQuery Slider²とは 簡単に文字や画像のコンテンツをスライドさせる軽量のJavaScriptで、jQueryと併用して使用するライブラリです。 jQuery Slider²の使い方 jquery.slider.cssとjQuery本体とjquery.slider.min.jsを読み込む必要があります。 <!DOCTYPE html> <html lang="ja"> <head> <meta chars
今すぐ使いたくなる！個性的でわくわくする動きのスライダー12選（Javascript・CSS3） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、サリーです。 最近は無料のスライダーでも良質のものがたくさん溢れていて、どれを使っていいか悩みすぎてしまう。。ということがよくありまして。 「これだ！」という決め手があればなあ。ということで、今回は他との違いを見せつける個性的なスライダーばかりを集めてみました。 今すぐ使いたくなるような、わくわくする動きでいっぱいです。デモページと共に紹介していきます。 【最新スライダーはこちら！】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Slit Slider Revised http://tympanus.net/codrops/2012/10/24/slit-slider-revised/ DEMO： http://tympanus.net/Tutorials/FullscreenSlitSlider/ 絵が真ん中から横にバカッと、時
Nivo Slider - jQueryを利用した画像のスライドショー
このサイトの一番下でJavaScriptとCSSをダウンロードできます。ダウンロードするのはProductionと書いてある方でいいと思います。ただ、CSSについてはそのままだとうまく表示されないと思うので以下のように変更して上書きします。 現在はCSSの追加なしで表示されるようになっています。また、全ファイルがzip形式でダウンロードできるようになっています。最後に書いたjavascriptのカスタマイズはまだ参考になるのでぜひご活用ください。 * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * March 2010 */ /* ここからが追加部分 */ #slider { position:relative; min-height:
[JS]複数の商品写真を見せるのに適したコンテンツスライダー -FancyMoves
複数の商品写真を見せるのに適した、画像拡大にも対応したコンテンツスライダーのスクリプトを紹介します。。 画像を拡大表示したキャプチャ FancyMovesの特徴 滑らかなアニメーションで画像がスライド表示。 画像はスライドすると拡大・縮小表示。 スライダーの送りは、矢印・画像のクリック。 キーボード（矢印）操作にも対応。 画像は拡大表示が可能（FancyBox使用）。 FancyMovesのオプション スクリプトのオプションでは、下記の設定が可能です。 パネルのサイズ パネルで使用する画像のサイズ 見出し・本文の文字サイズ 移動距離 また、FancyBoxを使用しているので、そちらのオプションも変更できます。 FancyMovesでは下記のオプションを調整しています。 ズームイン・アウト時のスピード 不透明度 オーバーレイのカラー
画像切り替えがユニークな画像スライダー実装jQueryプラグイン「Coin Slider」:phpspot開発日誌
Coin Slider: jQuery Image Slider Plugin with Unique Effects 画像切り替えがユニークな画像スライダー実装jQueryプラグイン「Coin Slider」。 画像の切替を、タイル状に切り替えたりすることができるみたいです。 jQueryプラグインなので、$(elemen).coinslider メソッドにオプション渡せば動くようになっています。 少し面白い動きを付けたい、という場合にも簡単に実装できるので覚えておくとよいかもしれませんね。 Flashで同じようにやろうとすると１からだと結構面倒そうな気がしますが、このjQueryプラグインを使うことで一瞬で実装できます。 関連エントリ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」 表示法が新しくセクシーなLightBox「SexyLightBox」
[JS]これ以上ないと言うくらい簡単に実装できるスライダーのスクリプト -Flow Slider
IEでも滑らかで快適に動作するスライダーを簡単に実装できるjQueryのプラグインを紹介します。 実装にかかる時間は2分くらいでしょうか。 Flow Slider [ad#ad-2] Flow Sliderの特徴 Flow Sliderのデモ Flow Sliderの実装 Flow Sliderの特徴 滑らかなアニメーションで動作します。 実装は簡単で少しのコピペでok。 ベースとなるスタイルシートは用意済み。 クロスブラウザ対応。 対応ブラウザ Firefox Safari Chrome IE Opera9 Flow Sliderのデモ デモではサイトのトップにあるベーシックなスライダーと、本棚に並べたようなスライダーがあります。 スライダーの操作はマウスホバーで、左右の端ほど素早くスライドします。 Flow Slider: Example グリーンのボタン「Buy Book」をクリック
puzzel.jp
ユーザー目線でのデザインが得意で、プロダクトの成長をより加速させるためのデザインも得意です。 toC ユーザー向けのプロダクトのデザインを注力していましたが直近は、toB ユーザー向けのプロダクトのデザインに注力しています。 他、ロゴや Web サイトデザイン/マークアップ、写真撮影、映像撮影・編集、デザインの講師など。 自己紹介 (note) About - puzzel.jp 2010年10月からスタートした、puzzel.jp。 開設時から1つまえのサイトが残っています。 デザイントレンドによって変わっていたり、ガラケー対応のサイトだったりと、時代を感じることができます。 History: 2010, 2011, 2012, 2013, 2014, 2016, 2020 Chompy, Inc. 2021 - 2023フードデリバリーサービス Chompy の UI / UX デザイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.net-king.com/2010/10/06/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AB%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%99%E3%82%8B%E3%81%A8%E3%83%A1%E3%82%A4%E3%83%B3%E7%94%BB%E5%83%8F%E3%81%8C%E5%88%87/