Webページ上のテキストや数値を表示する演出で スロットマシンの様な回転アニメーションの必要性に駆られた事がこれまでに何度かあり その度に苦労していたのですがとても簡単に同様のアニメーションを実装することができる スクリプトがあったので自分用メモとして紹介してみます。 Odometer – Transition numbers with ease Odometer – Transition numbers with ease 開始値と終了値とアニメーション時間を設定するだけで 簡単にスロットマシンのような回転アニメーションを実装できる「Odometer」 （jQueryを使わずに使用できます） デモページでは様々なテーマパターンが紹介されていて CSSを切り替えるだけで簡単に見た目を選択することが可能なようです。 数字だけでなくテキストも回転させることが可能になっているので スロットマシン
スクロールによって立体的に浮かび上がるサムネイル サムネイルに視点をフォーカスさせる仕掛けが目を引く、動画のポートフォリオサイト「MANUEL RUEDA」。ページ中央にあるサムネイルには奥行きが設定されており、スクロールによって手前に起き上がってくる動きが斬新だ。サイドナビにもスクロールに合わせたギミックが用意されており、コンテンツを何度も行き来してしまうおもしろさがある。 今回は、このサイトをヒントに、CSS3の3D表現とjQueryを使ったスクロールアニメーションを制作する。 STEP 1：スクロール値を取得する スクロール値を基にCSS3のプロパティを変化させるため、スクロール値を正しく取得することから始めよう。 スクロール値は jQueryのscrollメソッドを使って取得する。以下のようにして現在のスクロール値を取得できる。 ■ソースコード（HTML） <p id="posy"
こんにちは、サリーです。 最近は無料のスライダーでも良質のものがたくさん溢れていて、どれを使っていいか悩みすぎてしまう。。ということがよくありまして。 「これだ！」という決め手があればなあ。ということで、今回は他との違いを見せつける個性的なスライダーばかりを集めてみました。 今すぐ使いたくなるような、わくわくする動きでいっぱいです。デモページと共に紹介していきます。 【最新スライダーはこちら！】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Slit Slider Revised http://tympanus.net/codrops/2012/10/24/slit-slider-revised/ DEMO： http://tympanus.net/Tutorials/FullscreenSlitSlider/ 絵が真ん中から横にバカッと、時
ディーン元気選手はロンドン五輪以降10年ぶりの世界大会代表。世界陸上は初出場。兒玉選手は昨年の東京五輪に続き2年連続のリレーメンバーで代表入りしました。 2022.02.22
Do you have a graphic design resume that is hard to reject? You should. In this article you’ll find resources and tips to create a designer resume that kicks ass. A graphic designer resume is more complicated to create than a regular creative resume, as the first thing someone would be interested in is to have a look at your previous work. This is the reason why designers are always looking to bui
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 MobilySlider 軽量ながらも高性能なコンテンツスライダー。 jShowOff さまざまなオプションを備えたコンテンツスライ
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。
もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 １）3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
かなり人気のあるjQueryですが、そんなjQueryの私個人が選ぶ素敵なプラグインとチュートリアル10選。 とりあえず定番的なものをどうぞ。 ちなみにjQueryを自作できるレベルまで手軽になりたい人は以下記事参照。 web制作の現場で使うjQueryデザイン入門が激しくお勧めな件 タグクラウドの細分化 jquery Hover Sub Tag Cloud - Noupe サンプルデモ これかなり好き。 タグクラウドをさらに細分化させて表示させてます。 こういう発想は今までなかったので最初見たときちょっと感動しましたね。 ローディングページ How to Load In and Animate Content with jQuery | Nettuts+ サンプルデモのメニュー部分をクリックしてみてください。 右上にローディングのマークが若干出て、さらにアコーディオン風に内容が変わります
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
