04/10/2018, 20:17

Tạo chữ uốn cong với CSS và jQuery

Nếu các bạn yêu thích jQuery và muốn thành thạo với nó thì không còn cách nào hay hơn là tự tay làm vài ứng dụng nhỏ và từ đó nâng cao khả năng lập trình của mình. Trong bài viết này mình sẽ chia sẻ cho các bạn một đoạn jQuery giúp tạo chữ uốn cong, và tất nhiên là cũng cần có sự giúp đỡ của CSS. ...

Nếu các bạn yêu thích jQuery và muốn thành thạo với nó thì không còn cách nào hay hơn là tự tay làm vài ứng dụng nhỏ và từ đó nâng cao khả năng lập trình của mình. Trong bài viết này mình sẽ chia sẻ cho các bạn một đoạn jQuery giúp tạo chữ uốn cong, và tất nhiên là cũng cần có sự giúp đỡ của CSS. Các bạn có thể tạo chữ uốn cong như hình bên dưới.

Tạo chữ uốn cong với CSS và jQuery

HTML

Trước hết , chúng ta sẽ cần có đoạn html để chứa nội dung chữ cần uốn cong như sau :


<div class="curved-container">

<h2 class="curved-text">This text will be curved</h2>

</div>

jQuery

Sau đó , các bạn tách từng chữ ra với đoạn script bên dưới :

$(document).ready(function() {
	var str = $('.curved-text').html();
	var curved = ';
	for (var i = 0, len = str.length; i < len; i++) {
		curved += '<span class="char'; curved += i; curved += '">';
		curved += str[i];
		curved += '</span>';
	}
	$('.curved-text').html(curved);
});

Đoạn code trên sẽ tách kí tự như thế này :
Tạo chữ uốn cong với CSS và jQuery

CSS

Và đoạn css này sẽ uốn cong từng kí tự.

.curved-container {
	position: relative;
	awidth: 200px;
	margin: auto;
	height: 200px;
	transform: rotate(-72deg);
	-moz-transform: rotate(-72deg);
	-webkit-transform: rotate(-72deg);
}
.curved-container h2 {
	border: none;
}
.curved-container span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  awidth: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
  -moz-transform-origin: bottom center;
  -webkit-transform-origin: bottom center;
}
.char0 { transform: rotate(6deg); -moz-transform: rotate(6deg); -webkit-transform: rotate(6deg); }
.char1 { transform: rotate(12deg); -moz-transform: rotate(12deg); -webkit-transform: rotate(12deg); }
.char2 { transform: rotate(18deg); -moz-transform: rotate(18deg); -webkit-transform: rotate(18deg); }
.char3 { transform: rotate(24deg); -moz-transform: rotate(24deg); -webkit-transform: rotate(24deg); }
.char4 { transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); }
.char5 { transform: rotate(36deg); -moz-transform: rotate(36deg); -webkit-transform: rotate(36deg); }
.char6 { transform: rotate(42deg); -moz-transform: rotate(42deg); -webkit-transform: rotate(42deg); }
.char7 { transform: rotate(48deg); -moz-transform: rotate(48deg); -webkit-transform: rotate(48deg); }
.char8 { transform: rotate(54deg); -moz-transform: rotate(54deg); -webkit-transform: rotate(54deg); }
.char9 { transform: rotate(60deg); -moz-transform: rotate(60deg); -webkit-transform: rotate(60deg); }
.char10 { transform: rotate(66deg); -moz-transform: rotate(66deg); -webkit-transform: rotate(66deg); }
.char11 { transform: rotate(72deg); -moz-transform: rotate(72deg); -webkit-transform: rotate(72deg); }
.char12 { transform: rotate(78deg); -moz-transform: rotate(78deg); -webkit-transform: rotate(78deg); }
.char13 { transform: rotate(84deg); -moz-transform: rotate(84deg); -webkit-transform: rotate(84deg); }
.char14 { transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); }
.char15 { transform: rotate(96deg); -moz-transform: rotate(96deg); -webkit-transform: rotate(96deg); }
.char16 { transform: rotate(102deg); -moz-transform: rotate(102deg); -webkit-transform: rotate(102deg); }
.char17 { transform: rotate(108deg); -moz-transform: rotate(108deg); -webkit-transform: rotate(108deg); }
.char18 { transform: rotate(114deg); -moz-transform: rotate(114deg); -webkit-transform: rotate(114deg); }
.char19 { transform: rotate(120deg); -moz-transform: rotate(120deg); -webkit-transform: rotate(120deg); }
.char20 { transform: rotate(126deg); -moz-transform: rotate(126deg); -webkit-transform: rotate(126deg); }
.char21 { transform: rotate(132deg); -moz-transform: rotate(132deg); -webkit-transform: rotate(132deg); }
.char22 { transform: rotate(138deg); -moz-transform: rotate(138deg); -webkit-transform: rotate(138deg); }
.char23 { transform: rotate(144deg); -moz-transform: rotate(144deg); -webkit-transform: rotate(144deg); }

