タグ別アーカイブ: animation

2013-5-24 勉強会

今日もランサーしょうじさんはお休みでした。寂しいなー・・・(ノ_・。)
勉強会の概要

  • kanedaさんからの質問。リスティング広告とはなんですか?
  • りんごのサイトに入会申し込みフォームを作る。(会員を増やそうキャンペーンを開始!!)
  • かおりんごさんの提案「1からりんごのオリジナルテーマをつくろう」
  • 真中のぶさんのリクエスト「パックマンをパクパクさせながら画面の右から左に移動させる」

続きを読む

2013-5-24 勉強会リクエスト

勉強会でやって欲しい事をリクエストします。

①動画挿入用プラグイン「Viper’s Video Quicktags」を先ほどインストールしました。
 簡単に出来て特に問題ないのですが、iphoneで見るとサムネイル画像が縦に伸びてしまっています。
 クリックして別画面が開き動画を見る際には問題ありません。

②先週のcssアニメを自分なりにアレンジしてやってみました。それについての質問です。
 こちらを見て下さい。
 http://nobu-69.com/study/css_packman/css-packman.html
パックマンがパクパクやっているのは上手く出来ました。
「パックマンをパクパクさせながら画面の右から左に移動させる」
という所で、つまずいています。

勉強会用にzipファイルも用意しました。
http://nobu-69.com/study/css_packman/css-packman.html

以上

よろしくお願い致しまするん。

②について勉強会でやりました。ありがとうございました!

こんな感じで実装できました。

cssアニメーションでパラパラアニメを作る方法

animationプロパティのanimation-timing-functionの値にsteps()を使うと、簡単にパラパラアニメが作れます。こんな感じです。

作成の手順は以下の通り。

  1. cssスプライト画像を作る要領で、アニメの一連の動作を分解した絵を描いて一枚の画像に書き出す。横300px縦100pxでこんな絵を描いてみました。横50px縦100pxの5枚のスプライトをを繋げた状態です。
    パラパラアニメ素材
  2. クラスparapara要素を作り、この絵を背景にして、横50px縦100px、overflowをhiddenにします。animationを含めてcssの設定はこうなります。(ベンダープレフィックスは省略しています。)

簡単ですね?animation-timing-functionの解説はこちらなど。
実装はここの例を参考にしましたよ>codepen.io

画像スライド アニメーション

下記のサイトのトップページ中央の画像スライド?アニメーション?
http://www.chanterelle.jp/index.html

これは、どのように実装しているのか教えて下さい。
jQueryかな。css3でも出来そうな気もします。(分らないけど)

出来たら本日の勉強会のお題としてお願いします。

—————————————————————-
2013-05-10 fri 勉強会でやってみました。jQueryではなく、css3で実装しました。
いい感じにできましたよ。タカハシ先生ありがとうございます!

僕のサーバーに作ったものをアップしたので見て下さい。
http://nobu-69.com/study/20130510_anime/green.html

html,cssは以下の通りでございます。ちなみにベンダープレフィックスは、書いてません。実際に制作で使う際には、ちゃんと書かないとだめですよ。

①家pngファイル 1000×86
home

②雲pngファイル 703×25
cloud

キーフレームを以下の様に指定するので画像の横幅の数値は重要です。横幅のサイズの数値を記入して下さい。違う数値を書くとカクカクした動きになったりします。

画像が重なっているのは、
position:absolute;
z-index
が効いているからです。

もちろん画像は変えられるし、動くスピードもかえられるので、アイデア次第で、面白い物ができそうですねー。

レッツ チャレンジ!

※ie9.ie8.ie6では動きません。

ページを読み込んだ時に一度だけ動かすCSSのanimation

まずはDEMOを見て下さい。
DEMO
htmlとcssの中身は以下の通り。

ページを読み込んだ時に要素をanimationさせる

これは単純に、目的の要素にanimationを指定するだけで良い。
.appear {animation:show 1s both;} の部分がそれ。ショートハンドで書いているのをサブプロパティに書き下すと、以下のようになる。

animation-name(@keyframesの名前)
show
animation-duration(アニメにかける時間)
1s
animation-fill-mode(アニメの実行前後に、keyframesの0%と100%に指定したスタイルを適用するか。)
both

animation-fill-modeでアニメの開始前と終了後をコントロール

まずは animation-fill-mode がミソ。以下の4つの値を指定できる。defaultはnone。

none
keyframes内の指定は、アニメ中にだけ効果が及ぶ。
forwards
アニメが終了した後も、100%に指定した状態をキープする。
backwards
animation-delayの間(アニメする前)に、0%に指定した状態で待機させる。
both
forwardsとbackwardsの両方の効果

詳しくはanimation-fill-mode – CSS | MDNを参照して下さい。

animation-animation-iteration-countは初期値が1

次のミソがanimation-iteration-count。アニメの繰り返し回数の指定で、無限ループなら infinite で指定できる。初期値が1なので、ショートハンドで数字を書かずに省略すると、1回だけのアニメーションになる。

詳しくはanimation-iteration-count – CSS | MDNを参照の事。

animation-delayは、別のクラスを重ねがけすると便利

パラパラと、時間差で要素を表示しているのは、.d1 とか .d12 などのクラスに指定した animation-delay 。汎用的に使い回すなら、こうしてクラス分けした方がスッキリと指定できるかもしれない。

2013-4-5勉強会

今日もお菓子が充実してます!
2013-04-05-お菓子

