parallax.jsをいじってパララックスのデモ作ってみた。
2012年2月17日 カテゴリ： Web制作 parallax.jsをいじってパララックスのデモ作ってみた。 Tweetちょっと前に視差効果のあるパララックスサイトまとめなどがよくホットエントリーに上がってきて、「自分もこんなの作ってみたいなー」と思っていたのでトライしてみました。 チュートリアルは下記サイトを参考にしています。 話題になったNikebetterworldに良く似たサイトを作って解説をしてくれています。 Nikebetterworld Parallax Effect Demo そして出来あがったのはこちらのデモサイトです。 以下、メモがわりの解説です。 まず、チュートリアルのサイトからサンプルファイルをダウンロードしてHTMLをみると次のようなjsファイルが読み込まれているのがわかります。 <script type="text/javascript" src="https:
プログラミングが出来なくても簡単！ARコンテンツの作り方【実践編】
Tweet前回はARブラウザjunaio、そしてコンテンツ作成のソフトウェアmetaio Creatorのダウンロードと基本的な使い方を説明しました。 プログラミングが出来なくても簡単！ARコンテンツの作り方【導入編】 よりリッチなコンテンツをARで表示する いよいよ3DモデルをAR上で表現する方法を説明したいと思います。 今回の内容も九州先端科学技術研究所の@Taka_Yoshinagaさんの勉強会で教えてもらったものになります。多謝々々！ metaio Creatorを使えばプログラミングを一行も書くことなく、簡単に3Dモデルを扱うことができます。 それでは早速作ってみましょう。 3DモデルをARで表現する。 マーカーは前回も使った下のものを使用して説明します。 マーカーの登録のしかたは前回の記事を参考にしてください。 表示させる3Dモデルはmetaio Creatorに用意されている
プログラミングが出来なくても簡単！ARコンテンツの作り方【導入編】
Tweet九州先端科学技術研究所（通称ISIT）にお勤めしている@Taka_Yoshinagaさんとご縁があって、ARコンテンツの作り方についてあれこれ教えてもらいました。 「え！こんな簡単にARってつくれちゃうわけ！？」と驚くことが多かったので誰かに伝えたくなりました。 何回かにわけて公開しますが今回はタイトル通り、プログラミングの知識がなくてもAR技術を使ったコンテンツが簡単に作れますよという内容です。 しかも使用するツールは全て無料。こんなノウハウを惜しみなく教えてくれるなんて、ありがとう@Taka_Yoshinagaさん、すごいよISIT、さすが先端科学研究所というだけあります！ さて、さっそく本題に入ります。 ARブラウザのインストール インターネットを見るときはIEやChromeなどのブラウザを通してコンテンツを閲覧します。 ARコンテンツを見る場合にはARブラウザが必要なので
Sublime Text 2とEmmetで制作効率アップ！@福岡マークアップ勉強会
Tweet半年くらい前からSublime Text 2を使い始め、使い心地がよくてすっかりメインエディタになってしまいました。 というわけでSublime Text 2やプラグインのEmmetを使ってコーディングのスピードアップを図ろう！というテーマでまとめてみます。 ちなみにこの内容は福岡マークアップ勉強会でライブコーディングを交えてお話しさせて頂きました。 Sublime Text 2って何がいいの？ 僕は以下のようなポイントが気にっています。 起動が軽い。 前までDreamweaverやNetbeansでコーディングをしてたのですが立ち上がりの速さがだいぶ変わりました。 プロジェクトの管理が簡単 サイドバーにフォルダをドラッグ＆ドロップするだけ。 拡張性が高い プラグインのインストール、アンインストールも簡単です。 まずはインストール！ こちらのサイトからSublime Text 2
WebデザイナーもおさえておきたいSEOチェックリスト52項目
TweetWeb design tuts+に公開されていたSEOのチェックリストがとてもわかりやすかったので紹介します。 A Web Designer’s SEO Checklist (Including Portable Formats) ひとことにSEOと言っても、キーワード対策だけしていればよかった頃とは違い、今ではかなり広い要素について考えなければいけません。 瑣末なテクニックに捕らわれて本質的な部分を見失いがちなSEOですが、以下のチェックリストはその全体像を確認するのに役立つと思います。 チェックリストはHTMLやEvernote、PDFなどにまとめてこちらからダウンロードできるようになっているようです。（内容は英語です。） 元記事には各項目の補足となる記事へのリンクも張られていたりするのですが、それはまた時間があるときに翻訳していきたいと思います。 —————————————
画像がフェードイン、フェードアウトごとに配置を変えてローテーションするjQuery
Tweet画像イメージが大きさや配置を変えながらローテーションしていくjQueryのスクリプトを書いてみた。 説明がわかりづらいと思うのでデモサイトをご覧ください。 Image Rotation Demo HTMLは下記のように。 わざわざ画像にfirst、second、thirdと順番にクラスをふってる。 小さく表示させる画像にはmini-photoのクラスが。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Image Rotation Demo</title> <link rel="stylesheet" href="style.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jque
ボタンを押すと特定のクラスを持った要素だけ選んでソートしてくれるjQuery
Tweet備忘録的にメモ。 商品を並べたときにボタンひとつで特定のジャンルだけ選んで表示したり、お手軽にソートできないかなと思うときがある。今回はそんなときのためのシンプルなjQueryを書いた。 コンテンツ一覧から特定のカテゴリだけ選ぶ、なんてときにも役に立つかも。 今回は、idがKeyYellowのボタンをクリックしたら、yellowというclassが振ってある要素だけが表示されるというものにした。 デモサイトも作ったので参考にしてください。 Class Sorting Demo htmlは下記の通り。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Class Sorting Demo</title> <link rel="stylesheet" href="style.css"> <scri
jQuery MasonryをWordPressで使ったときのメモ
Tweet要素を隙間なく埋める、いわゆるPinterest風のレイアウトを作ることができるjQueryプラグインMasonryを使ってWordPressでサイトを作ったので手順などをメモして置きます。 jQueryファイルのダウンロード 設置自体は難しくなく下記のサイトからjquery.masonry.min.jsをダウンロードしてサイトフォルダに置きます。 jQuery Masonry まずはデモを見やすくするためにWordPressではなくて普通のサイトで使う方法を説明します。 サンプルコード HTMLは例として下記のようなものを用意します。 <div id="container"> <div class="post">コンテンツ</div> <div class="post">コンテンツ</div> <div class="post">コンテンツ</div> <div class="
きっと役立つWordPressプラグイン44個まとめ
TweetWeb designer depotでWordPressのプラグインをまとめた記事「40+ essential WordPress plugins」を見つけたので、紹介します。 Jetpack WordPressを使ったブログサービス、WordPress.comのユーザーにのみ使用可能であった機能を使えるようになるプラグイン。 アクセス解析のWordPress.com statsをはじめ、ソーシャルサービス連携ツール、スペルチェックと文章校正、ソーシャル連携コメント機能、イメージギャラリー、モバイルテーマ、スクロール時の自動ページ読み込み、などなど盛りだくさん。 これを入れとけば一気にWordPressの機能アップを図れるお得パック的なプラグイン。 Jetpack Lite Jetpackの非公式ライト版。 WordPress.com statsとショートリンクサービスだけに機能
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
