パララックスサイトを作る時必要だったリソースと使い方のご紹介！制限時間12時間で調べあげた情報色々！ | バンクーバーのうぇぶ屋
ちょっと遅くなりましたが皆様あけましておめでとうございます！ さて、新年一発目は先日こそっとあけおめコンテンツとして公開させて頂いた『 バンクーバーな僕ら – 新年あけましておめでとう巨大4コマ』で遊びで作ったパララックスページの作り方に関するお話です。 このパララックス漫画作る事になった時、実は こんな状況だったのでとにかく完全に時間との勝負だったんですが、日々パララックスに関する情報には目を通すようにしてたおかげ？もあって、リソース関係には困らなかったのでなんとかギリギリ間に合わせる事が出来ました。 今日はそんなリソース集としてお世話になった作者の方々への感謝の気持ちと、このパララックスサイトってどうやって動いてんの？ってご質問もあったので、折角だしまずは簡単に今回パララックスページを作った手順と作り方のサンプルを全部ご紹介させて頂ければと思います！ ぶっちゃけお客さんに出す内容でも、
[CSS]背景に切り込みをいれて、パネルの四隅を留めるCSS3の美しいエフェクト -CSS3 tucked corners
デモページ 実装 Step 1: HTML パネルは4つのコーナーのエフェクトを疑似要素で作成するため、2つのdiv要素で実装します。 <div class="tucked-corners-top"> <div class="tucked-corners-bottom"> <!-- コンテンツ --> </div> </div> Step 2: CSS 「[class*='tucked-corners-']」以下が、4つのコーナーのスタイルです。 .tucked-corners-top { position: relative; width: 500px; min-height: 200px; margin: 100px auto; padding: 20px; background-color: #fff; /* Fallback */ background: linear-gradie
BigVideo.js
デモページ デモは左のメニューから、動画を変更して再生できます。 BigVideo.jsの使い方 外部ファイル BigVideo.jsはjQuery, jQuery UIと、動画再生に「video.js」を利用しています。これら全てを外部ファイルとして記述します。 <!-- BigVideo Dependencies --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/jquery-ui-1.8.22.custom.min.js"></script> <script src="js/jquery.imagesloaded.min.js"></script> <script src="http://vjs.zencdn.net/c/vide
ページ遷移不要の、シンプルなWebサイトを作るための軽量jQueryプラグイン・Pagify - かちびと.net
よく見かける、ページ遷移のない Webサイトを作る為のjQueryプラ グイン。ですが、高機能な物では なく、極めてシンプルで、ライブ ラリも軽量です。サクッと作りた い時のテンプレにもいいかも。 僕の語彙の無い説明よりサンプル見た方が早そうですね。 ※漢字も間違ってたので修正しました ページ遷移不要で、内容を書き換えた際もフラグメントURLにしてくれます。以下サンプル。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7'></script> <script src="pagify.js" type="text/javascript"></script> jQuery本体とプラグインを読み込みます。 $(
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
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」 ページ内スクロールならコレにおま
[JS]シンプルからかっこいいエフェクト付きまで、ページネーションなら何でも任せろのスクリプト -jPages
Table テーブルのコンテンツをページネーションにすることもできます。 jPagesの使い方 外部ファイル スタイルシートとスクリプトを外部ファイルとして記述します。 <link rel="stylesheet" href="css/jPages.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/jPages.js"></script> アニメーションのエフェクトを使用する場合は、「animate.css」も記述します。 <link rel="stylesheet" href="css/animate.css"> HTML デフォルトのHTMLの例です。 ページネーション用のdiv要素と各アイテムをリスト要素で実装します。 ※各ア
[CSS]画像にちょっと素敵なエフェクトを与えるスタイルシートのまとめ
デモページ [ad#ad-2] HTML img要素とメッセージのp要素をdiv要素に内包します。 <div class="polaroid"> <p>Sarah, Dec '02</p> <img src="http://lorempixum.com/200/200/people/1" /> </div> デモで使用しているメッセージの手描き風のフォントは「Kaushan」です。フォントを利用する場合はhead内に下記を記述します。 <link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> CSS ポラロイド風のスタイルを適用するために、3つのセレクタを使用します。 .polaroid { position: relative; width: 2
Facebookのデザインにも負けない超カッコいいタイムラインを作るJSライブラリ「Timeline」:phpspot開発日誌
Facebookのデザインにも負けない超カッコいいタイムラインを作るJSライブラリ「Timeline」 2012年04月02日- Timeline Facebookのデザインにも負けない超カッコいいタイムラインを作るJSライブラリ「Timeline」。 一見スライドショーのようでもありますが、タイムライン付きのスライドショーになっています。何かの歴史を語る時には是非使いたいと思ってしまう程のクオリティです。 スライドショー内にはHTMLならなんでも埋め込めるということでYoutubeやGoogleマップがいい感じにレイアウトされて表示されています。 スライドショーと連動してタイムラインもアニメーションします。タイムライン側をクリックしてスライドショーの位置を選択することも可能。 スライドショー部分はドラッグ＆ドロップで移動することができます タイムライン部分の拡大。う〜ん素晴らしい！ この
Rails3 と jQuery で真面目にオシャレなエロサイトをつくってみました
いつぞやの飲み会で、 これだけウェブの技術が進化しているのだから、もっとオシャレなエロサイトがあってもいいんでないかい？ << という話になりまして。 だけどどうせ作るんならということで、Rails3 と jQuery を使って結構マジメにつくってみました。 （※大人の事情により、リンクはやむなく削除しました） 当初はエロにオシャレは必要ないのかなーと思ったときもありましたが、いざつくってみると、やっぱり選べるならオシャレなやつの方ががいいよね、という結論に落ち着きました。 今回つくったのは試験的なものなので 90日間限定でしか公開しないつもりですが、日本のエロサイトが今後もっとオシャレに発展していくきっかけになってくれたら嬉しいです。 以下、サイトのコンセプトや使っている技術についてまとめてみます。 **Rails3 と jQuery で真面目にオシャレなエロサイトをつくってみました 1
[JS]画像をホバー時にさまざまなアニメーションで目立たせるスクリプト -Adipoli
シンプルなものからちょっと面白いものまで、20種類以上のアニメーションのエフェクトを備えた画像を目立たせるjQueryのプラグインを紹介します。 デモ 用意されているエフェクトは20種類以上で、ホバー時のエフェクトは下記のものが揃っています。 normal popout sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpRandom sliceUpDown sliceUpDownLeft fold foldLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse 画像のデフォルト時のエフェクト（オーバーレイ・半透明）も用意されており、組み合わせて利用できます。 [ad#ad-2] 以下、デモページのエフェクトを紹介します。
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
CSSでカーニング（文字詰め）等を可能にするJSライブラリ・kerning.js
3連休も今日で最後ですねー。今日は ゆっくり過ごす方も多そうですね。 さて、休みですし、ちょっとネタ的 なライブラリをご紹介。カーニング をCSSで出来るようにしたJSライブラ リです。 jQueryやmootoolsなどにも依存していないようです。これだけ聞くとかなり使えそうなんですけど。でも個人的にこういうチャレンジは称えたいので敬意を示すつもりで記事にします。 CSSで出来る、と言っても独自の記述法を加える事でテキストコンテンツでのカーニングを実現するタイプなので好みが分かれそうですね。 まだちょっとよく分かってないんですけど適当にデモ作ってみました。一応違いが分かるように少し大袈裟にしたつもりです。クオリティは無視です。 ※右上でjsのオン/オフが出来ます。Chrome推奨 Sample css#example01 {/*文字詰め*/ -letter-kern: 1px 1px 0
[JS]jQueryのプラグイン100選 -2011年総集編
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説
jQuery Mobileのデザインを簡単に作れる、jQuery Mobile公式サイトで提供している「ThemeRoller」を紹介します。 ThemeRoller こんな風にjQuery Mobileのデザインが簡単に出来上がります。リンクをクリックすれば同じデザインが表示された状態で「ThemeRoller」が起動します（2012/01/11頃まで）。 このエントリーで紹介する情報は2011年12月のものです。 １．ThemeRollerへのアクセス方法と全体レイアウト jQuery Mobileのトップページにある「Themes」をクリック。 ウェルカムメッセージが表示されるので、「Get Rolling」をクリック。 冒頭の編集画面が現れます。左ペインにテーマの各種設定項目、右ペインにプレビュー画面が表示されます。プレビュー画面は複数表示させることができるので出来栄えを見比べるこ
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
文字を映画ばりにカッコよくアニメーションさせるjQueryプラグイン「jWise.js」:phpspot開発日誌
HavaLite 文字を映画ばりにカッコよくアニメーションさせるjQueryプラグイン「jWise.js」 アニメーション系は説明が難しいので以下のデモページを見ていただくのが一番速いです。 デモページ 数種類のアニメーションがあり、切り替えタイミングやフェードの状態なんかはオプション指定できます。 あとは $(element).jwise(options); で動きます プロモーションサイトなんかで使えそうですね。 スマホ全盛となり、AdobeがモバイルFlashの開発をやめたことで、HTML5やこうしたJavaScriptを使ったものが重要度を増していきそうです。 関連エントリ バックグラウンドを奇妙にアニメーションさせるjQueryプラグイン テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」 画面上で誰かがタイピングしているようにア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
[CSS]CSS3を使うとこんなこともできる！紙を折ったり反らしたするかっこいいエフェクト
javascriptで作った、フルフラッシュのようなサイト教えてください。
