Hiệu ứng chuyển ảnh cực kỳ đẹp

Hôm nay Chothemewp muốn chia sẻ với các bạn một đoạn mã để tạo hiệu ứng chuyển đổi ảnh tuyệt vời cho WordPress. Đây là một đoạn mã rất chuyên nghiệp, hoàn hảo cho các nhà thiết kế web muốn làm cho trang web của mình trở nên đặc biệt hơn.

Phương pháp triển khai rất đơn giản và dễ hiểu. Hãy cùng Chothemewp thực hiện điều này cùng nhau nhé.

Bước 1. Thêm mã sau vào HTML của bạn

<div class="flex-container">
	<div class="spinner"><p>
		<div class="cube1"></div>
		<div class="cube2"></div>
		Loading...
		</p>
	</div>
	<div class="flex-slide home">
		<div class="flex-title flex-title-home">Home</div>
		<div class="flex-about flex-about-home"><p>Click here to navigate to the home section of the website</p></div>
	</div>
	<div class="flex-slide about">
		<div class="flex-title">About</div>
		<div class="flex-about"><p>Click here to navigate to the About section of the website</p></div>
	</div>
	<div class="flex-slide work">
		<div class="flex-title">Work</div>
		<div class="flex-about"><p>Listing relevant snippets of work:</p>
			<ul>
				<li>First piece of work</li>
				<li>Second piece of work</li>
				<li>Third piece of work</li>
			</ul>
		</div>
	</div>
	<div class="flex-slide contact">
		<div class="flex-title">Contact</div>
				<div class="flex-about">
					<p>Use the contact form below</p>
					<form class="contact-form">
						<p>Email <input type="text" name="email"></p>
						<p>Comment <textarea type="text" name="comment" row="5"></textarea></p>
						<p><input type="submit" name="email" value="Send Message"></p>
					</form>

		</div>
	</div>
</div>

Mã HTML này đại diện cho cấu trúc của một trang web. Hãy chia nhỏ nó ra từng bước một:

Cấu trúc thùng chứa:
- Vùng chứa ngoài cùng có lớp flex-container. Nó có thể sử dụng CSS Flexbox hoặc Grid để sắp xếp các phần tử con của nó theo một bố cục cụ thể.
Đang tải Spinner:
- Bên trong flex-container, có một divlớp spinner.
- Nó chứa hai divphần tử trống với các lớp cube1và cube2.
- Có một pthẻ chứa dòng chữ “Đang tải…” bên trong tệp spinner. Đây có thể là dấu hiệu của hoạt ảnh đang tải.
Phần trang:
- Theo sau vòng quay, có các phần khác nhau trong tệp flex-container.
Phần Trang chủ:
- Một phần có lớp flex-slidevà home.
- Nó chứa tiêu đề của lớp flex-title-homevà nội dung “Trang chủ”.
- Có một khu vực mô tả với lớp flex-about-home, có thể chứa thông tin hoặc hướng dẫn cho phần trang chủ.
Về phần:
- Một phần khác có lớp flex-slidevà about.
- Nó chứa tiêu đề của lớp flex-titlevà dòng chữ “Giới thiệu”.
- Có một khu vực mô tả với lớp flex-aboutcó khả năng cung cấp thông tin hoặc hướng dẫn cho phần Giới thiệu.
Phần công việc:
- Tương tự như phần Giới thiệu, có một phần có lớp flex-slidevà work.
- Nó chứa tiêu đề của lớp flex-titlevà dòng chữ “Work”.
- Có một khu vực mô tả với lớp flex-aboutdường như liệt kê các đoạn công việc ở ulđịnh dạng danh sách không có thứ tự ( ).
Phần liên hệ:
- Một phần khác có lớp flex-slidevà contact.
- Nó chứa tiêu đề của lớp flex-titlevà dòng chữ “Liên hệ”.
- Có một khu vực mô tả với lớp flex-about, có khả năng cung cấp thông tin hoặc hướng dẫn cho phần Liên hệ.
- Nó cũng chứa a formvới lớp contact-form, có thể dùng để người dùng gửi email và nhận xét của họ.

Cấu trúc HTML này thiết lập bố cục với các phần dành cho Trang chủ, Giới thiệu, Cơ quan và Liên hệ. Các lớp được xác định trong mỗi phần có thể được sử dụng để tạo kiểu cho các phần này bằng CSS và biểu mẫu có thể được sử dụng để ghi lại thông tin đầu vào và tương tác của người dùng.

Bước 2. Thêm Css vào theme của bạn

@import url('https://fonts.googleapis.com/css?family=Raleway');

$defaultSeconds: 3s;



