そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け(※自分含む)のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス(parallax)を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript(jQuery)でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」! HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します! まずは王道!縦に長い高級ペライチ
MovableType 小技集 【更新】ソーシャルメディアに共有するボタンの設置方法(Twitter, facebook, mixi, GREE, Evernote, Google+, Tumblr, Pinterest, はてブ) ソーシャルメディアの各サービスがこぞって「いいね!」などの共有ボタンをリリースしています。ブログやニュースメディアでも頻繁に目にする昨今ですが、色々なソーシャルボタンの設置方法をまとめて紹介したいと思います。 目次(兼ショートカット) Twitter「Twitterボタン」 Facebook「Share」「Like(いいね!)」 mixi「mixiチェック」 GREE「Social Feedback(いいね!)」 Evernote「Site Memory(Clip)」 Google+「+1」 Tumblr「Share on Tumblr」 Pinterest「
動画を背景にするとこんなにカッコいい、というデモと実装jQueryプラグイン 2012年12月10日- Make an HTML5 video a background - body bg demo 動画を背景にするとこんなにカッコいい、というデモと実装jQueryプラグイン。 Youtubeの動画を背景にするjQueryプラグインがあったりしますが、今回は自前の動画を背景に使ったサイトが簡単に作れます。 動画フォーマットも各種指定することで色々な端末に対応することができそう 実装コード。各種動画ファイルをフォーマットベースにオプション指定 若干重いですが、将来的にはこういったサイトも当たり前のように登場していることでしょう。 関連エントリ フリーのオープンソースなHTML5動画プレイヤーいろいろ
この記事は、特定のフォントを愛する人が、そのフォントの一体どこがいいのか、どうしてそのフォントでなくてはダメなのかを語る #LOVEFONT Advent Calendar 2012 の10日目の記事です。 AquaKanaとは AquaKana(Aqua かな、アクアかな などと表記されることもあります)は、OS X(Mac の OS)のメニューやタイトルバーなどの UI に使われているフォントの名前です。 隠しフォントになっているため、通常アプリケーションのフォント一覧には出てきません。ですので、Mac ユーザーでもこのフォントの存在を知らない方もいらっしゃると思います。 Mac のコンテンツ部分に標準で使われている「ヒラギノ角ゴ Pro」と、UI で使われている「AquaKana」で「ファイル ウインドウ ヘルプ」などを比較するとこんな感じです。 AquaKana は一見ゴシック体の
iPhoneやiPadのホーム画面に作れるフォルダっぽい動作のコンテンツを実装出来る、というスクリプト。動作はかなり再現出来てる気がします。 iOSのホーム画面に作られるフォルダっぽいのを作る、というjQueryプラグインです。 ※ドラッグで動かせる、というのは残念ながら付いてないです。 フォルダをクリックすると開く的なやつです。 ↑ 開いた箇所はハイライトされる コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script> <script src="jquery.app-folders.js"></script>本体とライブラリw読み込む $('.foo').appFolders({ opacity: .2, // セレクト
ローソン、スタバに続きセブンイレブンも 街中で利用できる無料Wi-Fiスポット、増えてきましたね。少し前まで公共Wi-Fiといえばキャリア限定や有料ばかりでしたが... いやはや、ありがたい時代でございます。 そんな無料Wi-Fiに新しい仲間・セブンスポットが加わりました。名前から想像できるようにセブン-イレブンの他、セブン&アイグループ(イトーヨーカドー、西武そごう、デニーズ等)で利用できますよ。 7SPOTの主な特徴 ・メール登録が必須 ・ブラウザで認証 ・利用に制限アリ(2回×60分接続可能) ローソンと異なり会員登録は不要。アプリも利用しませんので、いつでもサービスインできる手軽さはナイスです。そこはスタバのサービスに近いですが、接続に制限がある点には要注意です。 それではさっそく接続してみましょう! まずは公式サイトから、7SPOT会員登録を済ませましょう。(後でもOK) 公式サ
何だか熱い想いがこもったサービスなのでご紹介。 Steady ステディ|趣味興味でつながるスマートフォンアプリ 「出会い系」のイメージを変える Steadyはフェイスブック&スマホベースの出会い系サービス。これまでのサイトとのちがいに関しては、 ・登録にはFacebookアカウントが必須 ・Facebookアカウントを持っていたとしても偽アカウントなどは目視で排除します ・入会時には厳正な審査があります ・顔写真が確認できない場合は入会ができません ・サクラは一人もいません ・ユーザーからの迷惑通報から事実が確認できた場合強制的に退会となります ・24時間監視を行なっています ・運営者の顔写真も公開します IT肉弾戦: 退職意向から1年:Steady(ステディ)での新たな挑戦 なんてところが特徴になっています。目視排除、顔写真必須、厳格な審査というのはいいですね。「サクラは一人もいません」
毎月、請求書の作成に追われていませんか? フリーランスとして働く私も、わずらわしい請求書は後回しにしてしまいがちで、いつも月末になって慌てて作業をしています。エクセルでひな型は作っていても、金額を入力し、印刷して押印・郵送までするのはかなり手間がかかりますよね。 本来ならお金に関わる大切なことなので、間違いのないように行うべき作業なはず。何とか早く正確にできないかと考えていた私に一筋の光を与えてくれたのが、「MakeLeaps」というオンライン請求書・見積書作成サービスでした。 今回はMakeLeapsを実際に使用してみて、良かった点、気になった点などを紹介します。■シンプルな管理画面で登録もラクラク MakeLeapsを使用するためには、まずトップページにアクセスし、基本情報の登録(無料)が必要です。請求書の自社欄に表示される個人情報の登録と、会社のロゴや社印、個人印の画像をアップロード
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く