Tất cả bài viết  |  Lập trình Jquery

  • zoom in
  • zoom out
  • text align left
  • text align center
  • text align right
  • Chỉnh màu chữ
  • Làm đậm

Hướng dẫn sử dụng jQuery End Page Box để tạo quảng cáo góc phải trang web

Hướng dẫn sử dụng jQuery End Page Box để tạo quảng cáo góc phải trang web

Phần định nghĩa HTML cho trang web
 
 
 
  
 
   
 
    
Cách sử dụng jQuery End Page Box để tạo quảng cáo góc phải trang web
 
    
Là một Jquery cho phép chúng ta đặt quảng cáo ở góc trang web khi cuộn thanh trượt xuống phía dưới.
 
    
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."

    
Hãy tạo nhiều đoạn bằng thẻ p...
Phần định nghĩa HTML cho nội dung cần quảng cáo
 
 
 
 Học thiết kế giao diện website chuẩn Mobile 
 

 
 
 Học HTML5, CSS3, RWD, Javascript, Bootstrap Online
Phần định nghĩa Jquery để gọi nội dung quảng cáo
Phần định nghĩa CSS cho nội dung của trang & box chứa quảng cáo
 

.wrapper {	
      width:auto;	
      margin-left:auto;	
      margin-right:auto;
}

h1 {	
margin-top: 10px;	
color: #6D461D;	
margin-bottom: 5px;	
font-size: 24px;	
text-align:center;
}

h2 {	
color: #444;	
font-weight: bold;	
margin: 0px;	
font-size: 14px;	
margin-bottom: 10px;	
text-align:center;	
}

.endpage-box {	
width:400px;	
height:210px;	
background: white;
}

.page_container {	
box-shadow: 0 3px 5px rgba(0,0,0,0.55);	
background: white;	
max-width: 960px;	
margin-left:auto;	
margin-right:auto;	
padding: 10px;	
box-sizing: border-box;	
-moz-box-sizing: border-box;	
-webkit-box-sizing: 
border-box;	
text-align: left;	
color: black;
}

.page_container p {	
color: black;	
font-size: 14px;	
font-family:Arial;	
text-align:left;	
font-weight:normal;
}
Phần định nghĩa hiệu ứng CSS3 cho box chứa quảng cáo
 

.endpage-box {  
display: none;  
position: fixed;  
bottom: 0px;  
right: 10px; 
background:#F00E12;  
width: 400px;  
padding: 0px;  
box-shadow: 0 2px 3px rgba(0,0,0,0.5);  
-moz-box-shadow: 0 2px 3px rgba(0,0,0,0.5);  
-webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.5);
}


[class*="animation-"] {  
-webkit-animation-duration: 500ms;  
-moz-animation-duration: 500ms;  
-o-animation-duration: 500ms;  
animation-duration: 500ms;
}


.animation-flyInRight {  
-webkit-animation-name: flyInRight;	
-moz-animation-name: flyInRight;	
-o-animation-name: flyInRight;	
animation-name: flyInRight;
}


.animation-flyOutRight {  
-webkit-animation-name: flyOutRight;	
-moz-animation-name: flyOutRight;	
-o-animation-name: flyOutRight;	
animation-name: flyOutRight;
}


.animation-flyInLeft {  
-webkit-animation-name: flyInLeft;	
-moz-animation-name: flyInLeft;	
-o-animation-name: flyInLeft;	
animation-name: flyInLeft;
}


.animation-flyOutLeft {  
-webkit-animation-name: flyOutLeft;	
-moz-animation-name: flyOutLeft;	
-o-animation-name: flyOutLeft;	
animation-name: flyOutLeft;
}


.animation-flyInUp {  
-webkit-animation-name: flyInUp;	
-moz-animation-name: flyInUp;	
-o-animation-name: flyInUp;	
animation-name: flyInUp;
}


.animation-flyOutUp {  
-webkit-animation-name: flyOutUp;	
-moz-animation-name: flyOutUp;	
-o-animation-name: flyOutUp;	
animation-name: flyOutUp;
}


.animation-flyInDown {  
-webkit-animation-name: flyInDown;	
-moz-animation-name: flyInDown;	
-o-animation-name: flyInDown;	
animation-name: flyInDown;
}


.animation-flyOutDown {  
-webkit-animation-name: flyOutDown;	
-moz-animation-name: flyOutDown;	
-o-animation-name: flyOutDown;	
animation-name: flyOutDown;
}

@-webkit-keyframes flyInRight {	

0% {	
	opacity: 0;	
	-webkit-transform: translateX(3000px);	
}


	100% {	
	-webkit-transform: translateX(0);	
}
}


@-moz-keyframes flyInRight {	
0% {	
	opacity: 0;	
	-moz-transform: translateX(3000px);	
}


	100% {	
	-moz-transform: translateX(0);	
}
}


@-o-keyframes flyInRight {	
0% {	
	opacity: 0;	
	-o-transform: translateX(3000px);	
}


	100% {	
	-o-transform: translateX(0);	
}
}

@keyframes flyInRight {	
0% {	
	opacity: 0;	
	transform: translateX(3000px);	
}


	100% {	
	transform: translateX(0);	}
}


@-webkit-keyframes flyOutRight {	
0% {	
	-webkit-transform: translateX(0);	
}


	100% {	  
opacity: 0;	
	-webkit-transform: translateX(3000px);	
}
}

@-moz-keyframes flyOutRight {	

0% {	
	-moz-transform: translateX(0);	
}


	100% {	  
opacity: 0;	
	-moz-transform: translateX(3000px);	
}
}


