スクロールによるパララックス効果を実装できるjQueryプラグイン「scrolldeck」 スクロールすると、画像やテキスト、その他色々な要素がアニメーションするWebデザインを最近良く見かけます。 パララックス(視差効果)や細かなアニメーションするものまで、様々なものがあると思いますが、 本日紹介する「scrolldeck」を使用するとパララックス効果を簡単に実装できるようになります。 パララックスがどんなものか分からない方のために先にプラグインのデモリンクを貼っておきます。 デモ1 デモ2 デモ3 スクロールで画像がずれて行く感じがたまらないですね。 使い方 プラグインを初期化します。 $(document).ready(function() { var deck = new $.scrolldeck(); }); オプション設定をする場合 $(document).ready(func

jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration

jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 題名の通りスクロールバーを変える jQueryプラグインです。全然使う 機会が無かったんですが、以前から 触ってみたいと思っていたところ、 ちょうど良さそうなプラグインを 見かけたので試してみました。 デザインそのものはcssでカラーリングしたり、画像に置換したり、と自由も利いて、クロスブラウザにも対応、3KB以下と軽量です。 こんな感じでデザインを変えられます。せっかく統一性をうまく出したのに仕様上スクロールバーが出てしまって一体感を損なう悲しみと絶望感はWebデザイナーさんなら経験したことがあるのではないでしょうか？え、無いの・・じゃあいらないかｎ Sample まぁせっかくなので見てください。 当サイトの右上のギアアイコンを使いました。このアイコンをクリックす

jQuery( function($) { $('tbody tr[data-href]').addClass('clickable').click( function() { window.location = $(this).attr('data-href'); }).find('a').hover( function() { $(this).parents('tr').unbind('click'); }, function() { $(this).parents('tr').click( function() { window.location = $(this).attr('data-href'); }); }); }); 列のどこにいてもクリック出来るようにする。tr要素には予めdata-href=”http://example.com”というマークアップをしてあります。 マー

フォームバリデーション系のプラグインは 既に数多く良質なものが揃っているので、 今更、という気もしますが、自分と相性が 良さそうだったので備忘録。軽量でシンプル で、カスタマイズもしやすかったです。 高機能ではなくていいので、こういうのが 欲しいんですよね・・ もちろん、クロスブラウザで動作してくれます。圧縮すれば2KB以下にまで落とせる軽量ライブラリです。 バリデーション用のライブラリです。軽量でクロスブラウザ対応。コードもシンプルでカスタマイズしやすい印象でした。 サンプルです。エラーメッセージは適当なので気にしないで下さい。 Sample コード <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script

どこかで使いたいなと思ってメモ。フォーム で良く使うラジオボタンやチェックボックス などのデザインを割りと簡単に見やすいデザ インに変更できるjQueryプラグインです。 この手のプラグインは沢山あるので選択肢の 一つとして、ですが、個人的には使いやすい 印象でした。 昨日に続き、今日もフォームのスクリプト。今日はフォームデザインを変更できるやつです。IE6だけちょい崩れるけどそれ以外は共通したデザインに変更できます。 ラジオボタンとかチェックボックスを画像に置換するプラグインですかね。なので、デザインの変更は基本的に画像とCSSを少し変えるだけです。尚、画像の指定もcssで行います。 左が普通で、右がリア充ですね。シンプルでいい感じです。見た目がいいほうが愛されるんですねきっと。世知辛い世の中ですこと。 マークアップも特別なことはしなくて済むのも楽かも。デザインの変更は基本的に画像を変え

Facebookページでファンとコミュニケーションを取ることによって、企業と顧客との結びつきを強めることができる。 そして、結びつきが強まることによって、その企業に対する信頼性や安心感が上がる。 そして、信頼性や安心感が上がると間接的に、あらゆるWEBマーケティング施策のコンバージョンを高めることができる。 しかし、実際にFacebookページを運用してみると、ファンの反応が思ったより少なく戸惑ってしまう。そこで、本日は、アメリカの著名なマーケター、Jeff Bullasの” 10 Powerful Tips to Increase Fan Engagement on Facebook “「Facebookページのファンの反応を大きく高めるパワフルな10の方法」をご紹介する。 また、私たちバズ部は12年で400社以上のメディア支援を行い、 立ち上げから10ヶ月で14.6億円の売上を産んだ不

こんにちは。株式会社8bitの高本です。 最近見積りを作る機会が多く、「フリーランスのための全国Webサイト制作料金表まとめ25個」というまとめ記事をたまたま見ていて、Web制作における見積もりの適正価格と算出方法というものについて考えていました。 Web制作業界はフリーランスの方も多く、価格もそれぞれかなりの差があり、何を持ってして適正価格なのかもよく分からなくなってきています。見積もりの算出方法も異なります。 価格のばらつきもさることながら、Webサイト制作は実際にものがあるわけではなく、無形の状態から完全にオリジナルで作るわけで、お金を出して依頼する方も不安はあるかと思います。 結局、費用に対して割りにあった成果物があれば、依頼者は文句ないわけですが、見積もり段階ではどんなものが出来るのか頭の中にあるだけなので、見積もりが適正なのかも判断付きません。(初めて業者に頼む場合は尚更だと思

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

Windows/Mac/Linux：Gmailの数あるバックアップ方法はライフハッカーでも以前お届けしましたが（Windowsアプリの『MailStore』など）、新たにクロスプラットフォームで使えるアプリが登場しましたのでご紹介します。多機能かつ高度なカスタマイズが可能な素晴らしいGmailバックアップ・アプリ『Gmvault』です。 Gmvaultは、Gmailアカウント全体をバックアップできるだけでなく、定期的に自動バックアップをとることも可能。クイック同期モードにすれば更新分のみダウンロードするので速いです。また、バックアップするメールの検索条件設定や日付範囲の指定、バックアップしたメールを暗号化して保存することもできます。 Gmvaultの最もユニークな特長は、ラベルなどの属性情報すべてを含む完全な形で、Gmailの受信箱を別のGmailアカウントへ復元できる機能です。「sync

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

どちらのほうが検索ユーザーの目に留まってクリックされやすいと思いますか？ 確かなデータはありませんが、パンくずリストのほうがクリックされやすそうですよね（特にWeb担のような無機質なURLの場合は）。 最近の検索エンジンは、サイト上でふつうにパンくずリストを出していれば、自動的に検索結果でパンくずリストを表示するようにしてくれるようです（「リッチスニペット」と呼ばれるもの）。しかし、Web担のように、おかしなこだわりでパンくずリストの区切り文字をふつうの「>」ではなく「«」にしていると、自動認識されずにさみしいことになります。 そこで、ページのHTMLに「microdata」という仕組みで手を加えて、グーグルに「ここがパンくずリストだよ」と教え、検索結果ページで使ってもらえるようにする方法を紹介しましょう。 ふつう、パンくずリスト部分のHTMLは次のような感じになっていると思います。 <a

新しいサイトを分析する際に私がよく利用している無料ツールを紹介いたします！これら良く使う「道具」は私にとっての大切なツールボックスです。今回はその中から15個のツールをピックアップして紹介いたします。どのツールも無料で、私自身定期的に利用しているものばかりです。「定番物」も多いですが、使い方などの関連記事もあわせて紹介していますので、一緒にチェックしてみてください。 1:GoogleAnalytics+GAwithSBM+Excellent Analytics サイト：Google Analytics 言わずと知れた無料のアクセス解析ツールです。関連書籍やオンライン上での情報も豊富で、アクセス解析という分野を広めるのに大きく貢献したツールです。アクセス解析ツールが入っていない場合は、まずはこのツールを必ず導入しています。 そしてGoogleAnalyticsをパワーアップさせるために以下の

※2012-04-07　セキュリティ面の問題に関して追記しました。 今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる（可能性を秘めた）、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。 グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。 これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。 どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。 たとえば、この状態から、 名前や住所などの標準的な項目が、一気に自動入力されます。 どうでしょう。こうした機能をサイトに設けられたら、フォームの

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。