今年最大の寒波とテレビで連日報道されますが、岩手県内でも各所で本格的な降雪になりましたね。
毎年のことですが雪の降り始めは道路状況も当然悪化し事故車を見かけることも間々あるものの、気温が-5℃くらいまで落ちてくると路面の雪も半端に溶けることがなくなり車の運転も安定してきます。
さて、雪を見ながらふと思い立ちホームページ上で雪の降るような演出を入れられる簡単なコードを書いてみました。
ざっくりと処理を説明すると、
<div class="snow-wrapper"></div>
で枠を用意して、Jqueryで下記コードを書くと枠の中に500個くらいオブジェクトが生成されるので
$(function(){
let count = 1;
snowDroop=setInterval(function(){
var random = Math.floor( Math.random() * 99 ) + 1;
var size = Math.floor( Math.random() * 10 ) + 10;
var type = Math.floor( Math.random() * 1 ) + 1;
$('.snow-wrapper').append('');
count++;
if(count == 500){
clearInterval(snowDroop);
}
} , 100);
});
最後にCSSでレイアウトとアニメーションを入れる感じです。
.snow-wrapper{
position: relative;
min-height: 100vh;
min-height: 100dvh;
width: 100%;
}
.drop{
position: absolute;
margin: auto;
width:1em;
height:1em;
background:rgb(188, 214, 246);
border-radius: 50%;
}
.fall1{
animation: fall1 10s infinite linear;
}
.fall2{
animation: fall2 10s infinite linear;
}
@keyframes fall1 {
0%{
top:-10%;
transform: translateX(10px);
}
25%{
transform: translateX(-10px);
}
50%{
transform: translateX(10px);
}
75%{
transform: translateX(-10px);
}
100%{
top:100%;
transform: translateX(10px);
}
}
@keyframes fall2 {
0%{
top:-10%;
transform: translateX(-10px);
}
25%{
transform: translateX(10px);
}
50%{
transform: translateX(-10px);
}
75%{
transform: translateX(10px);
}
100%{
top:100%;
transform: translateX(-10px);
}
}
表示画面サイズによってCSSで雪のサイズ変更が必要。PCで遊んでいたのでスマホだとボタ雪みたいになります。
思い付きで画面上それっぽく動くレベルにしただけなので、動作の安定性や処理の負荷などを考えると乱数の生成やオブジェクトの扱いについてもう少し精査すべきですけれど、単純に雪らしいものを降らすだけならこんな感じで実装できます。
CSSで作る雪オブジェクトにSVGファイルで用意した雪の結晶などを当てはめるとよりそれらしく見えるかもしれません。
皆さま雪道は気をつけましょう。
ホームページやWEBアプリケーションのご相談はこちら
ホームページやWEBアプリケーションでお困りごとがございましたら株式会社コネクトHPのお問い合わせからお気軽にご連絡ください。新規開発やリニューアルはもちろん昔作ったけれど手つかずになってしまっているプログラムの修正まで、ちょっとしたご相談にも丁寧に対応します。
最近の記事
-
SakanaAIって知ってますか?
カテゴリ:コネクト動画コンテンツ 更新:2024-09-05 -
テイクダウンという言葉を聞いたことはありますか?
カテゴリ:コネクト動画コンテンツ 更新:2024-09-03 -
73万3820人分の個人情報が漏えい
カテゴリ:コネクト動画コンテンツ 更新:2024-08-30 -
WEBブラウザは最新ですか?
カテゴリ:コネクト動画コンテンツ 更新:2024-08-27 -
特殊詐欺にご用心
カテゴリ:コネクト動画コンテンツ 更新:2024-08-22
更新担当者
- チータ
WEBサービス・システム開発担当 - タク
写真撮影・動画制作担当 - コーイチ
AI研究者