Qua bài viết này, các bạn sẽ hiểu rõ cách tách từng kí tự trong một chuỗi bằng jQuery. Hy vọng nó sẽ giúp ích cho các bạn trong hành trình chuyên nghiệp hóa thiết kế web của mình.

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

Tags: chữ uốn cong javascript cơ bản jQuery

Chuyên Mục: Javascript

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

Bài liên quan

Tạo chữ uốn cong với CSS và jQuery

Nếu các bạn yêu thích jQuery và muốn thành thạo với nó thì không còn cách nào hay hơn là tự tay làm vài ứng dụng nhỏ và từ đó nâng cao khả năng lập trình của mình. Trong bài viết này mình sẽ chia sẻ cho các bạn một đoạn jQuery giúp tạo chữ uốn cong, và tất nhiên là cũng cần có sự giúp đỡ của CSS. ...

Hoàng Hải Đăng viết 20:17 ngày 04/10/2018

Tạo hiệu ứng nhập liệu cực pro với CSS và jQuery

Hầu hết mọi website đều có form nhập liệu dùng để thu thập phản hồi hay liên lạc của người dùng. Nếu các bạn muốn gây bất ngờ cho khách viếng thăm trang web hay blog của các bạn mỗi khi họ nhập liệu, bằng những hiệu ứng cực pro, thì nên thử với hiệu ứng mà mình chia sẻ cho các bạn trong bài viết ...

Vũ Văn Thanh viết 20:16 ngày 04/10/2018

Tạo Tooltip Menu với CSS và jQuery

Hôm nay mình tiếp tục mang đến cho các bạn một hiệu ứng cực kỳ hữu ích và rất hay sử dụng trên các trang web , đó là hiệu ứng tool tip cho các submenu. Với hiệu ứng này, rất phù hợp cho các bạn áp dụng vào các menu có độ phân cấp cao trên trang web hay blog của các bạn. Xem Demo | Download ...

Hoàng Hải Đăng viết 20:05 ngày 04/10/2018

Tạo button input combo cực lạ với CSS và jQuery

Mình đã giới thiệu cho các bạn nhiều button trong các bài viết trước, hôm nay mình sẽ chia sẻ cho các bạn một button đặc biệt, với button này, các bạn có thể có được 2 chức năng cùng một lúc. Hãy cùng thử tìm hiểu xem button này làm được những gì nhé. Xem Demo | Download HTML Đầu ...

Hoàng Hải Đăng viết 20:04 ngày 04/10/2018

Tạo Vertical Navigation Menu với CSS3 và jQuery

Menu là một thành phần không thể thiếu trong các website, để giúp các bạn có thêm một sự lựa chọn cho menu trong các website của các bạn. Hôm nay mình xin chia sẻ một mẫu menu đẹp được xây dựng chủ yếu từ CSS3 và jQuery. Các bạn có thể xem demo bài viết hoặc download trực tiếp về máy của mình trước ...

Trịnh Tiến Mạnh viết 19:58 ngày 04/10/2018
0