Tạo hiệu ứng Fixed Background bằng CSS3

Hôm nay mình sẽ giới thiệu cho các bạn một mẫu background dùng khi thiết kế web bằng cách tận dụng thuộc tính background-attachment để tạo hiệu ứng fixed background. Còn hiệu ứng fixed background là gì ? Thì các bạn xem demo ở phía dưới là sẽ hiểu.

Xem Demo | Download

HTML

Cấu trúc của html rất đơn giản, bao gồm phần tử với class .cd-content sẽ là nơi chứa tiêu đề và nội dung. Class .img-1, .img-2 là nơi chúng ta chứa hình và .cd-vertical-nav sẽ là thanh điều hướng.

<section class="cd-fixed-background img-1" data-type="slider-item">
		<div class="cd-content">
			<h2>Title here</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
		</div>
	</section>

	<section class="cd-fixed-background img-2" data-type="slider-item">
		<div class="cd-content light-background">
			<h2>Title here</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
		</div>
	</section>

	<section class="cd-fixed-background img-3" data-type="slider-item">
		<div class="cd-content">
			<h2>Title here</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
		</div>
	</section>

	<section class="cd-fixed-background img-4" data-type="slider-item">
		<div class="cd-content">
			<h2>Title here</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
		</div>
	</section>

	<nav>
		<ul class="cd-vertical-nav">
			<li><a href="#0" class="cd-prev inactive">Next</a></li>
			<li><a href="#0" class="cd-next">Prev</a></li>
		</ul>  
	</nav>

CSS

Đầu tiên, chúng ta định dạng cho phần tiêu đề và nội dung.

.cd-header {
  position: relative;
  height: 100%;
  background-color: #93a748;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.cd-header h1 {
  awidth: 90%;
  color: #f2e6cd;
  text-align: center;
  font-size: 2.2rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
@media only screen and (min-awidth: 768px) {
  .cd-header h1 {
    font-size: 3.6rem;
    font-weight: 300;
  }
}

.cd-fixed-background {
  position: relative;
  padding: 3em 5% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.cd-fixed-background h2, .cd-fixed-background p {
  color: #f2e6cd;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cd-fixed-background h2 {
  font-size: 2.4rem;
  margin-bottom: 1em;
}
.cd-fixed-background p {
  line-height: 1.6;
  font-family: "Merriweather", serif;
}
.cd-fixed-background .light-background h2, .cd-fixed-background .light-background p {
  color: #0f594d;
}

Vì trên các thiết bị nhỏ như điện thoại di động, hiệu ứng fixed background không hiển thị và chúng cũng không sử dụng thuộc tính CSS background-images nữa. Do đó, chúng ta sẽ thêm đoạn css sau để loại bỏ hình ảnh trên những thiết bị này.

.cd-fixed-background .cd-content::after {
  /* phone image on small devices */
  content: ';
  display: block;
  awidth: 100%;
  padding: 60% 0;
  margin: 2em auto 0;
}

Kế tiếp, chúng ta sẽ định dạng cho các hình ảnh làm background.

.cd-fixed-background.img-1 {
  background-color: #bf5138;
}
.cd-fixed-background.img-1 .cd-content::after {
  background: url("../img/img-mobile-1.jpg") no-repeat;
  background-size: 100% auto;
}
.cd-fixed-background.img-2 {
  background-color: #f2e6cd;
}
.cd-fixed-background.img-2 .cd-content::after {
  background: url("../img/img-mobile-2.jpg") no-repeat;
  background-size: 100% auto;
}
.cd-fixed-background.img-3 {
  background-color: #0f594d;
}
.cd-fixed-background.img-3 .cd-content::after {
  background: url("../img/img-mobile-3.jpg") no-repeat;
  background-size: 100% auto;
}
.cd-fixed-background.img-4 {
  background-color: #db9537;
}
.cd-fixed-background.img-4 .cd-content::after {
  background: url("../img/img-mobile-4.jpg") no-repeat;
  background-size: 100% auto;
}
@media only screen and (min-awidth: 768px) {
  .cd-fixed-background {
    height: 100%;
    padding: 0;
  }
  .cd-fixed-background h2 {
    font-size: 3.6rem;
    font-weight: 300;
  }
  .cd-fixed-background p {
    font-size: 1.8rem;
    line-height: 1.8;
  }
  .cd-fixed-background .cd-content {
    awidth: 50%;
    position: absolute;
    left: 5%;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .cd-fixed-background .cd-content::after {
    display: none !important;
  }
  .cd-fixed-background.img-1 {
    background-image: url("../img/img-1.jpg");
  }
  .cd-fixed-background.img-2 {
    background-image: url("../img/img-2.jpg");
  }
  .cd-fixed-background.img-3 {
    background-image: url("../img/img-3.jpg");
  }
  .cd-fixed-background.img-4 {
    background-image: url("../img/img-4.jpg");
  }
}
@media only screen and (min-awidth: 1048px) {
  .cd-fixed-background {
    background-attachment: fixed;
  }
  .cd-fixed-background .cd-content {
    awidth: 40%;
    left: 10%;
  }
}

Và cuối cùng là cho phần điều hướng.

.cd-vertical-nav {
  position: fixed;
  z-index: 2;
  right: 3%;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: none;
}
.cd-vertical-nav a {
  display: block;
  height: 40px;
  awidth: 40px;
  /* image replace */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: transparent url(../img/cd-icon-arrow.svg) no-repeat center center;
  -webkit-transition: opacity 0.2s 0s, visibility 0.2s 0s;
  -moz-transition: opacity 0.2s 0s, visibility 0.2s 0s;
  transition: opacity 0.2s 0s, visibility 0.2s 0s;
}
.cd-vertical-nav a.cd-prev {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  margin-bottom: 10px;
}
.cd-vertical-nav a.inactive {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
@media only screen and (min-awidth: 1200px) {
  .cd-vertical-nav {
    display: block;
  }
}

.no-js .cd-vertical-nav {
  display: none;
}

Các bạn xem đoạn css sẽ thấy thủ thuật để tạo hiệu ứng ở đây chính là việc sử dụng các hình ảnh có cùng kích thước, đặt cùng vị trí, vì thế mà khi chúng ta điều hướng, các bạn sẽ không thấy nó di chuyển mà nằm yên một chỗ. Các bạn có thể tận dụng thủ thuật này để sau này tự thiết kế những mẫu background khác phù hợp với ý tưởng của các bạn.

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

Chuyên Mục: Css

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