Một vài hiệu ứng sử dụng animation: mây bay, hiệu ứng cuộn chữ 3d…

Một vài hiệu ứng sử dụng animation: mây bay, hiệu ứng cuộn chữ 3d…

Trong bài viết này tôi sẽ vận dụng cách sử dụng animation và key-frame đã được trình bày trong bài viết trước để xây dựng một số demo thú vị

Hiệu ứng mây bay

Trước tiên tôi chuẩn bị một bức ảnh tất nhiên là về mây rồi. Ảnh này là ảnh jpg tĩnh thông thường http://tek.dev.eten.vn/css/animation/cloud/images/cloud.jpg (width=600) như sau:
CLOUD

Để tạo hiệu ứng mây bay, tôi sẽ cho ảnh trên làm ảnh nền của một div, cho ảnh nền này repeat-x và cho background-position theo chiều x biến đổi liên tục từ 0 đến 600 và lặp đi lặp lại:

@keyframes animate-cloud {
from {
    background-position: 600px bottom;
}
to {
    background-position: 0 bottom;
}
}
@-webkit-keyframes animate-cloud {
from {
    background-position: 600px bottom;
}
to {
    background-position: 0 bottom;
}
}
div{
    animation: 20s linear infinite animate-cloud;
    -webkit-animation: 20s linear infinite animate-cloud;
    background: url("http://tek.dev.eten.vn/css/animation/cloud/images/cloud.jpg") repeat-x 0 bottom #049EC4;
    height: 330px;
}

Để tạo ra sự liền mạch, việc thiết kế ra ảnh nền rất quan trọng sao cho mép bên trái và bên phải của ảnh phải có thể ghép liền trơn với nhau. Dưới đây là demo của của hiệu ứng mây bay:

Lưu ý demo chỉ hoạt động tốt trên IE10+, FF16+, Opera12.5+, Chrome, Safari

Hiệu ứng chữ cuộn theo phong cách StarWar

screen-shot

Hiệu ứng trên được thực hiện chỉ với HTML5 và CSS3, không sử dụng javascript hoặc các graphics đặc biệt nào.
Hiệu ứng được cài đặt một cách khá đơn giản. Trước tiên bạn tạo khung cho chuyển động như sau:

<div id="titles">
	<div id="titlecontent">
		<p>content</p>
	</div>
</div>

Thẻ div ngoài cùng được đặt bám theo cạnh dưới của trình duyệt và sử dụng hiệu ứng phối cảnh 3D (3D perspective transformation)

#titles
{
	position: absolute;
	width: 18em;
	height: 50em;
	bottom: 0;
	left: 50%;
	margin-left: -9em;
	font-size: 350%;
	font-weight: bold;
	text-align: justify;
	overflow: hidden;
	transform-origin: 50% 100%;
	transform: perspective(300px) rotateX(25deg);
}

Để tạo hiệu ứng mờ dần cho chữ khi di chuyển lên phía trên, ta viết như sau:

#titles:after
{
	position: absolute;
	content: ' ';
	left: 0;
	right: 0;
	top: 0;
	bottom: 60%;
	background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	pointer-events: none;
}

Việc còn lại ta chỉ cần tạo hiệu ứng di chuyển cho khối chữ là xong:

#titlecontent
{
	position: absolute;
	top: 100%;
	animation: scroll 100s linear 4s infinite;
}
@keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

(Bạn có thể thay position: absolute bằng margin-top cũng được nhưng mình thấy không mượt bằng)

Bạn click vào đây để xem DEMO

Khi trích dẫn bài viết từ tek.eten.vn, xin vui lòng ghi rõ nguồn. Chúng tôi sẽ rất cảm ơn bạn!