Code Pháo hoa Javacript

Có thể bạn quan tâm

Hướng dẫn code bắn pháo hoa bằng javacript miễn phí
Bước 1: Tạo file index.html

<!-- SVG Spritesheet -->
<div style="height: 0; width: 0; position: absolute; visibility: hidden;">
	<svg xmlns="http://www.w3.org/2000/svg">
		<symbol id="icon-play" viewBox="0 0 24 24">
			<path d="M8 5v14l11-7z"/>
		</symbol>
		<symbol id="icon-pause" viewBox="0 0 24 24">
			<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
		</symbol>
		<symbol id="icon-close" viewBox="0 0 24 24">
			<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
		</symbol>
		<symbol id="icon-settings" viewBox="0 0 24 24">
			<path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/>
		</symbol>
		<symbol id="icon-sound-on" viewBox="0 0 24 24">
			<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
		</symbol>
		<symbol id="icon-sound-off" viewBox="0 0 24 24">
			<path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
		</symbol>
	</svg>
</div>

<!-- App -->
<div class="container">
	<div class="loading-init">
		<div class="loading-init__header"><h1>Loading</h1></div>
		<h1><div class="loading-init__status">Demo Pháo hoa - DevForum</div></h1>
	</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"><h1>Demo Pháo hoa - DevForum</h1></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>
		</div>
	</div>
	<div class="help-modal">
		<div class="help-modal__overlay"></div>
		<div class="help-modal__dialog">
			<div class="help-modal__header"></div>
			<div class="help-modal__body"></div>
			<button type="button" class="help-modal__close-btn">Close</button>
		</div>
	</div>
</div>

Bước 2: Tạo file index.css


https://devforum.info/phaohoa/reset.min.css

* {
  position: relative;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html {
  background-color: #000;
}

body {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.5);
  font-family: "Russo One", arial, sans-serif;
  line-height: 1.25;
  letter-spacing: 0.06em;
}

.hide {
  opacity: 0;
  visibility: hidden;
}

.remove {
  display: none !important;
}

.blur {
  -webkit-filter: blur(12px);
          filter: blur(12px);
}

.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-init {
  width: 100%;
  align-self: center;
  text-align: center;
  text-transform: uppercase;
}
.loading-init__header {
  font-size: 2.2em;
}
.loading-init__status {
  margin-top: 1em;
  font-size: 0.8em;
  opacity: 0.75;
}

.stage-container {
  overflow: hidden;
  box-sizing: initial;
  border: 1px solid #222;
  margin: -1px;
}
@media (max-width: 840px) {
  .stage-container {
    border: none;
    margin: 0;
  }
}

.canvas-container {
  width: 100%;
  height: 100%;
  transition: -webkit-filter 0.3s;
  transition: filter 0.3s;
  transition: filter 0.3s, -webkit-filter 0.3s;
}
.canvas-container canvas {
  position: absolute;
  mix-blend-mode: lighten;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

.controls {
  position: absolute;
  top: 0;
  width: 100%;
  padding-bottom: 50px;
  display: flex;
  justify-content: space-between;
  transition: opacity 0.3s, visibility 0.3s;
}
@media (min-width: 840px) {
  .controls {
    visibility: visible;
  }
  .controls.hide:hover {
    opacity: 1;
  }
}

.menu {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.42);
  transition: opacity 0.3s, visibility 0.3s;
}
.menu__inner-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: opacity 0.3s;
}
.menu__header {
  margin-top: auto;
  margin-bottom: 8px;
  padding-top: 16px;
  font-size: 2em;
  text-transform: uppercase;
}
.menu__subheader {
  margin-bottom: auto;
  padding-bottom: 12px;
  font-size: 0.86em;
  opacity: 0.8;
}
.menu form {
  width: 100%;
  max-width: 400px;
  padding: 0 10px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.menu .form-option {
  display: flex;
  align-items: center;
  margin: 16px 0;
  transition: opacity 0.3s;
}
.menu .form-option label {
  display: block;
  width: 50%;
  padding-right: 12px;
  text-align: right;
  text-transform: uppercase;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.menu .form-option--select select {
  display: block;
  width: 50%;
  height: 30px;
  font-size: 1rem;
  font-family: "Russo One", arial, sans-serif;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.06em;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.menu .form-option--select select option {
  background-color: black;
}
.menu .form-option--checkbox input {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0;
  opacity: 0.5;
}
@media (max-width: 840px) {
  .menu .form-option select, .menu .form-option input {
    outline: none;
  }
}

.close-menu-btn {
  position: absolute;
  top: 0;
  right: 0;
}

.btn {
  opacity: 0.16;
  width: 50px;
  height: 50px;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: default;
  transition: opacity 0.3s;
}
.btn--bright {
  opacity: 0.5;
}
@media (min-width: 840px) {
  .btn:hover {
    opacity: 0.32;
  }
  .btn--bright:hover {
    opacity: 0.75;
  }
}
.btn svg {
  display: block;
  margin: auto;
}

.credits {
  margin-top: auto;
  margin-bottom: 10px;
  padding-top: 6px;
  font-size: 0.8em;
  opacity: 0.75;
}
.credits a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}
.credits a:hover, .credits a:active {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
}

.help-modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  transition-property: visibility;
  transition-duration: 0.25s;
}
.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;
  -webkit-transform: scale(0.9, 0.9);
          transform: scale(0.9, 0.9);
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-timing-function: ease-in;
  transition-duration: 0.25s;
}
@media (min-width: 840px) {
  .help-modal__dialog {
    font-size: 1.25rem;
    max-width: 500px;
  }
}
.help-modal__header {
  font-size: 1.75em;
  text-transform: uppercase;
  text-align: center;
}
.help-modal__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1em 0;
  padding: 1em 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}
.help-modal__close-btn {
  flex-shrink: 0;
  outline: none;
  border: none;
  border-radius: 2px;
  padding: 0.25em 0.75em;
  margin-top: 0.36em;
  font-family: "Russo One", arial, sans-serif;
  font-size: 1em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background-color: rgba(255, 255, 255, 0.25);
  transition: color 0.3s, background-color 0.3s;
}
.help-modal__close-btn:hover, .help-modal__close-btn:active, .help-modal__close-btn:focus {
  color: #FFF;
  background-color: #09F;
}
.help-modal.active {
  visibility: visible;
  transition-duration: 0.4s;
}
.help-modal.active .help-modal__overlay {
  opacity: 1;
  transition-timing-function: ease-out;
  transition-duration: 0.4s;
}
.help-modal.active .help-modal__dialog {
  opacity: 1;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  transition-timing-function: ease-out;
  transition-duration: 0.4s;
}

Bước 3: copy js vào footer

<script src="https://devforum.info/fscreen.1.0.1.js"></script>
<script src="https://devforum.info/Stage.0.1.4.js"></script>
<script src="https://devforum.info/MyMath.js"></script>
<script src="https://devforum.info/script.js"></script>

Xem Thêm : Chia sẻ giao diện tin tức miễn phí nukeviet 4.5.02

Chúc các bạn có trả nghiệm vui vẻ với sourcode bán pháo hoa. Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút chia sẽ để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm VNCODE.

Xem demo tại : Click

Nguồn: https://vncode.info
Danh mục: Thủ Thuật Chia Sẻ Hay