サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
プライムデーセール
clubringo.com
jQuery でスクロール位置を取得して、色々と仕掛けをしたい時の方法です。 scroll-switch-animation まずはリンク先と、そのソースを見てみてください。 解説 仕掛けをしたい要素に共通のクラス名「j-scroll-switch」をつけておく。 jQuery でスクロール位置と、要素の位置を比較して、要素が良い位置に来たところで「on」クラスを足す。 css で動かす場合は、transition か animation を使う。 jQuery で animate させたいなら、ごりごりとコードを書く。ループは setTimeout を再起的に呼ぶ jQuery でもアニメーションできますが、css で動かす方が簡単だと思います。 jQuery には状態（スクロール量）の監視と、クラス名のコントロールだけをさせて、アニメーションは css で実装する、という役割分担の考え
みなさま、ごきげんよう。 2014-07-25 勉強会でskrollrの実装方法について、確認しました。 自分のサイトや作品をパララックスにしたい人必見!! この勉強会では”skrollr”というJavaScriptライブラリを使用しました。パララックスサイトの理解が曖昧な人や、初めてパララックスに挑戦する人は、以下の手順でやってみましょう。 パララックスとは 視差のことです。画像など複数のレイヤーを違った速度でスクロールさせることによって、奥行きを感じさせる表現手法です。 skrollrについて スクロール量に応じて要素を動かすことで簡単にパララックスを実装できるJSライブラリです。
皆様、ごきげんよう。 2014-08-01 勉強会 前回、skrollrを実装し、画像やテキストなどの要素をスクロール量に応じて動かす方法を確認しました。そして今回は背景画像の動きを操作して遠近感を出す事によって、パララックスを実現する方法を確認しました。 遠近感を出す為に複数の背景画像をずらす skrollrの指定 skrollrのこちらのdemo parallax scrolling for the massesの背景画像を再現してみました。 勉強会のdemoはこちら > parallax-by-skrollr bodyのすぐ直下の2つのdiv “bg1″と”bg2” に背景画像を指定する demoでは3層の水玉ですが、2層でも仕組みは確認できます。2つのdivを用意したら、skrollrで、スクロール量に応じた背景画像の動きを”background-position”で指定します。
skrollr 0.6.26 の要約と解説 本家はこちら（英語） 以下、サンプルについては、skrollrのdata-属性で左ボーダーの幅を変化させている。右ボーダーについては、後述のclass解説にある、 skrollable-before,skrollable-between,skrollable-afterのクラスによって色が変化する。 data-属性 主にskrollr.jsに変化の起きるタイミングと、変化の内容を指示をする為に使うdata属性。keyframe:valueの形式で書く。 valueについてはstyle要素のvalueの形式で、cssを書けば良い。一部、拡張されており、ベンダープレフィクスを付けずに書けば、skrollrが処理してくれる。 keyframeの書き方は以下の2通りで、混在可能。 absolute mode ページがどれだけスクロールされたのかを基準にし
「WordPressのユーザー一覧ページを作る」の記事の続きです。 「メンバーが多いのでページ送りをしたい」という旨のご質問コメントをいただいたので、実装してみました。お使いのWPのバージョンやテーマが違う場合は、適宜、読み替えて参考にしてください。 前提 WP3.6のTwenty Twelveおよび、そのクローン テンプレート「page-authors.php」を作成し、themeディレクトリ内の「page-templates」ディレクトリにアップロード ユーザー一覧用に固定ページを1つ作成。テンプレートには「page-authors.php」を指定 実装後の表示は「メンバー紹介」になります。 ちなみに、「パソコン倶楽部」のユーザー管理画面には、各自の学習履歴やSNS情報が入力できるように、functions.phpに改造を施してあるので、それらの情報も表示する仕組みも実装しています。
画像を準備する アニメさせるコマを、CSSスプライトの要領で連結した1枚のpng画像にしておきます。今回は1コマを100px四方にして8×2の16コマで800 x 200pxの画像を作成しました。こんな感じです。 アニメを表示させる枠を用意する div.anmに縦横100pxの大きさを指定して、overflowをhiddenにして、その中に作っておいた画像を置きます。これでdiv.anmの中に、左上の1コマだけが見えている状態になります。 .anm { border: 1px solid #DDDDDD; display: inline-block; height: 100px; overflow: hidden; position: relative; vertical-align: top; width: 100px; } .anm img { max-width:none; }
スクロール位置を jQuery で取得して、いろいろやる時の方法。 css は transition と animation の2パターン。jQuery のアニメも1パターン用意した。 赤い点線で示した「ウインドウの高さの半分」よりも、白い枠線のエリアの上辺が上になると、アニメーションが始まる。
<body> <div id="top" class="appear"> <header> <h1>CSS animation <span class="appear d1">only once</span> <span class="appear d2">at</span> <span class="appear d3">page beginning.</span></h1> </header> <div class="appear d4"> <p>Animation for attention the content. <span class="appear d6">Elegantly,</span> <span class="appear d8">Modestly,</span> <span class="appear d10">Delay a timing on purpose.<
animationプロパティのanimation-timing-functionの値にsteps()を使うと、簡単にパラパラアニメが作れます。こんな感じです。 作成の手順は以下の通り。 cssスプライト画像を作る要領で、アニメの一連の動作を分解した絵を描いて一枚の画像に書き出す。横300px縦100pxでこんな絵を描いてみました。横50px縦100pxの5枚のスプライトをを繋げた状態です。 クラスparapara要素を作り、この絵を背景にして、横50px縦100px、overflowをhiddenにします。animationを含めてcssの設定はこうなります。（ベンダープレフィックスは省略しています。） .parapara { width:50px; height:100px; margin:1em auto; overflow:hidden; background:url(http://
「Pure CSS3 Cycle Slider」をお手本にして、css3のanimationで永久ループするスライドショーを作ります。 とても美しい動作ですので、まずは動作を確認して下さい。 画像にマウスホーバーすると、スライドが止まる マウスホーバーで画像に対応するh1が現れる スライドの表示秒数を伝える工夫もされている マークアップをキチンと考える 最終的にCSSで動作させるのか、jQueryで動作させるのかに関わらず、まずはきちんとマークアップします。そうすると以下の利点があります。 スライドの中身が、クリックさせたいリンクの列挙だとすれば、SEOの効果も望めます。単に画像を動かすのと、見出しタグ付きの要素が動いているのとでは大違いです。 対象ブラウザに合わせて、実装方法を選択できます。例えば、古いIEなどでも動かしたければ、古いIEにだけIEの条件コメントで自作のjQueryを読み
レスポンシブWebデザインを考える際に、IE8以前（IE8～6）の古いブラウザについて、どのように対応するかを考えてみました。 どうすれば、手間が少なく古いブラウザへの対策ができるのか？ レスポンシブWebデザインを作る際の覚書です。 制作のための前提条件 考えるにあたって、下記の条件のクリアを前提としました。 旧ブラウザはIE8～IE6を含める。 IE8～IE6でもCSS3使ったデザインを行う。 IE6でもpng画像を使用する。 デバイスはスマートフォン、タブレット、PCの3種類を想定する。 CSSはモバイルファーストを考慮にいれた記述方法とする。 日本ではまだまだWebページを見るためにIEを使う人が多いです。 デザイン面を考えるとCSS3を使っている場合、ChromeやFirefoxとIEを比べたときに見た目が変わってしまうことがあります。 その辺りの事情は、見る人にはなかなか理解し
2013-3-8の勉強会で、ランサーしょうじさんへお伝えしようとした内容を、改めて整理して実装してみました。 まず、ユーザー一覧ページを作る条件は以下の通りでした。 登録されたユーザーのアバターやプロフィール情報を自動取得して表示したい テーマはTwenty Twelveのクローン。テンプレートファイルの編集はアリとする。 ページ自体は固定ページで作成 他の固定ページには影響を与えないこと やり方は色々とあると思いますが、以下の考え方で実装しました。 ユーザー一覧用に、固定ページを作成し、本文には「以下が現在のメンバー一覧です」までを書く 作成した固定ページのIDを調べる テンプレートファイル「page.php」内で if( is_page(ID) ) :で分岐させ、endif;までの間に処理を書く get_users()でユーザー情報を取得し、変数に格納しておいて、foreachで処理。
このページを最初にブックマークしてみませんか？
『パソコン倶楽部りんご | Webデザイン脱初心者の勉強会』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
