タグ

2012年7月13日のブックマーク (5件)

  • スクロールで背景画像を別々に動かすパララックス効果

    通常背景画像は記事を下にスクロールすると一緒に移動するか、もしくは背景画像が固定された状態でしか設定できません。しかしJQueryを使うと背景画像が横、斜めなど好きな方向に動かすことができます。 今回は、パララックス効果のある2種類のサンプルとコードを紹介します。 スクロールすると雲の背景画像が横に動く 元のコードはアメブロのデザイン「気球に乗って」のコードを元に少アレンジして紹介してあります。 サンプルを見ていただけば分かるとおりスクロールすると雲の背景画像が横に動きます。 背景画像を設置する要素名(id名やclass名)はサイトによって異なると思いますのでそれに合わせて要素名(id名やclass名)は変更してください。 このサンプルでは縦方向は0pxにしてあるので横方向のみ移動していきます。 スクロールすると背景が右に2pxづつ移動します。 htmlコード htmlのコードは記事の外側

    スクロールで背景画像を別々に動かすパララックス効果
  • パララックスサイトの作り方の初歩

    最近パララックス(視差効果)を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量:" + y);//表示用 }); }); サンプルペー

    パララックスサイトの作り方の初歩
  • Adobe - ADOBE CREATIVE SUITE 4 DESIGN EDITION

    https://main--cc--adobecom.hlx.page/cc-shared/assets/img/product-icons/svg/indesign-64.svg | Adobe InDesign {{indesign}} 進化するレイアウトデザイン パンフレットやポスターなどの印刷物、デジタル雑誌や書籍からプレゼンテーションまで全てのページデザインとレイアウトを作成 {{plans-starting-at}} PRICE - ABM - InDesign {{small-tax-incl-label}} {{free-trial}} {{buy-now}}

    Adobe - ADOBE CREATIVE SUITE 4 DESIGN EDITION
  • カスタム投稿タイプとカスタム分類の取得や条件判別 | 我流天性 がらくた屋

    WordPress3.0で実装されたカスタム投稿タイプ(Custom Post Types)とカスタム分類(Custom Taxonomies)は非常に強力なんですが、まだまだ情報が少なく苦労する状態。 特に取得・判別系が分からなかったので、自分用にメモしときます。 構成はこんな感じ。 ■カスタム投稿タイプ(custom post) slug : ‘event’ ラベル : イベント情報 ■カスタム分類(taxonomy) slug : ‘event-category’ ラベル : イベント情報カテゴリ [イベント情報カテゴリ] 内 ├ ワークショップ ( workshop ) ├ レポート ( report ) … └ その他 ( etc ) [php] label; //取得結果:’イベント情報’ //クエリからtaxonomy(カスタム分類タクソノミー)のslug取得 $taxono

    カスタム投稿タイプとカスタム分類の取得や条件判別 | 我流天性 がらくた屋
    f503kk
    f503kk 2012/07/13
    カスタム投稿タイプ
  • WordPressでブログじゃないWebサイトを作るときのいろいろ(サンプル付き)

    とても長い記事になってしまいましたが、WordPress を使って、コーポレートサイトのサンプルを作ってみました。WordPress はブログだけじゃなくて、色んな Webサイトが作れますよね!今回は、私が WordPress でサイトを作る時にやっていることをまとめてみました。 今までこのブログの中で、いろいろな WordPress の Tips を書いてきました。でも WordPress を使った Webサイトの作り方そのものは、今まで書いた事がありませんでした。そこで今回は、 WordPress を使ってブログじゃない Webサイトをまるごとひとつ作って、私なりの作り方をまとめてみました。 今回のサンプルサイトでは、WordPress の固定ページ機能はもちろん、カスタム投稿タイプやカスタムタクソノミー(カスタム分類)を使って作っています。 ページを表示する為に使っているテンプレート