今すぐ使いたくなる！個性的でわくわくする動きのスライダー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/ 絵が真ん中から横にバカッと、時
緩急をともなったイージングのアニメーションをCSSやJSで実装する時のスニペットのまとめ -Easing Functions
にょい～ん、ぐい～んなどの緩急をともなったアニメーションを実装するCSSやJavaScriptのスニペットをまとめたEasing Functionsを紹介します。 Easing Functions Cheat Sheet Easing Functions -GitHub イージングのアニメーションの動きを確認 イージングのアニメーションの種類 イージングのアニメーションの実装 イージングのアニメーションの動きを確認 イージングとは動きに加速や減速を加え等速で動くのとは違ったエフェクトを与えるもので、最初ゆっくりでだんだん早くしたり、床にバウンドするような動きを与えます。 登録されているイージングのアニメーションの動きは、それぞれのグラフをホバーするとレッドのアローがその動きをします。
[CSS]画像にかっこいいアニメーションでオーバーレイのメッセージを表示するスタイルシート
CSSで作成したイメージスライダーに、ホバー時にメッセージを半透明のパネルに表示するチュートリアルを紹介します。 デモページ イメージスライダー自体もキーフレームを使ったCSSアニメーションで実装されています。 [ad#ad-2] 実装 実装のポイントだけピックアップ。 HTML メッセージの見出しとパラグラフをdiv要素で内包し、さらにa要素で内包したものを1コンテンツとして、スライダーを実装します。 画像はそれぞれの背景として配置します。 <div class="slider"> <a href="#"> <div class="panel"> <h2>One</h2> <p>Lorem ipsum dolor sit amet...</p> </div> </a> ... </div> CSS まずは、スライダー自体のスタイルです。 画像をbackgroundで表示します。 .sli
jQueryとCSS3を使ったPath風の円形メニューサンプル:phpspot開発日誌
Pie Menu (like Path Menu) using jquery and CSS3 by Nikesh Hayaran jQueryとCSS3を使ったPath風の円形メニューサンプル クリックするとアイテムが回転して良い感じに配置されるPathですが、それをjQueryとCSS3で実現できるスクリプトがGithubにて公開されています。 ウェブ上でカスタマイズをすることも可能。 スマートフォン等で使うとオッ、という感じでインパクトを与えられそうですね。 関連エントリ ページの目次ナビゲーションを自動で作ってくれるjQueryプラグイン「AutoAnchors」 面白いフローティングナビゲーションを実装できる「jQuery Floater」 今までなかったスマートなページ内ナビゲーションを実装するjQueryプラグイン「Flexible Nav」 ページ内スクロールならコレにおま
タッチパネル等に使えそうなインタラクティブなメニュー実装のCSS3＆jQueryチュートリアル:phpspot開発日誌
Interactive menu with CSS3 & jQuery タッチパネル等に使えそうなインタラクティブなメニュー実装のCSS3＆jQueryチュートリアル。 パネルのアイテムをクリックするとアニメーションしながら内容をオープンさせるようなメニューを作ることができるチュートリアルです。 小さいポイントをクリックするよりも、タブレット等ではこうしたインタフェースのほうが圧倒的に使いやすそうです iPadなどのタブレットで便利に使えそうですね 利用者の端末によって、数年後はウェブのインタフェースの常識なんかも変わってくるのかも 関連エントリ よくデザインされたナビゲーションメニューバーのPSD素材３９ メニューを固定したWEBデザインのサンプル２１ デザインも動きもオシャレなjQuery＆CSS3メニューデモ
可愛いツールチップを実装したjQuery＆CSS3のデモ「Sweet Tooltip」:phpspot開発日誌
Sweet Tooltip a jQuery & CSS3 Tooltips ? Webstuffshare ? Learn and share. The simplest harmony. 可愛いツールチップを実装したjQuery＆CSS3のデモ「Sweet Tooltip」 次のような可愛いモダンなデザインのツールチップの実装デモが公開されています。 目立たせたい時や注目してもらいたい場合に使うと効果的ですね。通常のデザインも入っているようなので使い分けられそうです ファイルをDLすればデモのHTMLとCSS, JSが入っているので変更して容易に利用できます 関連エントリ もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 簡単コードで実装＆カスタマイズできるツールチップ実装jQueryプラグイン「Poshy Tip」 シンプルなツールチップ実装ができるj
ウェブ制作者の困ったを解決するコードが盛りだくさん、スニペットを共有するサービス -Code Pad
Public Snippets コードは、現在7つのカテゴリに分けられています。 CSS Apache PHP JavaScript jQuery HTML XML Others [ad#ad-2] 例えばCSSだと、clearFix、角にリボンを配置、画像のフリップ、フッタの固定表示など、たくさんの便利なスニペットが登録されています。 CSS: Clearfix CSS: Pure CSS Corner Ribbon CSS: Flip an Image CSS: Sticky Footer スニペットのページでは、シンタックスハイライト、テキスト表示に対応しており、テキスト形式でダウンロードできます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