勉強会の概要は、

  • css3のアニメーションセレクタの復習
  • cssで画像をクロスフェード&レスポンシブデザインでの高さの問題について
  • html5の新しい要素や意味の変わった要素いろいろ
  • 5月の会費とお部屋代のお支払い
  • “パソコン倶楽部りんご”にSNSボタンを設置する

  • です。 続きを読む

    cssで画像をクロスフェード&レスポンシブデザイン

    4/5の勉強会でcssで画像をクロスフェードやりました。先生の記事を読んでも理解力が無く上手く出来なかったので、実際に説明してもらいました。

    家で実際にやってみました。トップページです。http://nobu-69.com/manakaa/sample2/

    ①画像をレスポンシブデザインにする。

    今まで画像の親要素に高さを指定しないと、画像の領域が確保できないので、高さを指定してましたが、それだと、画面の横幅をせばめた時に画像の下に余白でできてカッコ悪かった。それのカッコ悪さを少なくするために、メディアクエリで細かく段階に分けて高さの指定をしていましたが、以下の方法でその必要は無くなりました。

    対処として1枚目の画像はposition:absoluteしない!です。それにより、1枚目は常に表示されている状態になるので高さがキープされます。その上で1~4枚目をクロスフェードします。
    高さの指定は、どこにもしてはいけません。

    ②cssでクロスフェード
    animation:overwrap 12s ease infinite; アニメーションの名前(任意)overrap 全体の長さ12秒  easeイージングです。  infinite永遠に繰り返し

    .slider h1 img:nth-of-type(2) {animation-delay:3s;} 2枚目の画像はキーフレームがスタートして3秒後にアニメ―ションが始まる。何が始まるかは、以下の指定です。最初は見えない、全体の5%になった所で見える。100%になるまで見え続ける。
    @keyframes overwrap {
    0% {opacity:0;}
    5%,100%{opacity:1;}
    }

    ポイント1:opacity:0は、何にも見えない。opacity:1は丸見え。opacityとは日本語で不透明。opacityは、0から1で指定。その間は、0.1,0.2,0.3,0.4,…….。
    ポイント2:ベンダープレフィックスを書くときに、何にも無しのやつは、1番下が良い。

    animation-delayプロパティは、要素にキーフレームアニメーションを適用する場合に、 アニメーションがいつ始まるかを指定する際に使用します。
    ———————————————–
    先生。
    ①画像をレスポンシブデザインにする。は上手く出来ました。
    ②cssでクロスフェードですが、上手くループしません。4枚目の画像表示まではGoodですが、それ以降が変な感じです。

    何故でしょうか?

    css animation-delay の使いどころ

    cssのanimationでクロスフェイドをさせる際には、各要素で同じ@keyframesを使いつつ、nth-of-type(n)セレクタで、animation-delayをずらしてあげると、効率がいいです。 続きを読む

    cssで画像をクロスフェードに挑戦

    先生のを参考にやってますが、うまくいきません。手書きしてましたけど上手くいかないので、
    とりあえず、一回コピペで試してみましたが、うまくいきません。
    http://nobu-69.com/manakaa/sample2/
    3枚目の画像の後に謎の空白時間があります。

    現在の理解度

    /*cssでスライドショー*/

    クロスフェードするものの大外枠です。widthを切れば画面いっぱいに表示されます。
    #bg_header{
    margin:0 auto;
    width:900px;
    }

    高さ指定は必須。指定しないと、場所が確保されないので。
    画像は縦に3つ並びます。overflow:hidden;であふれた分を隠します。
    .slider{
    height:400px;
    position:relative;
    overflow:hidden;
    }

    各画像をabsolute the butcherで同じ位置に重ねる。
    .slider img {
    position:absolute;
    width:100%;
    }

    opacity:0;で完全に透明にする。キーフレーム名(必須)をつける、overwrapとする。(任意の名前でいい)
    24sは24秒という意味。何が24sなのでしょう?easeはイージング。infiniteは永遠に。
    .slider img {
    opacity:0;
    animation:overwrap 24s ease infinite;
    }

    nth-of-type(1)は一枚目という意味かな?一枚目のディレイが0なのは、
    すぐに表示させたいから。2枚目は4秒後に出現。3枚目は8秒後に出現。
    .slider img:nth-of-type(1) {
    animation-delay:0;
    }
    .slider img:nth-of-type(2) {
    animation-delay:4s;
    }
    .slider img:nth-of-type(3) {
    animation-delay:8s;
    }

    overwrapと名前をつけたキーフレームに色々と指定を書く。
    ここが良く分からないです。
    スライドショーの柿のやつの黒板の説明みたけど、?です。
    難しいです。
    @keyframes overwrap {
    0% {opacity:0;z-index:10;}
    5%,30% {opacity:1;}
    44% {opacity:0;z-index:-1;}
    45%,100% {opacity:0;z-index:-1;}
    }

    よろしくお願いします。

    WordPressで複数ヘッダー画像をcssスライドショーで動かす

    2013-3-22勉強会で、収まらなかった内容をパソコン倶楽部りんご:TOPページに実装しました。
    WordPressのヘッダー画像に複数の画像をアップしておいて、fornt_pageの時は、header.phpでそれらを取得してcssのanimationで動かします。front_pageでない時は、Twenty Twelveの設定のまま(任意の画像に固定か、ランダムかを選択)です。animationの動作はFirefox16+、Google Chrome21+、Safari6+で確認しました。 続きを読む