記事ディレクトリ
序文
希望と興奮に満ちた2024年、新たな年が始まり、デジタル技術の革新と発展も本格化します。色とりどりの花火は、いつの時代も新年のお祝いに欠かせない要素です。
如何利用技术的魔力，创造出炫目绝伦的数字烟花，成为了技术爱好者们所追寻的目标。この技術ブログでは、コードの魔法を使って、大晦日に彩りを添える見事なデジタル花火効果を作成する方法を紹介します。2024年の到来を共に迎え、技術革新で新たな年への輝かしい序曲を描きましょう。
花火演出演出
花火のスタイルはカスタマイズでき、BGM は本物の花火の音をシミュレートするために選択できます。コードをパッケージ化して友人に送信して開封すると、新年の雰囲気が最高潮に達します。今年は地元を離れて仕事や勉強に忙しかった方もいるかもしれませんし、今年は好きな仕事をして豊かな生活を送っていた方もいるかもしれませんし、今年は満足のいく生活を送れずに新年を迎えた方もいるかもしれません。心配なことはすべて忘れて、家で両親ともっと時間を過ごし、友達とパーティーに出かけましょう。2024 年からもう一度始めましょう!
チュートリアル
コードはパッケージ化されているので、クリックしてダウンロードし、無料で使用してください。自分でリサーチ コードをダウンロードしたい場合でも、初心者で鑑賞用に友人に送りたい場合でも、これを強くお勧めします。以下は、基礎知識ゼロのコードでロマンチックな花火を見せるためのステップバイステップのチュートリアルです。ダウンロードできない場合はメッセージを残してください。
ステップ 1 : コード圧縮パッケージ ファイルをダウンロードして解凍します。
ステップ 2 : 解凍されたフォルダーを開くと、3 つのファイルが表示されます。効果を試したい場合は、.html拡張子が付いているファイルをダブルクリックしてブラウザーで開き、実行します。
ステップ 3 : フロントエンド コードを学習したい場合は、フォルダー内に次の 3 つのファイルが保存されています。
- HTMLファイル
- CSSファイル
- JavaScript ファイル
この 3 つの部分はフロントエンドの三銃士と呼ばれるもので、フロントエンドの基本的な内容であり、フロントエンド技術スタックを構成します。このうち、HTMLは骨組みのような構造部分を担当し、CSS（カスケードスタイルシートとも呼ばれる）はページの美化を担当し、JavaScriptはインタラクティブロジックを担当します。興味のある友人は、この基本的なチュートリアルの記事を読んでください: 1 つの記事で HTML について説明します
初心者にとっては、インターネット上には目もくらむようなチュートリアルがたくさんあります。この方法の方がずっと便利ではないでしょうか？新しいメモ帳ファイルを作成する必要はありません。はは、重要なのはコードで何かを学ぶことです。花火は新年の雰囲気を演出するためのものです。！
ソースコードを表示する
HTMLコード
記事が長いため、コード例の一部のみを示します。HTML はページ全体の一般的な枠組みをサポートしており、ページにボタンや入力ボックスなどを追加する場合に使用します。これはページの骨格であり、ページの構造部分を担当します。
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas超逼真烟花绽放动画</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" type="image/png" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<link rel="icon" type="image/png" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<link rel="apple-touch-icon-precomposed" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- App -->
<div class="container">
<div class="loading-init">
<div class="loading-init__header">Loading</div>
<div class="loading-init__status">Assembling Shells</div>
</div>
<div class="stage-container remove">
<div class="canvas-container">
<canvas id="trails-canvas"></canvas>
<canvas id="main-canvas"></canvas>
</div>
<div class="controls">
<div class="btn pause-btn">
<svg fill="white" width="24" height="24"><use href="#icon-pause" xlink:href="#icon-pause"></use></svg>
</div>
<div class="btn sound-btn">
<svg fill="white" width="24" height="24"><use href="#icon-sound-off" xlink:href="#icon-sound-off"></use></svg>
</div>
<div class="btn settings-btn">
<svg fill="white" width="24" height="24"><use href="#icon-settings" xlink:href="#icon-settings"></use></svg>
</div>
</div>
<div class="menu hide">
<div class="menu__inner-wrap">
<div class="btn btn--bright close-menu-btn">
<svg fill="white" width="24" height="24"><use href="#icon-close" xlink:href="#icon-close"></use></svg>
</div>
<div class="menu__header">Settings</div>
<div class="menu__subheader">For more info, click any label.</div>
<form>
<div class="form-option form-option--select">
<label class="shell-type-label">Shell Type</label>
<select class="shell-type"></select>
</div>
<div class="form-option form-option--select">
<label class="shell-size-label">Shell Size</label>
<select class="shell-size"></select>
</div>
<div class="form-option form-option--select">
<label class="quality-ui-label">Quality</label>
<select class="quality-ui"></select>
</div>
<div class="form-option form-option--select">
<label class="sky-lighting-label">Sky Lighting</label>
<select class="sky-lighting"></select>
</div>
<div class="form-option form-option--select">
<label class="scaleFactor-label">Scale</label>
<select class="scaleFactor"></select>
</div>
<div class="form-option form-option--checkbox">
<label class="auto-launch-label">Auto Fire</label>
<input class="auto-launch" type="checkbox" />
</div>
<div class="form-option form-option--checkbox form-option--finale-mode">
<label class="finale-mode-label">Finale Mode</label>
<input class="finale-mode" type="checkbox" />
</div>
<div class="form-option form-option--checkbox">
<label class="hide-controls-label">Hide Controls</label>
<input class="hide-controls" type="checkbox" />
</div>
<div class="form-option form-option--checkbox form-option--fullscreen">
<label class="fullscreen-label">Fullscreen</label>
<input class="fullscreen" type="checkbox" />
</div>
<div class="form-option form-option--checkbox">
<label class="long-exposure-label">Open Shutter</label>
<input class="long-exposure" type="checkbox" />
</div>
</form>
<div class="credits">
Passionately built by <a href="https://cmiller.tech/" target="_blank">Caleb Miller</a>.
</div>
</div>
</div>
</div>
</div>
<!-- partial -->
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/fscreen%401.0.1.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/Stage%400.1.4.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/MyMath.js'></script><script src="./script.js"></script>
</body>
</html>
CSSコード
もちろん、HTMLだけのページは非常に単調なので、ページを美しくする必要もあり、その際にCSSコードを追加する必要があります。
.help-modal__overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition-property: opacity;
transition-timing-function: ease-in;
transition-duration: 0.25s;
}
.help-modal__dialog {
display: flex;
flex-direction: column;
align-items: center;
max-width: 400px;
max-height: calc(100vh - 100px);
margin: 10px;
padding: 20px;
border-radius: 0.3em;
background-color: rgba(0, 0, 0, 0.4);
opacity: 0;
transform: scale(0.9, 0.9);
transition-property: opacity, transform;
transition-timing-function: ease-in;
transition-duration: 0.25s;
}
JavaScript
JavaScript はコードの対話ロジックを処理しますが、これは非常に重要な部分であると同時に、難しい部分でもあります。
function toggleSound(toggle) {
if (typeof toggle === 'boolean') {
store.setState({
soundEnabled: toggle });
} else {
store.setState({
soundEnabled: !store.state.soundEnabled });
}
}
function toggleMenu(toggle) {
if (typeof toggle === 'boolean') {
store.setState({
menuOpen: toggle });
} else {
store.setState({
menuOpen: !store.state.menuOpen });
}
}
function updateConfig(nextConfig) {
nextConfig = nextConfig || getConfigFromDOM();
store.setState({
config: Object.assign({
}, store.state.config, nextConfig)
});
configDidUpdate();
}
// Map config to various properties & apply side effects
function configDidUpdate() {
const config = store.state.config;
quality = qualitySelector();
isLowQuality = quality === QUALITY_LOW;
isNormalQuality = quality === QUALITY_NORMAL;
isHighQuality = quality === QUALITY_HIGH;
if (skyLightingSelector() === SKY_LIGHT_NONE) {
appNodes.canvasContainer.style.backgroundColor = '#000';
}
Spark.drawWidth = quality === QUALITY_HIGH ? 0.75 : 1;
}
新年の願い
2024 年の新年にあたり、皆様のさらなるご多幸、ご健康、ご成功をお祈り申し上げます。あなたが確固たる信念を持ち、確実な一歩を踏み出し、夢を実現し、より良い未来を創造してくださいますように。あなたのすべての願いが叶い、すべてがうまくいき、幸福と健康、そして新年に限りない喜びが訪れることを願っています。2024 年が希望と光に満ち、あなたに無限の喜びをもたらしますように