Xmas Light Effect Tutorial with Notepad++, CSS, JavaScript

MyLớp.edu.vn Hướng dẫn tạo hiệu ứng đèn nhấp nháy trên các trang web bằng Notepad++, CSS và JavaScript trình bày trong các dịp Noel, năm mới…

Xmas Light Effect Tutorial with Notepad++, CSS and JavaScript

Xmas Light Effect Tutorial with Notepad++, CSS and JavaScript

Xmas Light Effect Tutorial with Notepad++, CSS and JavaScript

Cấp độ: Dễ

Yêu cầu tối thiểu:

– HTML, CSS cơ bản

– JavaScript cơ bản

View Demo   Download Files

Bước 1: Cấu hình HTML

Mở file index.html bằng phần mềm Notepad++. Trong phần head của trang web, liên kết tới file style.css:

HTML Code: index.html
1
<link rel="stylesheet" href="css/style.css">

Tại vị trí bất kỳ trong phần body, chèn đoạn code sau:

1
<div id="xmas-layer" class="light1"></div>

Đây chính là Layer dùng để hiển thị đèn nhấp nháy cho trang web.

Bước 2: Cấu hình CSS

Mở file style.css trong Notepad++, thêm vào đoạn code sau:

CSS Code: style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#xmas-layer {
	position: absolute;
	width: 956px;
	height: 180px;
	top: 0;
	left: 50%;
	margin-left: -478px;
}
.light1 {
	background: url('../images/light.png') no-repeat 0 0;
}
.light2 {
	background: url('../images/light.png') no-repeat 0 -180px;
}

File ảnh light.png chứa hình ảnh hai cái dây đèn nhấp nháy, class .light1 dùng để lấy phần ảnh phía trên, class .light2 dùng để lấy hình ảnh phía dưới. Kích thước của file ảnh là 956 x 362 px.

File ảnh light.png chứa hình ảnh hai cái dây đèn nhấp nháy

File ảnh light.png chứa hình ảnh hai cái dây đèn nhấp nháy

Bước 3: Tạo hiệu ứng đèn nhấp nháy bằng JavaScript

Trong phần head của trang web, chèn vào đoạn code JavaScript sau:

JavaScript Code: index.html
1
2
3
4
5
6
7
8
9
10
11
var iTimerId = setInterval(change_light, 1000);
var iIndex = 1;
function change_light() {
	if (iIndex == 1) {
		iIndex = 2;
		document.getElementById("xmas-layer").className = "light1";
	} else {
		iIndex = 1;
		document.getElementById("xmas-layer").className = "light2";
	}
}

Lưu trang web, xem kết quả trên trình duyệt, bạn sẽ thấy đèn nhấp nháy phía trên trang web với chu kỳ là 1 giây (1000 mili giây). Bạn có thể thay đổi con số này theo ý thích để tăng hoặc giảm tốc độ nhấp nháy.

Chúc bạn làm thực hành thành công hiệu ứng đơn giản này.

Cheers,

AZDigi - Hosting WordPress tốt nhất!
The following two tabs change content below.
Tôi là kỹ sư Cơ khí, kỹ sư CNTT trường ĐH Bách Khoa Hà Nội. Tôi hoạt động trong lĩnh vực CNTT, bao gồm Software Development, Web Design, Web Development, Interactive Multimedia and Mobile App, Mobile Game Development. Tôi rất yêu công nghệ và tôi lập ra trang web này để chia sẻ kiến thức về công nghệ với mọi người.

Bình luận

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

*
*
Website