jQueryでページの最上部に位置固定したフルスクリーンスライドショー（クロスフェード）を設置する方法｜BLACKFLAG
最近のWebサイトでは写真をフルスクリーンでダイナミックに見せる技法や演出が多く見られます。 背景画像のフルスクリーン表示やフルスクリーンのスライドショーなど様々ありますが、jQueryを使って、ページ最上部（ページヘッダー）にフルスクリーンでのスライドショーを設置し、スクロールすると下から通常のコンテンツが表示される、というページ構成を実装するスクリプトを作ってみたので紹介してみます。 少々言葉では説明しずらいのでまず動作サンプルから。 「jQueryでページ上部にフルスクリーンスライドショーを設置する方法」サンプルを別枠で表示 ページの最上部にフルスクリーンサイズにて画像がクロスフェードで切り替わるスライドショーを設置し、ページをスクロールさせるとページ上部にフルスクリーンスライドショーが固定されたまま下からコンテンツ要素が出現します。 スライドショー全体はブラウザサイズを変化させても
スクリプト無し、動画をページの背景いっぱいに表示する方法
jQueryなどスクリプトは一切使わずに、HTML5+CSSで動画をウェブページの背景いっぱいに表示する方法を紹介します。 フルサイズのデモ IE8などHTML5のvideo要素に対応していないブラウザでは、代替の背景画像が表示されます。 実装は、非常にシンプルです。 HTML 動画はbody内の一番下にvideo要素で配置し、その上には通常通りコンテンツを配置できます。 <body> ... コンテンツ ... <!-- 背景に設置する動画 --> <video autoplay loop poster="http://mattgrossdesign.com/raw-media/first-frame-screencap" id="video-background" muted> <source src="http://mattgrossdesign.com/raw-media/wood
[CSS]アニメーションも気持ちいい！フォーカスがはずれてもキープされるパネルを表示するスタイルシート
ボタンをタップ・クリックすると、素敵なアニメーションでソーシャルメディアのボタンを配置したパネルが表示され、フォーカスがはずれてもそのままパネルがキープされるスタイルシートのデモを紹介します。 デモページ HTML HTMLはシンプルで、リストで各ソーシャルメディアのボタン、チェックボックスでパネルの開閉をコントロールします。 <div id="content"> <input type="checkbox" class="checkbox" id="share" checked> <label for="share" class="label entypo-export"></label> <div class="social"> <ul> <li class="entypo-twitter"></li> <li class="entypo-facebook"></li> <li cla
Tumblrのテーマをカスタマイズして簡単にブログを作る方法 | トラベルハック｜あなたの冒険を加速する
Tumblr大好きkikuma(@circustic)です。旅行などをすると写真や記録などをブログとして残したくなりますよね？ 今回はTumblrを使った簡単なブログの作り方をご紹介致します。 もし宜しければトラベルハックTumblrアカウントもぜひフォローして下さい！ 1.Tumblrでブログを作るメリット 広告がないのに無料で使える 容量は無制限（正確には一日ポスト出来る上限がある） 独自ドメインを割り当てる事が出来る 投稿が簡単（スマホやメールからの投稿にも対応している) 無料デザインテーマが豊富（カスタマイズをする事も出来る） TwitterやFacebookとの連携にも対応している 関連ツールが豊富 １からデザインをするというのは難しいので既存の「テーマ」と呼ばれるモノをカスタマイズして簡単なブログを作る方法をご紹介致します。 2. Tumblrの無料テーマ「Effector」を
おちゃのこネット
多彩なテンプレートでお洒落なショップをすぐオープン HP作成の知識やデザインができなくても、すぐにネットショップを作成、オープンすることができます。
Facebookのウォールでちょっとアピールする方法（OGP） - EC studio デザインブログ
サイトに設置した「いいね！」を押したとき、 タイトルとテキストだけではちょっと物足りない感じがしませんか？ OGP（Open Graph protocol）の対応をおこなうだけで、 ウォールが少し華やかになります。 弊社サービスサイト「チャットワーク」で対応した時におこなった対応方法を紹介したいと思います。 弊社サービスサイトのOGP対応後 OGPを使うとどうなるの？ OGP（Open Graph protocol）を使うと、 「いいね！」を押してウォールに投稿するときに、 タイトルや概要、表示する画像を指定することができます。 通常はFacebookが自動で表示してくれます。 OGPに対応する前のデフォルトはこのように表示されていました。 OGP対応方法 htmlタグの記述 まず、htmlタグにOGP用の記述を追記します。 「xmlns:og="http://ogp.me/ns#" xm
ALOYE
グラフィックデザインの視点から作り上げる、ポップで実験的な新しいアパレルブランド“ALOYE”のウェブサイトです。 ALOYE（アロイ）はグラフィックデザインの視点から作り上げる、ポップで実験的な新しいアパレルブランドです。2011年春、東京でスタートしました。 メンバーはインタラクティブメディア、ウェブ、印刷、映像に従事しているデザイナー達が中心で、それぞれの分野で培った経験を活かしてALOYEのカットソーはデザインされています。
Inset Border Effect
Inset Border Effect jQuery Plugin by Robin Thrift This plugin puts a border around the targeted elements (typically images), but unlike normal CSS borders it covers up part of the image. When the element is hovered over, the border animates to the sides, revealing the whole image. DOWNLOAD v1.0 Usage Simple: $("img").insetBorder(); All options: $("img").insetBorder({ speed : 1000, // 1000 = 1 seco
俳優・玉木宏がカメラマンに！！TASAKIによる写真展開催：AneCanニュース | AneCan.TV
AneCan.TVは、2017年10月31日をもってクローズいたしました。 10年間、ありがとうございました！
お問い合わせフォームのAjaxサービス「VisitorContact」｜ウェブユーザビリティ向上を支援するWebsite Usability Info
お問い合わせフォームをAjaxのポップアップで表示できる面白いサービスがありますので、ご紹介したいと思います。「VisitorContact」というサービスです。 VisitorContactの実装は簡単です。VisitorContactのサイトにサインアップして必要な情報を入力すると、埋め込み用のJavaScriptコードが生成されるので、それをご自身のWebページにコピー&ペーストするだけです。これらの手続きは基本的に無料です。 このVisitorContact、ユーザビリティの観点で細かく見るといくつか問題があるため、もろ手を挙げておすすめ！というわけではありませんが、ユーザー行動の動線を少しでも短くし、ユーザーが目的を達成しやすくする試みとして、Ajaxの利点をうまく活用していると思います。 VisitorContactのフォームは、「contact」と書かれたリンクバッジをクリッ
他のサイトのRSSを取得してページ上で更新情報を表示するPHPスクリプト（UTF-8版） [絵文録ことのは]2005/05/30
kotono8.comホームページならびにアンテナ一覧表示において使用中の改造スクリプトを公開します。他のサイトのRSSを取得してきて、それをページ上で表示します。「レッツPHP!」のネットツールで公開されている「RSSブロガー」のUTF-8改造版。 ■RSSブロガー UTF-8改 ■以下「レッツPHP!」からほとんどパクった概要 特定サイトのRSSを表示します。ブログの右ブロックとかに置くとか。シンプル。件数指定可能。 ■サンプル*1 ■ダウンロード rssv.php (zip圧縮)（本文概要なしバージョン）またはrssv2.php (zip圧縮)（本文概要ありバージョン）のいずれか RSS.php (zip圧縮) 解凍して同じフォルダ内にアップロードしてください。 ■設置方法 サイト内で以下を埋め込んでください。srcのところはちゃんと自分の置いたphpファイルにリンクするように。また
あなたのサイトにショッピングカードを埋め込むための『Fat Free Cart』 | 100SHIKI
あなたのサイトにショッピングカードを埋め込むための『Fat Free Cart』 May 2nd, 2008 Posted in 便利ツール（ウェブ） Write comment Google Checkoutってはやく普及しないすかね・・・それはいいとして、もっとネットで手軽に商取引が発生すれば景気もよくなるはずだ（いろいろ問題はあるが・・・）。 そう考えるとFat Free Cartのようなサービスはうれしいですな。 このサイトではショッピングサイトをあなたのサイトに埋め込むためのコードを生成してくれる。ちょっと設定が面倒ではあるが、このコードを貼り付けるだけでPaypalとGoogle Checkoutに対応したカートが出来上がる、というわけだ。 ちゃんと数量の変更やカートの確認機能もある。それほど大規模ではないが、ちょこっとだけグッズを売りたい、という人なんかに良いのではなかろうか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://iamapioneer.com/plugins/skippr/
Demo for jQuery and CSS3 Thumbnails Navigation Gallery
Page Not Found | MUJI 無印良品
IDEA * IDEA
http://watashi-frau.com/contents/viewer/index.html
http://webuomo.com/
https://www.h-fj.com/mt/mt-search.cgi?blog_id=1&limit=10&tag=%E3%83%A1%E3%83%BC%E3%83%AB%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0&srcip=127.0.0.1
ハカセ【HAKASE】