jarallax.jsの使い方解説
こんにちは、デザイナーのサリーです。 JSを書けない私が、いろいろとパララックスのJSを漁ってみて、一番書き方がシンプルでわかりやすそうだったのが「jarallax.js」でした。 使ってみたら簡単でいい感じでしたが、ところどころクセがあって悩んだ箇所があったので、覚え書きの意味も兼ねて、今回はjarallax.jsの使い方を解説します。 （注：スマホやタブレットでは上手く動きませんので、PCでご覧ください。詳しくはこちら「パララックスサイトをつくるときにディレクターが気をつけるべき4つのこと」をどうぞ。） jarallax.jsとは？ パララックスの動きが実装できるJSです。その名の通りjQueryを使用します。 公式ページはこちら： http://www.jarallax.com/ HTML <!DOCTYPE html> <html lang="ja" dir="ltr"> <hea
パララックスサイトを作る時必要だったリソースと使い方のご紹介！制限時間12時間で調べあげた情報色々！ | バンクーバーのうぇぶ屋
ちょっと遅くなりましたが皆様あけましておめでとうございます！ さて、新年一発目は先日こそっとあけおめコンテンツとして公開させて頂いた『 バンクーバーな僕ら – 新年あけましておめでとう巨大4コマ』で遊びで作ったパララックスページの作り方に関するお話です。 このパララックス漫画作る事になった時、実は こんな状況だったのでとにかく完全に時間との勝負だったんですが、日々パララックスに関する情報には目を通すようにしてたおかげ？もあって、リソース関係には困らなかったのでなんとかギリギリ間に合わせる事が出来ました。 今日はそんなリソース集としてお世話になった作者の方々への感謝の気持ちと、このパララックスサイトってどうやって動いてんの？ってご質問もあったので、折角だしまずは簡単に今回パララックスページを作った手順と作り方のサンプルを全部ご紹介させて頂ければと思います！ ぶっちゃけお客さんに出す内容でも、
[CSS]アイデアにセンスを感じる、アニメーションがかわいいナビゲーションを実装するチュートリアル
ナビゲーションの各アイテムをホバーすると、光源が移動するラーヴァランプ風エフェクトをスクリプトは使用せずに、スタイルシートで実装するチュートリアルを紹介します。 矢がハートを射貫くのかわいいですね。 デモページ 実装 実装は共通パートと3つのデモで異なるパートに分けて紹介します。 Step 1: 共通 HTML HTMLは3つとも基本的には同じです。 classの「nav」は共通で、「ph-line-nav」を変更して利用します。 <div class="nav ph-line-nav"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Gallery</a> <a href="#">Contact</a> <div class="effect"></div> </div> Step 2: 共通 CSS 3つのデモの共通のスタイ
Photoshop フェルト加工: dr
タワレコでフェルトっぽいポスターがあったので、こういうのって作れるのかなと思ったのが始まり。 こんなの作れるかしら。 とりあえず、フェルトの質感をつくろう。まず、グレー50％で塗りつぶして準備。 そのあとフィルタメニューから「スマートフィルタ用に変換」 スマートフィルタ用に変換しておくと、フィルタを再編集したり、非表示にしたり、自由度が高くなる。 フィルタメニュー／ノイズ／ノイズを加える グレースケールノイズにチェックを入れて適用。 フィルタメニュー／ぼかし／ぼかし（移動） このレイヤーを複製。マスクを。 マスクを選択してブラシでマスクを作ってゆく。マスクをつくることで、下のレイヤーの部分が見えてくるので、ぼかしフィルタの方向を変えてみたり調整。もう少しぼやっとしたかったので両方にぼかし（ガウス）を追加。 だいたいこんな感じに。 べた塗りレイヤーを作成、描写モードをハードライトへ。 ピンク
[CSS]タブコンテンツにCSS3アニメーションを少しだけ加えてかっこよくするチュートリアル
JavaScriptを使用しないで、スタイルシートでタブコンテンツを実装するポイントから、コンテンツの切り替えやタブのフォーカス時にちょっとしたCSS3アニメーションを加えるチュートリアルを紹介します。 Demo 4: 垂直型タブ 実装 HTML タブの各コンテンツはdiv要素で、タブはinput要素で実装します。input要素のチェックでタブを切り替えます。 <section class="tabs"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1">About us</label> <input id="tab-2" type="radio" name="radio-set"
ちょっとぼんやりした画像をくっきりさせるPhotoshopのチュートリアル | コリス
元画像を一切劣化させることなく、ちょっとぼんやりしたねむい画像をくっきりさせるPhotoshopのチュートリアルを紹介します。 レースの柄をはじめ、よりくっきりしているのが分かると思います。 How to Non-destructively Sharpen Your Image In Photoshop [ad#ad-2] チュートリアルは4ステップで、慣れれば数分でできる思います。 下記は各ポイントを意訳したものです。 Step 1:画像の準備 Step 2:ディテールの抽出 Step 3:ディテールの調整準備 Step 4:ディテールの調整 完成 Step 1:画像の準備 まずは、元となる画像をダウンロードします。 Autumn Stock IV [ad#ad-2] ダウンロードした画像をPhotoshopで開いてください。 画像を加工するときは、元画像はそのまま残し、コピーした画像を
CSS3ビギナーでも分かりやすく解説された、ユーザーが使いやすいボタンを実装するチュートリアル
CSS3のスタイルやアニメーションを使って、ユーザーが使いやすい美しいボタンを実装するスタイルシートのチュートリアルを紹介します。 Styling Button Links With CSS3 [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1:ボタンの実装 Step 2:ホバーのスタイル Step 3:アクティブのスタイル オプション:テキストの選択を不可に まとめ:全スタイルシート Step 1:ボタンの実装 ボタンの実装には、シンプルなテキストリンクを使用します。 HTML テキストリンクにclassを付与します。 <p><a class="button-link" href="#">Button Link</a></p> テキストリンクをボタンに見えるようスタイルしていきます。 ボタンがクリックしやすいように、paddingの値を充分に設定します。 .butto
斜めのラインを使うスタイルシートのチュートリアル | コリス
コンテンツ間の区切りやエレメントに斜めのラインを使ったスタイルを与えるスタイルシートのチュートリアルを紹介します。 Slopy Elements with CSS3 [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ 実装 デモ 斜めのラインはCSS3で実装されているので、Chrome, Safari, Firefox, IE9でご覧ください。 demo 1 実装のポイント コンテンツ自身は回転させず、コンテンツのラッパーを回転させます。 回転させたコンテンツは表示領域からはみ出す部分もあるので、余剰分の処理も忘れずに。 HTML 見出しとテキストを含む個々のコンテンツはarticle要素で実装し、そのラッパーとしてdiv要素を設置しclassに「se-slope」を与えます。 <section class="se-container"> <div class="se-slop
画像を矩形以外の形状で表示したい人のためのチュートリアル
画像にPNGマスクを使用して、ブラシストローク状、サークル状など、矩形とは異なる形状で表示するチュートリアルを紹介します。 デモページ もう一つのサークル状のデモは、下記ページのギャラリーのサムネイルとして使用されています。 Roundfolio 画像の枚数が少ないのであれば個別に画像を作成してもよいかもしれませんが、このデモのように数多くあると、このテクニックを使用した方がより効率よく実装できます。 [ad#ad-2] 画像の作り方 画像は3種類が必要で、全て同じサイズにします。 ロールオーバー用の画像 ※透過PNG画像 マスク用の画像 ※透過PNG画像 ベースとなる画像 サークル状に使用する画像3種類 制作：HTML, CSS, JavaScript HTML ロールオーバーとマスク用に2つの空span要素を使用します。 <a href="images/gallery-full.jpg
Photoshopの基本機能だけでミニサイズのアイコンを作成するチュートリアル
Photoshopの基本的な機能を使うだけで、ミニサイズのアイコンを作成するチュートリアルを紹介します。 How to Design Mini Icons [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1：新規ドキュメントの作成 Photoshopで新規ドキュメントを作成[Ctrl+N]します。 ここでは、幅：14px、高さ：14px、背景（カンバスカラー）：透明、にします。 Step 2：アウトラインを描く 鉛筆ツール[B]を選択し、ブラシのサイズを1pxにします。描画色を暗いグレーにし、ページアイコンのアウトラインを描きます。 直線は、始点で[Shift]を押しながらクリックし、終点でクリックすると描けます。 描いたピクセルを消す時は、消しゴムツール[E]で1px単位でできます。 Step 3：ベースのグラデーション 自動選択ツール[W]で、グラデーションを適用す
[CSS]順序付きリストol要素を視覚的に美しくスタイルするチュートリアル
プレーンな状態で割とスタイルされるol要素を視覚的に美しくするスタイルシートのチュートリアルを紹介します。 Firefox4でのキャプチャ 順序付きリストを美しくスタイルするチュートリアル HTML HTMLは非常にシンプルなol要素で実装します。 <ol> <li>List item one</li> <li>The second item on the list</li> <li>Number three is a bit longer, with some lorem ipsum for good measure. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
Super Cool Watercolor Effect in 10 steps in Photoshop
Last year I wrote a Photoshop tutorial for PSDTUTS showing how to create a very nice design using watercolor brushes. It was inspired by the work of guys such as Bruno Fujii, Margot Mace, Raphaël of My Dead Pony and Stina Person. This time I will create another effect but it will be using Masks and Watercolor brushesl; it's inspired by another great digital artist, the master Scott Hansen the mind
オリジナルの紙のテクスチャを短時間で作成するPhotoshopのチュートリアル
8つのステップで、オリジナルの紙のテクスチャを作成するPhotoshopのチュートリアルをPsdtuts+から紹介します。 Quick Tip: Create a Realistic Paper Texture in 5 Minutes 各ステップのテキストはPhotoshop CS4の日本語版に準じたものに変更しています。また各キャプチャは元記事とは異なり、当方で実践したものです。 Step 1 Photoshop上に、1280x1024pxのファイルを新規作成します。中心に長方形の選択エリアを作成し、「クイックマスクモード[Q]」にします。[フィルター]-[ピクセレート]-[水晶]を選択し、「セルの大きさ」を小さく（3px）に指定し「OK」ボタンをクリックします。[Q]を押して、クイックマスクモードを解除します。 「新規レイヤーを作成[Ctrl]+[Shift]+[Alt]+[N]」し
独自のWordPressテーマを作るチュートリアル20+ – creamu
TUTORIAL LOUNGEで、独自のWordPressテーマを作るチュートリアルがたくさん紹介されています。 ざっといくつかご紹介。 Photoshopで作るモックアップ（PSDダウンロード付き） WordPressのテーマを一から作る方法 Part 1（PSDダウンロード付き） WordPressのテーマを一から作る方法 Part 2（PSDダウンロード付き） WordPressのテーマを一から作る方法（PSDダウンロード付き） WordPressとjQueryでベーシックな新聞スタイルのデザインをするチュートリアル（PSDダウンロード付き） GreenPressのWordPressテーマデザイン（PSDダウンロード付き） デフォルトのテーマをカスタマイズしていく方法 水彩画タッチのブログデザインをするチュートリアル（PSDダウンロード付き） PSDファイルがダウンロードできたり、デ
[CSS]初心者にも分かりやすいスタイルシートのチュートリアル
スタイルシートの初心者にも分かりやすく、各要素に的確なマークアップを行い、ワイヤーフレームをビジュアル化するチュートリアルをSoh Tanakaから紹介します。 Styling Post Headings That Stick Out demo 下記のチュートリアルでは、見出し、日付、カテゴリ、タグを含むブログのヘッダをステップに分けて実装していきます。 Step 1. Wireframe – HTML ワイヤーフレームに基づいて、「ヘッダ」と「コンテンツ」をdiv要素で配置します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="post"> <div class="postheader"> <!--ヘッダ--> </div> <!--コンテンツ--> </div> </textarea>
単調なウェブサイトのデザインに手を加えてクオリティをアップするチュートリアル
ウェブサイトのデザインに、ビジュアルエレメントを追加したり、細部をブラッシュアップしたりしてクオリティをアップするPhotoshopのチュートリアルをPsdtuts+から紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Photoshopでつくるタイポグラフィのチュートリアル -Part17
http://www.designwalker.com/2009/11/corporate-tutorial.html
[JS]jQueryを使用してインタラクティブなコンテンツを作成するチュートリアル
Old World Wax Seal | Graphic Design | PSHERO