タグ別アーカイブ: animation

sm2014

css animationで要素のwidthを%指定

2014-06-13 勉強会

この日の勉強会は、とても有意義な内容でした。内容の一部を自分のサイトにアップしました。

css animationでアニメーションさせる要素のwidthを%指定するとどうなるのか?

manaka designのtipsをご覧下さい。とても為になる事が書いてあります。
manaka design

svg20140515

SVG LINE アニメーション・応用編

2014-05-09 の勉強会で「SVG LINE アニメーション part2」というのをやりました。前回の応用編です。
SVG LINE アニメーション・基礎編

svgはベクター画像なので拡大してもビットマップ画像のようにギザギザにはなりません。レスポンシブデザインに最適です。もちろんアニメーションはcssで実装!FlashやJavascriptを使わないので軽いのであります。

自分のサイトの備忘録「tips」にアップしました。
manakadesign

manaka design/tips
「SVG LINE アニメーション・応用編 2014-05-15」という記事をご覧下さい。

このページにも直接説明を書こうと思いましたが、それは参加されたどなたかにお譲りします。なぜなら議事録などを書くと理解度が増すからです。僕だけスキルが上がっては申し訳ありません。どなたかチャレンジを!
svg_anime

SVG LINE アニメーション・基礎編

2014-05-02 の勉強会で「SVG LINE アニメーション」というのをやりました。

svgはベクター画像なので拡大してもビットマップ画像のようにギザギザにはなりません。レスポンシブデザインに最適です。もちろんアニメーションはcssで実装!FlashやJavascriptを使わないので軽いのであります。

自分のサイトの備忘録「tips」にアップしました。
manakadesign

manaka design/tips
「SVG LINE アニメーション・基礎編 2014-05-05」という記事をご覧下さい。

このページにも直接説明を書こうと思いましたが、それは参加されたどなたかにお譲りします。なぜなら議事録などを書くと理解度が増すからです。僕だけスキルが上がっては申し訳ありません。どなたかチャレンジを!
manakadesign

府中でホームページ制作

自分のサイトができました。キャッチコピーやいろいろと手直ししたいですが、完璧にできるまでをまっていてもその時は来ない(上を見ている以上)なので、一応これで完成です。紙媒体と違い後から何度でも修正、変更できるのがweb siteのいい所。

manakadesign

http://manakaa.com/
http://blog.livedoor.jp/happygolucky1969/archives/52401162.html

sm2014

特定の位置までスクロールしたときにアニメーションさせる(jQueryとcss)

2014-01-31と2014-02-07の2週にわたり勉強会でやった「特定の位置までスクロールしたときにアニメーションさせる」というのを自分なりにやってみました。
オブジェクトの数だけif文を書くという面倒なやり方ですが、理解しました。オブジェクトの数だけif文を書かなくて済む方法も先生に教わりましたが、まだちょっと難しいので理解していません。

とりあえず自分のサイトにアップしました。
http://nobu-69.com/others.html

授業に参加したみなさんは、どれくらい理解しましたか?
僕は理解するのに結構いじくりまわしました。時間も費やしました。授業で先生の説明を聞いただけで技術はモノになりません。聞いた事を基に家でいろいろやらないとダメです。

なので、細かい説明はしません。自分でやってみてつまずいた箇所があったら教えて下さい。分かる範囲でお答えします。

css

jQuery

html

sm2014

jQuery (triggerのみ)とcss3で実装するscroll switchアニメーション

2014-01-24の勉強会でやった事を現在製作中の自分のサイトにやってみました。

質問1
1つだけならうまくいきますが、2つ設置するとうまくいきません。(同時に作動してしまう。)

質問2
jQuery本体ですが、index.htmlにしゅるしゅるスムーススクロールをやる為に、
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”
で本体を読み込んでいました。

しかし今回のアニメーションをやるにはversionが古すぎるようで、動きませんでした。
なので、最新の本体をダウンロードしてサイト内に設置しました。そしたらアニメーションは
動きましたが、しゅるしゅるスクロールが動作しません。

こういう場合の対処法については、どうしたらいいでしょうか?
新しいのに対応しているスムーススクロールを見つけるのがいいのかなあ。

