タグ別アーカイブ: スライドショー

vane2

css3でmacのスクリーンセーバー風なものを作ってみました

11/22の勉強会の議事録です。
今回はmacのスクリーンセーバー風なものをcss3で作ってみました。
まずは完成形をご覧ください。↓

screensaver-01

それでは作成のポイントを説明致します。
どうぞ、下のソースもあわせてお読み下さい。

目次

続きを読む

CSS SLIDE PANEL

CSS SLIDE PANEL

2013-10-18 Friday 勉強会の議事録です。

kanedaさんのリクエストで、ショッピングサイト等でみかけるスライドパネルについてやりました。
CSSで実装するパターンとjQueryで実装するパターンをやりました。

タカハシ先生、ありがとうございました。

CSSで実装するパターンを自分のサイトにアップしたので、興味のある方はご覧下さい。
http://nobu-69.com/others.html
「css3 ショッピングサイト等でみかけるスライドパネル 2013/10/23」をクリックして下さい。

jQueryバージョンは、近日中にアップ予定。

アップしました。

working for yourself

みなさん議事録を書くのをいやがる傾向にありますが、書く事により確実に理解度は増すのでとても自分の為になります。もし、議事録を書いている時に分からなくなってしまっても先生がサポートしてくれる(多分)ので心配ありません。WAVE時代にPALを見ながら勉強していて実際に課題制作になったら何も出来なかったという事が多々ありましたよね。そのことからも分かるように、勉強会に出たからといって教わった技術が絶対身に付くとは限りません。

タカハシ先生は、私たちの質問に常に答えてくれます。質問内容が先生の知らない事であれば調べたり調査したりして答えてくれています。先生はよくこんな事を言っています。

「パソコン倶楽部りんごが始まって一番勉強になってるのは私だと思う。」

メンバーの質問に答えたり、議事録を書いたりすることは、もちろん他の人の為でもありますが、実は自分の為に一番なるのですよー。

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をずらしてあげると、効率がいいです。 続きを読む

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

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

自由研究:TinySlidershow(名画のギャラリー)

art
11/23の部活動で学習した軽量負荷の TinySlidershow のサンプルを作成しました。
人物名画を素敵なギャラリーにてご鑑賞ください。(後半は少し遊んでしまいました。)

(*’▽’*)わぁ♪
cssで額縁を作っちゃうなんてすごーい!!
ジェイ子#7ジェイ子

続きを読む

自由研究:CSSで3D表現 (リカちゃんパリのお散歩)

licca
Web Designing 2012 4月号よりレポートします。
これは先週、高橋先生に借りたのですが、気になるtransform:rotateの記事があったので、
応用してサンプルを作ってみました。
記事は以下からアクセスしてください。
http://shoji.main.jp/log_20121122yarita.html

2012-9-21勉強会

第3回勉強会のほうこくです。

概要

講師
高橋 圭介
場所
柴崎学習館 第二和室
日時
  • 「マークアップとcssの筋トレ」
  • teamviewerで講師の画面を共有
  • 10月分の予約と会費の集金
  • 真中さんの黄金比講座ミニ
  • 「cssだけでスライドショー」

マークアップとcssの筋トレ・teamviewerで講師の画面を共有

“びゅう”の”紅葉めぐり”のパンフレットをマークアップしました。

teamviewerで高橋先生の画面を共有しながら各自のマークアップを確認しました。

真中さんの黄金比講座ミニ

詳しくは真中さんに聞いてくださいね

cssだけでスライドショー

詳しくはこちらをご覧ください。