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 (3730)   Học thiết kế web giá rẻ