製作中のサイトです。トップページにアニメーションあります。あと、何度もいいますが制作途中です。w
manakaa.com

先生が作ったサンプルサイト
ringo20140124
※ダウンロードしてjQ本体をリンクして下さい。

HTML5 canvas

HTML5 canvas

に盛大に開催された勉強会の議事録です。
今回は、かおりんごさんのリクエストでHTML5 canvasをやってみました。
とりあえずこんな感じです。

sample

HTML5の新要素canvasというものとjavascriptで実装します。要素というのはh1とかpとかの事です。HTML要素です。

” 簡単に言うと、絵を描く為の画用紙がHTML5 canvasです。
絵を描く為の筆がjavascriptです。”

今回こちらのサイトを参考にさせて頂きました。
nezz*script

こんな感じです。javascriptのいろいろな数値を変えてみると、何がどう変化するのか分かると思います。僕もまだ詳しい事は分かりません。とりあえず、たくさんいじったりして理解を深めるしかないですね!

*勉強会当日参加メンバーへ
この記事について勉強会でやったのに不足している部分がありましたら補足しておいて下さい。

vane2

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

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

screensaver-01

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

目次

続きを読む

ドロワーメニュー・css/jQ

ドロワーメニュー・css/jQ

2013-11-15 勉強会の議事録です。

cssでドロワーメニュー をやりました。(jQuery versionもやりました。)

僕のサイトhttp://nobu-69.com/others.htmlに書きましたのでご覧下さい。
「cssでドロワーメニュー(jQuery versionもあるよ!) 2013/11/15」をクリックして下さい。

Drawer(ドロワー)とは机とかの引き出しという意味です。基本的には表示領域が小さいスマホ対策と言えると思いますが、PCサイトのように表示領域が大きい場合に、この仕組みを利用し遊び心として面白い演出をするのもアリだと思います。

css3-3D-Box

続・cssで3D Box(立体図形)を作り、さらに回転させる。

cssで3D Box(立体図形)を作り、さらに回転させる。
2013-11-08の勉強会でやった事をまとめました。
2013-11-08の勉強会

の続編です。

今度は、回転の際に遠近感を出す方法です。cssのperspectiveを使います。現在はプロパティでも値でもあるようです。そのうち統一されるのかな?
サンプルかこちら↓
http://nobu-69.com/others.html
上記のサイトに行きましたら”cssで3D BOXを作る。さらにhoverで回転。 2013/11/08″をクリックして下さい。

【1つ質問】
perspectiveを指定すると表示画像の大きさが変わってしまうのはなぜですか?

css3-3D-Box

cssで3D Box(立体図形)を作り、さらに回転させる。

2013-11-08の勉強会でやった事をまとめました。

cssで3D Box(立体図形)を作り、さらに回転させる。
自分のサイトにまとめたので、興味のある方はご覧下さい。
アイデア次第で面白い事ができそうですよー。

http://nobu-69.com/others.html
上記のサイトに行きましたら”cssで3D BOXを作る。さらにhoverで回転。 2013/11/08″をクリックして下さい。

gifani-catch

フォトショップで作る!GIFアニメーション

9/13の勉強会のお題は“GIFアニメーション”でした。
データも軽く、今また何気に脚光を浴びている(?)GIFアニメ。
これをGIFアニメ作成アプリや、CSS3アニメーション等、いろんな方法で作ってみました。

その中から、今回はphotoshopを使ってGIFアニメを作ってみようと思います。

1.画像を必要な枚数用意する

イラストレーターで作った画像を4枚用意しました。
gifani-01
続きを読む

0d3c27b31d3c5651bccce7c63206768f

GIFアニメ

2013-09-13 の勉強会でGIFアニメについてやるとになりました。(前回の勉強会の後のマックで)
やるにあたって具体的に何を用意していけばよいですか?先生。

ちなみにGifアニメと上で↑動いてるやつです。Flashではありません。

こちらのサイトにのってました。
http://matome.naver.jp/odai/2124771110937828068

すごいですね~。アイデアもいい!
最初からこんな凄いのは出来ないと思いますが、まずは簡単なのを作ってみましょう!