Bài viết này hướng dẫn cách tạo một trang khởi động (splash screen) tĩnh cho trang web bằng cách sử dụng framework Bootstrap và một plugin hoạt ảnh cá dựa trên jQuery. Trang này sẽ hiển thị một hoạt ảnh cá trong 5 giây trước khi chuyển hướng người dùng đến trang chính.
Ý tưởng chung
Mục tiêu là tạo một trang chào mừng độc đáo với hoạt ảnh hấp dẫn, mang lại trải nghiệm thú vị cho người dùng trong khi chờ đợi trang chính tải. Trang này sử dụng một plugin hoạt ảnh cá có sẵn và một hình ảnh tiêu đề tùy chỉnh.
Thành phần chính
Khối hình ảnh tiêu đề
Phần tử HTML sau đây tạo ra một khối chứa hình ảnh tiêu đề. Khối này được căn giữa và sẽ hiển thị trong 5 giây trước khi chuyển hướng.
<div id="mainHolder">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="div_center_byHeight_50percent">
<a href="index.html"><img src="img/_Main_Tiele.png" alt="Tiêu đề chính"></a>
</div>
</div>
<div class="col-lg-4"></div>
</div>
</div>CSS để căn giữa hình ảnh:
.div_center_byHeight_50percent {
margin-top: 50%;
}Tệp mã nguồn
Tệp JavaScript tùy chỉnh (firstSee.js)
Tệp này xử lý việc chuyển hướng người dùng đến index.html sau 5 giây.
$(window).bind("load", function() {
setTimeout(function() {
window.location.href = "index.html";
}, 5000);
});Tệp CSS tùy chỉnh (JQM_fish_firsetSee_style.css)
Tệp CSS này định dạng giao diện cho trang khởi động, bao gồm cả việc ẩn thanh cuộn và thiết lập kiểu dáng cơ bản.
html {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-webkit-touch-callout: none;
background: #ffffff;
}
body {
margin: 0;
padding: 0;
overflow: hidden; /* Ẩn thanh cuộn */
}
#mainHolder {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 15px;
text-align: center;
width: 100%;
height: auto;
position: absolute;
pointer-events: none; /* Cho phép các sự kiện chuột đi qua */
}
.contentWrapper {
width: 80%;
max-width: 600px;
margin: 5% auto;
}
.header {
font-size: 60px;
}
#settingHolder {
width: 450px;
border: #999 solid 2px;
text-align: left;
font-size: 12px;
margin: 5% auto;
padding: 5px 30px;
pointer-events: auto; /* Cho phép các sự kiện chuột trên phần này */
}
.columnBig {
width: 100%;
float: left;
}
.column {
width: 45%;
margin: 2.5%;
float: left;
}
.column span {
font-weight: bold;
}
.row {
margin: 0 0 20px;
}
.slider {
height: 5px;
margin-top: 10px;
}
.ui-slider .ui-slider-handle {
width: 10px;
height: 15px;
}
#colour {
width: 50%;
height: 20px;
margin-top: 10px;
border: #CCC solid 1px;
}
#reset {
width: 20%;
height: 20px;
margin-left: 40%;
}
#canvasHolder {
width: 100%;
height: 100%;
}
.ignorePadding {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Viewport meta tags for responsive design */
@-webkit-viewport { width: device-width }
@-moz-viewport { width: device-width }
@-ms-viewport { width: device-width }
@-o-viewport { width: device-width }
@viewport { width: device-width }Tệp HTML chính (JQM_fish_firsetSee.html)
Đây là tệp HTML chính, bao gồm các liên kết đến các tệp CSS, JavaScript cần thiết và cấu trúc DOM cho trang khởi động và hoạt ảnh.
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Hoạt ảnh Cá</title>
<meta name="Title" content="Hoạt ảnh Cá" />
<meta name="description" content="Fish Animation là một plugin jQuery biến đổi phần tử HTML5 canvas thành hoạt ảnh cá có thể cấu hình bằng thư viện CreateJS." />
<meta name="keywords" content="cá, hoạt ảnh, plugin, canvas, bơi, bơi lội, nước, quay, biển, hồ" />
<!-- Thư viện CSS -->
<link rel="stylesheet" href="css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/indexCss1.css" />
<link rel="stylesheet" type="text/css" href="css/SmokeNote_Style.css" />
<link rel="stylesheet" type="text/css" href="css/CommonStyle.css" />
<link rel="stylesheet" type="text/css" href="animate.min.css" />
<link rel="stylesheet" type="text/css" href="css/HairLossGuide.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/JQM_fish_firsetSee_style.css"/>
<!-- Thư viện JavaScript -->
<script src="js/jquery-3.4.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/CommonStyle.js"></script>
<script src="js/firstSee.js"></script>
</head>
<body>
<!-- Khối chứa tiêu đề -->
<div id="mainHolder">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="div_center_byHeight_50percent">
<a href="index.html"><img src="img/_Main_Tiele.png" alt="Tiêu đề chính"></a>
</div>
</div>
<div class="col-lg-4"></div>
</div>
</div>
<!-- Vùng chứa canvas cho hoạt ảnh cá -->
<div id="canvasHolder">
<canvas id="fishHolder" width="800" height="500"></canvas>
</div>
<!-- Các tệp script của plugin hoạt ảnh -->
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
<script src="js/jqColorPicker.min.js"></script>
<script src="js/createjs-2015.11.26.min.js"></script>
<script src="js/fish-animation.js"></script>
<!-- Các hàm xử lý và cấu hình -->
<script>
$(function() {
$('#fishHolder').fishAnimation(); // Khởi tạo hoạt ảnh cá
$(window).resize(function() {
resizeFunc(); // Xử lý thay đổi kích thước cửa sổ
});
resizeFunc(); // Điều chỉnh kích thước ban đầu
buildSettings(); // Xây dựng các tùy chọn cài đặt
});
function buildSettings() {
// Cấu hình các thanh trượt cho các tham số hoạt ảnh (số lượng cá, tốc độ, v.v.)
$("#numberFish").slider({ /* ... */ });
$("#swimspeed").slider({ /* ... */ });
$("#downspeed").slider({ /* ... */ });
$("#rounder").slider({ /* ... */ });
$("#turning").slider({ /* ... */ });
$("#scaleRange").slider({ /* ... */ });
$("#swimTimer").slider({ /* ... */ });
// Cấu hình bộ chọn màu
$('#colour').colorPicker({
renderCallback: function($elm) {
$('#colour').val(this.color.colors.HEX);
$('#fishHolder').fishAnimation('update', 'colour', '#' + this.color.colors.HEX);
}
});
// Xử lý nút Reset
$('#reset').click(function() {
// Đặt lại giá trị các thanh trượt và cập nhật hoạt ảnh
// ... (chi tiết về việc đặt lại các giá trị slider) ...
$('#fishHolder').fishAnimation(); // Khởi tạo lại hoạt ảnh sau khi reset
});
}
function resizeFunc() {
windowW = $(window).width();
windowH = $(window).height();
var gameCanvas = document.getElementById("fishHolder");
gameCanvas.width = windowW;
gameCanvas.height = windowH;
$('#mainHolder').css('width', windowW);
$('#mainHolder').css('height', windowH);
// Cập nhật kích thước canvas cho plugin hoạt ảnh
$('#fishHolder').fishAnimation('update', 'canvasW', windowW);
$('#fishHolder').fishAnimation('update', 'canvasH', windowH);
}
</script>
</body>
</html>