@-o-keyframes flyOutRight {	
0% {	
	-o-transform: translateX(0);	
}


	100% {	 
opacity: 0;	
	-o-transform: translateX(3000px);	
}
}


@keyframes flyOutRight {
	0% {	
	transform: translateX(0);	
}

	
100% {	  
opacity: 0;		transform: translateX(3000px);	
}
}


@-webkit-keyframes flyInLeft {	

0% {	
	opacity: 0;	
	-webkit-transform: translateX(-3000px);	

}


	100% {	
	-webkit-transform: translateX(0);
	}
}


@-moz-keyframes flyInLeft {	

0% {	
	opacity: 0;	
	-moz-transform: translateX(-3000px);	
}


	100% {	
	-moz-transform: translateX(0);	
}
}


@-o-keyframes flyInLeft {	
0% {	
	opacity: 0;		-o-transform: translateX(-3000px);	
}


	100% {	
	-o-transform: translateX(0);	
}
}


@keyframes flyInLeft {	
0% {	
	opacity: 0;		transform: translateX(-3000px);	
}


	100% {	
	transform: translateX(0);	
}
}

@-webkit-keyframes flyOutLeft {	
0% {	
	-webkit-transform: translateX(0);	

}


	100% {	
	opacity: 0;		-webkit-transform: translateX(-3000px);	
}
}


@-moz-keyframes flyOutLeft {	
0% {	
	-moz-transform: translateX(0);	
}


	100% {	

	opacity: 0;		-moz-transform: translateX(-3000px);	
}}


@-o-keyframes flyOutLeft {	

0% {		-o-transform: translateX(0);	}

	100% {		opacity: 0;		-o-transform: translateX(-3000px);	}}


@keyframes flyOutLeft {	

0% {		transform: translateX(0);	}


	100% {		opacity: 0;		transform: translateX(-3000px);	
}}


@-webkit-keyframes flyInUp {	
0% {		opacity: 0;		-webkit-transform: translateY(-2000px);	}


	100% {		-webkit-transform: translateY(0);	}}


@-moz-keyframes flyInUp {	
0% {		opacity: 0;		-moz-transform: translateY(-2000px);	}


	100% {		-moz-transform: translateY(0);	}}


@-o-keyframes flyInUp {	

0% {		opacity: 0;		-o-transform: translateY(-2000px);	}

	100% {		-o-transform: translateY(0);	}}


@keyframes flyInUp {	
0% {		opacity: 0;		transform: translateY(-2000px);	}

	100% {		transform: translateY(0);	}}


@-webkit-keyframes flyOutUp {	
0% {		-webkit-transform: translateY(0);	}

	100% {		opacity: 0;		-webkit-transform: translateY(-2000px);	}}


@-moz-keyframes flyOutUp {	
0% {		-moz-transform: translateY(0);	}


	100% {		opacity: 0;		-moz-transform: translateY(-2000px);	}}


@-o-keyframes flyOutUp {	
0% {		-o-transform: translateY(0);	}

	100% {		opacity: 0;		-o-transform: translateY(-2000px);	}}


@keyframes flyOutUp {	
0% {		transform: translateY(0);	}


	100% {		opacity: 0;		transform: translateY(-2000px);	}}



@-webkit-keyframes flyInDown {	
0% {		opacity: 0;		-webkit-transform: translateY(2000px);	}


	100% {		-webkit-transform: translateY(0);	}}


@-moz-keyframes flyInDown {	
0% {		opacity: 0;		-moz-transform: translateY(2000px);	}


	100% {		-moz-transform: translateY(0);	}}


@-o-keyframes flyInDown {	
0% {		opacity: 0;		-o-transform: translateY(2000px);	}

	100% {		-o-transform: translateY(0);	}}


@keyframes flyInDown {	
0% {		opacity: 0;		transform: translateY(2000px);	}


	100% {		transform: translateY(0);	}}


@-webkit-keyframes flyOutDown {	
0% {		-webkit-transform: translateY(0);	}


	100% {		opacity: 0;		-webkit-transform: translateY(2000px);	}}


@-moz-keyframes flyOutDown {	
0% {		-moz-transform: translateY(0);	}

	100% {		opacity: 0;		-moz-transform: translateY(2000px);	}}


@-o-keyframes flyOutDown {	
0% {		-o-transform: translateY(0);	}

	100% {		opacity: 0;		-o-transform: translateY(2000px);	}}

@keyframes flyOutDown {	
0% {		transform: translateY(0);	}

	100% {		opacity: 0;		transform: translateY(2000px);	}}
Xem  demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất

Lập trình Jquery   Xem (4036)   Học thiết kế web giá rẻ

Bạn có thể quan tâm

Tạo hiệu ứng phóng to sản phẩm Học lập trình web

Hướng dẫn cách tạo Slide bài viết bằng Jquery Học lập trình web

Hướng dẫn tạo Slidebox quảng cáo bằng Jquery Học lập trình web

Hướng dẫn tạo menu dọc cho website Học lập trình web

Cách tạo chức năng xem thêm bằng Jquery Học lập trình web

Hướng dẫn tạo Marquee bằng Jquery Học lập trình web

Hướng dẫn cách tạo hiệu ứng chữ cầu vòng Học lập trình web

Hướng dẫn cách tạo Menu dọc theo chuẩn RWD Học lập trình web

Hướng dẫn tạo chữ lật bằng JQUERY Học lập trình web

Hướng dẫn tạo cửa sổ Popup đơn giản bằng JQUERY Học lập trình web

Tìm kiếm phổ biến