読者です 読者をやめる 読者になる 読者になる

攻めは飛車角銀桂守りは金銀三枚

ITとアコースティックギター、そして日常のひとこま。

「秋の日はつるべ落とし」をCSS3で再現する

はてな
スポンサーリンク

気が付けば9月も終わり10月を迎えます。歳をとるごとに時間の進みがとても速く感じられます。
おそらく明日には100歳くらいになっているんじゃないでしょうか。

「秋の日はつるべ落とし」をCSS3で表現してみる

そんな秋を迎えると必ず妻が言いだす言葉があります。

子供たちに注意を促す意味で「昔から『秋の日はつるべ落とし』と言って急に暗くなるから早く帰ってきいや」と。

「秋の日はつるべ落とし」。

日が落ちる速度は地球の自転の速度なんで変わらないでしょうが、確かに日が暮れるの早くなってきました。

9月だけでも30分以上日の入りが早く

以下は2016年の日の入り時刻ですが1ヶ月で30分以上早くなってますね。

日付け 日の入り(東京)
2016/09/01 18:08
2016/09/02 18:07
2016/09/03 18:06
2016/09/04 18:04
2016/09/05 18:03
2016/09/06 18:01
2016/09/07 18:00
2016/09/08 17:59
2016/09/09 17:57
2016/09/10 17:56
2016/09/11 17:54
2016/09/12 17:53
2016/09/13 17:51
2016/09/14 17:50
2016/09/15 17:48
2016/09/16 17:47
2016/09/17 17:45
2016/09/18 17:44
2016/09/19 17:42
2016/09/20 17:41
2016/09/21 17:40
2016/09/22 17:38
2016/09/23 17:37
2016/09/24 17:35
2016/09/25 17:34
2016/09/26 17:32
2016/09/27 17:31
2016/09/28 17:29
2016/09/29 17:28
2016/09/30 17:26

そんな「秋の日はつるべ落とし」をCSS3で再現

そこで暇なんでIT技術者として長年生きて来たすべてをつぎ込んで、今日は「秋の日はつるべ落とし」をCSS3で再現してみましょう。

で、CSS3のソースです。

.otoshi {
    -webkit-animation: yokotobi_animation  0.8s linear infinite;
    -moz-animation:    yokotobi_animation  0.8s linear infinite;
    -ms-animation:     yokotobi_animation  0.8s linear infinite;
    -o-animation:      yokotobi_animation  0.8s linear infinite;
    animation:         yokotobi_animation  0.8s linear infinite;
}
@-webkit-keyframes yokotobi_animation {
     0%    { -webkit-transform:  translateX( 60px ) translateY( 0px ) ; }
    50%    { -webkit-transform:  translateX( 60px ) translateY( 100px ) ; }
   100%    { -webkit-transform:  translateX( 60px ) translateY( 200px ) ; }
}

@-moz-keyframes yokotobi_animation {
     0%    { -moz-transform:  translateX( 60px ) translateY( 0px ) ; }
    50%    { -moz-transform:  translateX( 60px ) translateY( 100px ) ; }
   100%    { -moz-transform:  translateX( 60px ) translateY( 200px ) ; }
}

@-ms-keyframes yokotobi_animation {
     0%    { -ms-transform:  translateX( 60px ) translateY( 0px ) ; }
    50%    { -ms-transform:  translateX( 60px ) translateY( 100px ) ; }
   100%    { -ms-transform:  translateX( 60px ) translateY( 200px ) ; }
}

@-o-keyframes yokotobi_animation {
     0%    { -o-transform:  translateX( 60px ) translateY( 0px ) ; }
    50%    { -o-transform:  translateX( 60px ) translateY( 100px ) ; }
   100%    { -o-transform:  translateX( 60px ) translateY( 200px ) ; }
}

@keyframes yokotobi_animation {
     0%    { transform:  translateX( 60px ) translateY( 0px ) ; }
    50%    { transform:  translateX( 60px ) translateY( 100px ) ; }
   100%    { transform:  translateX( 60px ) translateY( 200px ) ; }
}

割と簡単ですね。
やってることは太陽の出てる方角と水平線からの距離を計算して、地球の自転の速度に光の速度を掛けて3で割って月の引力を引いて時間を秒に直すだけです。

で、これを使うとみごとに「秋の日はつるべ落とし」になるのです。

ではどうぞ。




































こら石投げんな!!

「騙された感」満載のあなたにおすめの記事

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

CSS3 スタンダード・デザインガイド【改訂第2版】 [リフロー版]

CSS3 スタンダード・デザインガイド【改訂第2版】 [リフロー版]

CSS3開発者ガイド 第2版 ―モダンWebデザインのスタイル設計

CSS3開発者ガイド 第2版 ―モダンWebデザインのスタイル設計

でわ、股!!