.flex-container {
	position: absolute;
	height: 100vh;
	width: 100%;
	display: -webkit-flex; /* Safari */
	display: flex;
	overflow: hidden;
	@media screen and (max-width: 768px) {
		flex-direction: column;
	}
}
.flex-title {
	color: #f1f1f1;
	position: relative;
	font-size: 6vw;
	margin: auto;
	text-align: center;
	transform: rotate(90deg);
	top: 15%;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	@media screen and (max-width: 768px) {
		transform: rotate(0deg) !important;
	}
}
.flex-about {
	opacity: 0;
	color: #f1f1f1;
	position: relative;
	width: 70%;
	font-size: 2vw;
	padding: 5%;
	top: 20%;
	border: 2px solid #f1f1f1;
	border-radius: 10px;
	line-height: 1.3;
	margin: auto;
	text-align: left;
	transform: rotate(0deg);
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	@media screen and (max-width: 768px) {
		padding: 0%;
		border: 0px solid #f1f1f1;
	}
}


.flex-slide {
	-webkit-flex: 1;  /* Safari 6.1+ */
	-ms-flex: 1;  /* IE 10 */    
	flex: 1;
	cursor: pointer;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	@media screen and (max-width: 768px) {
		overflow: auto;
		overflow-x: hidden;
	}
}
.flex-slide p {
	@media screen and (max-width: 768px) {
		font-size: 2em;
	}
} 
.flex-slide ul li {
	@media screen and (max-width: 768px) {
		font-size: 2em;
	}
} 
.flex-slide:hover {
	-webkit-flex-grow: 3;
	flex-grow: 3;
}
.home {
	height: 100vh;
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-macquarie-71208_1920.jpg);
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	@media screen and (min-width: 768px) {
		animation: aboutFlexSlide $defaultSeconds 1;
		animation-delay: 0s;
	}
}

@keyframes aboutFlexSlide {
	0% {
		-webkit-flex-grow: 1;
		flex-grow: 1;
	}
	50% {
		-webkit-flex-grow: 3;
		flex-grow: 3;
	}
	100% {
		-webkit-flex-grow: 1;
		flex-grow: 1;
	}
}

.flex-title-home {
	@media screen and (min-width: 768px) {
		transform: rotate(90deg);
		top: 15%;
		animation: aboutFlexSlide $defaultSeconds 1;
		animation-delay: 0s;
	}
}



@keyframes homeFlextitle {
	0% {
		transform: rotate(90deg);
		top: 15%;
	}
	50% {
		transform: rotate(0deg);
		top: 15%;
	}
	100% {
		transform: rotate(90deg);
		top: 15%;
	}
}

.flex-about-home {
	opacity: 0;
	@media screen and (min-width: 768px) {
		animation: aboutFlexSlide $defaultSeconds 1;
		animation-delay: 0s;
	}
}

@keyframes flexAboutHome {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}



.about {
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/beach-2089959_1280.jpg);
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;	
}
.contact-form {
	width: 100%;
}
input {
	width: 100%;
}
textarea {
	width: 100%;	
}
.contact {
		background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-696098_1920.jpg);
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}
.work {
		background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/forest-208517_1280.jpg);
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}



// Preloader
.spinner {
	position: fixed;
	top: 0;
	left: 0;
	background: #222;
	height: 100%;
	width: 100%;
	z-index: 11;
	margin-top: 0;
	color: #fff;
	font-size: 1em;
}

.cube1, .cube2 {
  background-color: #fff;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes sk-cubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -webkit-transform: rotate(-360deg) }
}

