ぷるんと回転するアニメーションの実装(写経して改良) - CSS
ぷるんと回転するアニメーションを写経して、改良してみた
See the Pen ぷるんと回転 by tamago (@tamago324) on CodePen.
- サンプルではmatrix3d()で実装されていたが、matrix()でもいいんじゃないかと思ってmatrix()で実装し直してみた
- その次に、rotateでいいんじゃないかと思って、rotateで実装
matrixで100pxっぽくなるようにしていたため、rotateの方が回転させるだけなので、楽に実装できる
matrix()関数
これはtransformプロパティの値に指定できる関数で、行列を使って2Dの変形を実現するらしい
基準はmatrix(1, 0, 0, 1, 0, 0)
となっている。この状態では何も変形していない状態
1番目の数値は、水平方向の縮尺(a)
2番目の数値は、垂直方向の傾斜率(b)
3番目の数値は、水平方向の傾斜率(c)
4番目の数値は、垂直方向の縮尺(d)
5番目の数値は、水平方向の移動距離(e)
6番目の数値は、垂直方向の移動距離(f)
水平(x)と垂直(y)の縮尺と傾斜率と移動距離を指定するらしい
See the Pen matrix 試し by tamago (@tamago324) on CodePen.
色々やってみたけど、よくわからないから、rotate()とかscale()とかtranslate()とかでやったほうがいいかも...
matrix(a, b, c, d, e, f)
はmatrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0 , e, f, 0, 1)
と同じ意味らしい
参考文献
【Gulp】インストールからSassのコンパイルまで - CSS
SassのコンパイルをするときにGulpというものを使うといいって聞いたことあるからインストールとコンパイルを行ってみた
Gulpはめんどくさいことを自動で行ってくれたりするらしい。
環境
OS
$ sw_vers ProductName: Mac OS X ProductVersion: 10.13.3 BuildVersion: 17D102
Node.js
$ node --version
v8.7.0
コンパイル
プロジェクト毎にGulpをインストールして色々設定をしないといけない スクリプト作ったほうが良さそう...いつかやろう
プロジェクト設定ファイルの作成
$ npm init -y
package.json
とpackage-lock.json
というファイルが作られる
SCSS記法のSassのコンパイル
Gulp本体(gulp
)とコンパイルするためのモジュール(gulp-sass
)をインストールする
$ npm install -D gulp gulp-sass
-D
オプションを付けてカレントディレクトリに対してインストールする
-D
は--save-dev
の省略した形らしい。また、install
はi
でもいいらしい
記事によってはnpm install -g gulp-cliとグローバルにGulpを導入する手順を解説しているところもあります。2017年現在、それは少数派です。この記事で説明しているように、グローバルにはGulpをインストールせずローカルだけにインストールするのがフロントエンド界隈では一般的です。
タスクの作成
自動で実行したい処理をgulpfile.js
に記述する必要がある
// 使用するプラグインを読み込む const gulp = require('gulp'); const sass = require('gulp-sass'); // タスク gulp.task('default', function () { // css/style.scssを選択 gulp.src('css/style.scss') // コンパイル .pipe(sass({ // 見やすくする outputStyle: 'expanded' })) // コンパイルしたファイルをcssフォルダに格納 .pipe(gulp.dest('css')); });
pipe
を使うことで処理をつなげることができる
タスクの実行
$ npx gulp
gulpfile.js
に記述されているタスクを実行してくれる
Sassファイルが更新されたら自動でコンパイルする
Watchという機能を使うことで自動でコンパイルできるようになるらしい
gulp.watch()
メソッドを使うことで、更新があった場合に自動で処理を実行してくれるらしい。
gulp.watch(ファイル名, 処理)
const gulp = require('gulp'); const sass = require('gulp-sass'); const src = 'css/style.scss'; gulp.task('default', () => { // 更新時にコンパイル gulp.watch(src, () => { gulp.src(src) .pipe(sass({ outputStyle: 'expanded' }) // Sassコンパイルエラー表示(必須!!) .on('error', sass.logError)) .pipe(gulp.dest('css')); }); });
また、コンパイルエラーの表示処理も入れてあげないといけないらしい
監視の開始
$ npx gulp
Ctrl+c
で止めることができる
こんな感じで使えるようにはなった!! いろんな事ができるらしいから、使っていくうちに試していこう
参考文献
transitionについてのメモ
transitionとは
プロパティを変更するときにどのように変化させるかを設定できるプロパティ!
.boxに定義された値・・・transitionのスタート値
.box:hoverに定義された値・・・transitonのゴール値
CSSアニメーションの基礎【Transitionを使ってみる】 | キタックCGソリューションセンター|Webマーケティング
もし、hover時に適用するスタイルが合った場合、:hover
に記述したスタイルがアニメーション後のスタイルになる
プロパティ
指定する値は以下の通り
transition-duration
: かける時間transition-property
: 適用するプロパティ名transition-timing-funciton
: 変化の仕方transition-delay
: 始まるまでの時間
transition
では、上の4つを1度に指定できる
transition-duration
始まりから終わりまでの時間を指定できる
transition-duration: 時間(ms, s);
かける時間を1000msと300msとした場合
transition-duration: 1000ms;
See the Pen transition-duration by tamago (@tamago324) on CodePen.
transition-peorperty
transition-property
でtransitionを適用させるプロパティを指定することができる
width
だけにtransitionの効果を適用とかもできる
transition-property: プロパティ名;
設定できるキーワードがいくつかある
none
: transitionを適用しないall
: すべてのプロパティに対して適用する
例)background-colorとwidthを変化させるとき、transitionをwidthだけに適用する
transition-property: width;
See the Pen transition-property by tamago (@tamago324) on CodePen.
横幅の変化だけ、transitionが適用されているのがわかる
transition-timing-function
transition-timing-functionでtransitionの進行度とタイミング(変化の仕方)を指定できる
値として設定できるキーワードがいくつかある
ease
linear
ease-in
ease-out
ease-in-out
また、cubic-bezier()
関数を使うことでいろいろな動きができる
See the Pen transition-timing-function by tamago (@tamago324) on CodePen.
cubix-bezier関数で実現できる例を見れるサイト
cubic-bezierでも表現できないものに関しては@keyframe
のアニメーションで実装するらしい
transition-delay
transition-delay
で開始を遅らせる時間を指定する
transition-delay: 数値;
単位はms
とs
のどちらかで記述できる
transition-delay: 500ms; // 0.5s
See the Pen transition-timing-function by tamago (@tamago324) on CodePen.
参考文献
box-shadow - CSS
影をつけることができる。
あと、図形を複製することもできる
box-shadow: offset-x, offset-y, (blur-radius), (spred-radius), (color), (inset);
offset-x
: 左右の影offset-y
: 上下の影blur-radius
: ぼかし具合spred-radius
: 影の広さcolor
: 影の色inset
: 内側に影を表示する
Wi-Fiハンカチ(青海波柄)を作ったとき知ったこと - CSS
指定の子要素に対してスタイルを適用 nth-child - CSS
nth-childを使うことで「2番目だけ」とか「5番目以降」にスタイルを適用するみたいなのができるようになる。
偶数番目の要素だけとか!!
nth-childはセレクタに追加して条件を指定する擬似クラスのひとつで、子要素のn番目(nth)にスタイルを適用させることができます。 多数の項目がある表で、交互に背景色を設定し見やすくしたい時などに役立ちます。
擬似クラスを覚えよう!CSSのnth-childの使い方 | TechAcademyマガジン
書き方
セレクタ:nth-child(値) {...}
指定できる値の種類は以下の通り
値 | 説明 |
---|---|
2n かeven |
偶数番目の要素 |
2n+1 かodd |
奇数番目の要素 |
a |
a番目の要素 |
n+b |
b番目以降の要素(bを含む) |
-n+b |
b番目以前の要素(bを含む) |
an |
aの倍数の要素 |
※ a
とb
は整数
偶数 番目に適用
2n
かeven
を指定する
.content:nth-child(2n) {...} .content:nth-child(even) {...}
偶数番目の背景色を水色に変える
See the Pen 偶数番目にスタイルを適用 by tamago (@tamago324) on CodePen.
奇数 番目に適用
2n+1
かodd
を指定する
.content:nth-child(2n+1) {...} .content:nth-child(odd) {...}
奇数番目の背景色を水色に変える
See the Pen 奇数番目にスタイルを適用 by tamago (@tamago324) on CodePen.
n番目の要素に適用
n番目だけに適用したい場合、その「数値」を指定する
.content:nth-child(数値) {...}
3番目だけ背景色を水色に変える
.content:nth-child(3) {...}
See the Pen 3番目だけにスタイルを適用 by tamago (@tamago324) on CodePen.
nを指定すると???
n
を指定すると、全てという意味になる
たまたま、n
だけ記述したら全てに適用されて発見した
.content:nth-child(n) {...}
n番目以降の要素に適用
n+数値
とすることで、指定した数値以降の要素にスタイルが適用される
.content:nth-child(n+数値) {...}
3番目以降の要素の背景色を水色に変える
.content:nth-child(n+3) {...}
See the Pen n番目以降の要素にスタイルを適用する by tamago (@tamago324) on CodePen.
n番目以前の要素に適用
-n+数値
とすることで、指定した数値以前の要素にスタイルが適用される
.content:nth-child(-n+数値) {...}
3番目以前の要素の背景色を水色に変える
.content:nth-child(-n+3) {...}
See the Pen QrGMPy by tamago (@tamago324) on CodePen.
応用?
:nth-child()
をつな出て書くことで範囲指定することができる
.content:nth-child(値):nth-child(値) {...}
3番目から5番目まで背景色を水色に変える
.content:nth-child(n+3):nth-child(-n+5) {...}
See the Pen 3から5番目までスタイルを適用 by tamago (@tamago324) on CodePen.