N予備校の「プログラミング入門 Webアプリ」をアーカイブ動画とともに受講しています。
今回は第一章13節「はじめてのCSS」と14節「CSSを使ったプログラミング」を受講しました。
メモ
1. marginは要素の外側、paddingは要素の内側
2. CSSではclass属性を使うことが多い
3. 条件文はできるだけシンプルに
練習問題: JavaScriptとCSSでアニメーション
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>
CSS を使ったプログラミング
</title>
<link rel="stylesheet" href="css-programming.css">
</head>
<body>
<h1 id="header" class="face">CSS を使ったプログラミング</h1>
<script src="animation.js"></script>
</body>
</html>
.face{
/*color: darkblue; */
color: red;
}
.back{
/*color: lightgray;*/
color: red;
/*opacity: 0.4;*/
}
//header 取得
let header = document.getElementById('header');
//角度
let degree = 0;
//透明度
let opacity = 0;
//加算フラグ
let isPositive = true;
//headerを回転させる
function rotateHeader(){
//6°ずつ回転させる
degree += 6;
//裏を向いた瞬間にclassを変更する
//361° と 1° は同じなので、360で割った余りが現在の角度になる。
degree %= 360;
//表を向いているとき：0 以上 90 未満 か 270 以上 360 未満
/*if((0 <= degree && degree < 90) || (270 <= degree && degree < 360)){
//表
header.className = 'face';
}else{
//裏を向いているとき：90 以上 270 未満
header.className = 'back';
}*/
//↓↓ 条件をシンプルに
if(90 <= degree && degree < 270){
header.className = 'back';
}else{
header.className = 'face';
}
//回転
header.style.transform = 'rotateX(' + degree +'deg)';
//header.style.transform = 'rotate3d(1, 1, 1, ' + degree +'deg)';
//透明度の設定
if(isPositive){
opacity += 0.1;
if(opacity >= 1){
//加算フラグを消す
isPositive = false;
}
}else{
opacity -= 0.1;
if(opacity <= 0){
//加算フラグを立てる
isPositive = true;
}
}
header.style.opacity = opacity;
}
//20ミリ秒ごとに実行してアニメーションさせる
//setInterval(rotateHeader, 20);
setInterval(rotateHeader, 100);
今回はh1タグ内の文字列を回転させる、というもの。
あと追加で透明度も変えてます。
degree %= 360
のあたり、自力では全然思いつかないので、ただすごいなぁと感心するばかりでした。
まとめ
アニメーションって手段は色々あるけれど、どれも個人的にすごく感動を覚えます。
あとはもっと頭を柔らかくしていきたい。
そういえば次はCSS編です、と言いながらメインはがっつりJavaScriptでした。
↧