@keyframes sk-cubemove {
  25% { 
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% { 
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% { 
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% { 
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% { 
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}

Mã này dường như là sự kết hợp của CSS để tạo kiểu và xác định chuyển tiếp/hoạt ảnh cho bố cục trang web. Nó sử dụng các truy vấn phương tiện khác nhau ( @media) để điều chỉnh kiểu dựa trên chiều rộng màn hình, giúp thiết kế có tính phản hồi cao.

Hãy chia nhỏ một số phần chính của mã này:

@importQuy tắc: Nhập phông chữ “Raleway” từ Google Fonts.
Biến:
- $defaultSeconds: Đặt thời lượng mặc định cho chuyển tiếp/hoạt ảnh thành 3 giây.
Quy tắc tạo kiểu:
- Nhắm mục tiêu .flex-containerlớp, lớp này dường như xác định vùng chứa linh hoạt cho bố cục bằng Flexbox.
- Sử dụng nhiều chuyển đổi và chuyển đổi khác nhau cho các phần tử bên trong .flex-container.
- Sử dụng truy vấn phương tiện để điều chỉnh bố cục và kiểu cho màn hình có chiều rộng nhỏ hơn 768px.
Phần Tạo kiểu:
- .home, .about, .work, .contact: Tạo kiểu cho hình nền và bố cục cho các phần khác nhau của trang web.
- Xác định hoạt ảnh ( @keyframes) để kiểm soát quá trình chuyển đổi của các phần này, như thay đổi hình nền hoặc xoay tiêu đề.
Kiểu dáng trình tải trước:
- Kiểu cho trình tải trước có các khối quay được sử dụng để biểu thị rằng nội dung đang tải.

Mã này sử dụng Flexbox để bố trí và xác định các chuyển tiếp/hoạt ảnh để thay đổi hình ảnh mượt mà. Nó tạo kiểu khác nhau cho các phần cụ thể của trang web bằng cách sử dụng hình nền và vị trí khác nhau. Ngoài ra, nó còn sử dụng các truy vấn phương tiện để phản hồi, điều chỉnh kiểu cho màn hình nhỏ hơn.

Hoạt ảnh được xác định ( @keyframes) được sử dụng để tạo hiệu ứng hình ảnh khi chuyển đổi giữa các phần hoặc khi tương tác với các phần tử (như xoay tiêu đề hoặc làm mờ nội dung vào/ra).

Bước 3. Thêm mã JS vào theme của bạn

(function(){
	$('.flex-container').waitForImages(function() {
		$('.spinner').fadeOut();
	}, $.noop, true);
	
	$(".flex-slide").each(function(){
		$(this).hover(function(){
			$(this).find('.flex-title').css({
				transform: 'rotate(0deg)',
				top: '10%'
			});
			$(this).find('.flex-about').css({
				opacity: '1'
			});
		}, function(){
			$(this).find('.flex-title').css({
				transform: 'rotate(90deg)',
				top: '15%'
			});
			$(this).find('.flex-about').css({
				opacity: '0'
			});
		})
	});
})();

Có vẻ như ở đây bạn có một hàm JavaScript hoạt động trên một trang sử dụng jQuery. Hãy chia nhỏ nó ra:

$('.flex-container').waitForImages(function() { $('.spinner').fadeOut(); }, $.noop, true);
- Điều này dường như đang sử dụng plugin waitForImages trên các phần tử có lớp .flex-container. Khi tất cả các hình ảnh bên trong .flex-containerđã được tải, nó sẽ làm mờ các phần tử có lớp .spinner.
$(".flex-slide").each(function(){ ... });
- Nó chọn các phần tử trong lớp .flex-slidevà áp dụng chức năng di chuột cho từng phần tử.

Bên trong chức năng di chuột:

$(this).find('.flex-title').css({ transform: 'rotate(0deg)', top: '10%' });
- Khi di chuột qua .flex-slide, nó sẽ tìm thấy phần tử có lớp .flex-titlebên trong và điều chỉnh các thuộc tính CSS của nó để xoay và thay đổi vị trí của nó.
$(this).find('.flex-about').css({ opacity: '1' });
- Trong khi di chuột, nó tìm thấy phần tử có lớp .flex-aboutbên trong .flex-slidevà thay đổi độ mờ của nó để hiển thị.

Khi di chuột ra:

$(this).find('.flex-title').css({ transform: 'rotate(90deg)', top: '15%' });
- Nó trả tiêu đề về vị trí ban đầu bằng cách xoay nó theo hướng khác và điều chỉnh vị trí trên cùng của nó.
$(this).find('.flex-about').css({ opacity: '0' });
- Ẩn phần tử cùng với lớp .flex-aboutbằng cách đặt độ mờ của nó thành 0 khi quá trình di chuột kết thúc.

Mã này dường như kiểm soát sự xuất hiện của các thành phần trong bản trình chiếu hoặc thư viện khi được di chuột qua. Các phần tử .flex-titlevà .flex-aboutthay đổi giao diện và vị trí của chúng khi di chuột, trong khi vòng quay sẽ mờ dần sau khi tất cả hình ảnh trong đó .flex-containerđã được tải.

Bước 4. Tận hưởng thành quả thôi nào

Đến bước 3, có thể được coi là hoàn thành rồi. Tuy nhiên, mình muốn thêm 1 bước 4 nữa, để các bạn xem demo của nó luôn hihi.

See the Pen
Flex Hover Slider | HTML + CSS + jQuery by Cameron Fitzwilliam (@CameronFitzwilliam)
on CodePen.

Hãy xem thử đẹp không nhá. Đừng quên ủng hộ Chothemewp để Chothemewp có thêm nhiều động lực ra thêm bài viết hướng dẫn mới nhé

Đọc thêm

Css button theo hình con quay wordpress

Học website nâng cao, Css, Flatsome, Thủ Thuật, Wordpress

Hiệu ứng chuyển ảnh cực kỳ đẹp

Bước 1. Thêm mã sau vào HTML của bạn

Bước 2. Thêm Css vào theme của bạn

Bước 3. Thêm mã JS vào theme của bạn

Bước 4. Tận hưởng thành quả thôi nào

Đọc thêm

Để lại một bình luận Hủy

TƯ VẤN THIẾT KẾ WEBSITE

0766.734.539

HỖ TRỢ KỸ THUẬT 24/7

0707.769.815

GỬI THƯ BAN GIÁM ĐỐC

hihi64588@gmail.com

Bước 1. Thêm mã sau vào HTML của bạn

Bước 2. Thêm Css vào theme của bạn

Bước 3. Thêm mã JS vào theme của bạn

Bước 4. Tận hưởng thành quả thôi nào

Đọc thêm

Để lại một bình luận Hủy

Đăng nhập

Đăng ký