Mẫu trang 404 hiệu ứng động cực ấn tượng không thể bỏ qua

25/05/2017

Tất cả chúng ta đều biết trang 404 được dùng để hiển thị khi người dùng nhập sai địa chỉ , hoặc là có một số link trên trang của các bạn không còn tồn tại. Để các bạn có thêm một sự lựa chọn cho những trang web/blog , mình sẽ chia sẻ cho các bạn trang 404 này với hiệu ứng động cực cool.

Mẫu trang 404 hiệu ứng động cực ấn tượng không thể bỏ qua

Xem Demo | Download

HTML

Khung chuẩn html cho trang 404 này chỉ đơn giản như sau :

<div id="rocket"></div>
<hgroup>
    <h1>Page Not Found</h1>
    <h2>We couldn't find what you were looking for.</h2>
</hgroup>

CSS

Sau đó chúng ta định dạng trang với đoạn css bên dưới.

*{
	margin:0;
	padding:0;
}

body{
	background:url('img/bg.png') no-repeat center center #1d1d1d;
	color:#eee;
	font-family:Corbel,Arial,Helvetica,sans-serif;
	font-size:13px;
}

#rocket{
	width:275px;
	height:375px;
	background:url('img/rocket.png') no-repeat;
	margin:140px auto 50px;
	position:relative;
}

/*	Two steam classes. */

.steam1,
.steam2{
	position:absolute;
	bottom:78px;
	left:50px;
	width:80px;
	height:80px;
	background:url('img/steam.png') no-repeat;
	opacity:0.8;
}

.steam2{

   /*	.steam2 shows the bottom part (dark version)
	*	of the background image.
	*/

	background-position:left bottom;
}

hgroup{

	/* Using the HTML4 hgroup element */

	display:block;
	margin:0 auto;
	width:850px;
	font-family:'Century Gothic',Calibri,'Myriad Pro',Arial,Helvetica,sans-serif;
	text-align:center;
}

h1{
	color:#76D7FB;
	font-size:60px;
	text-shadow:3px 3px 0 #3D606D;
	white-space:nowrap;
}

h2{
	color:#9FE3FC;
	font-size:18px;
	font-weight:normal;
	padding:25px 0;
}

/* Only Needed For The Demo Page */

p.createdBy{
	font-size:15px;
	font-weight:normal;
	margin:50px;
	text-align:center;
	text-shadow:none;
}

a, a:visited {
	text-decoration:none;
	outline:none;
	border-bottom:1px dotted #97cae6;
	color:#97cae6;
}

a:hover{
	border-bottom:1px dashed transparent;
}

jQuery

Cuối cùng là thêm một đoạn jquery để tạo hiệu ứng động.

<script src="jquery.min.js"></script>
<script>
$(window).load(function(){
	
	// We are listening for the window load event instead of the regular document ready.
	
	function animSteam(){
		
		// Create a new span with the steam1, or steam2 class:
		
		$('<span>',{
			className:'steam'+Math.floor(Math.random()*2 + 1),
			css:{
				// Apply a random offset from 10px to the left to 10px to the right
				marginLeft	: -10 + Math.floor(Math.random()*20)
			}
		}).appendTo('#rocket').animate({
			left:'-=58',
			bottom:'-=100'
		}, 120,function(){
			
			// When the animation completes, remove the span and
			// set the function to be run again in 10 milliseconds
			
			$(this).remove();
			setTimeout(animSteam,10);
		});
	}
	
	function moveRocket(){
		$('#rocket').animate({'left':'+=100'},5000).delay(1000)
					.animate({'left':'-=100'},5000,function(){
				setTimeout(moveRocket,1000);
		});
	}

	// Run the functions when the document and all images have been loaded.
		
	moveRocket();
	animSteam();
});
</script>

Chúc các bạn thành công !

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !