CSS3 transform có thể giúp ta dễ dàng xoay một đối tượng sang nhiều góc độ khác nhau. Tuy nhiên việc xoay từng chữ cái trong đoạn văn bản là rất khó khăn. Arc Text là một plug-in của Jquery sẽ giúp chúng ta làm được điều tưởng chừng như không thể “Bẻ cong đoạn văn bản” theo một đường cung tròn.
Yêu cầu
- Bạn cần phải biết căn bản về
html và
css ngoài ra bạn cũng phải biết Jquery căn bản nữa.
- Bạn cần đưa library
Jquery và plug-in
ArcText.js vào project của bạn, bên trong thẻ head.
Cách hoạt động
Về nguyên tắc hoạt động thì Arc Text sẽ dùng Jquery tách từng chữ cái trong đoạn văn bản, sau đó nó sẽ apply CSS3 transform vào các chữ cái đó cho phù hợp với đường cung mà bạn chọn.
Ví dụ:
Đầu tiên, mình cần setup một đoạn code html như sau:
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#ex").arctext({
radius:20, //Độ cong của chữ
dir:1 // 1 cong lên, -1 cong xuống
});
});
</script>
<h1 id="ex" style="color: red">WEBSITE CHIA SẺ KIẾN THỨC DOTNET</h1>
Bạn có thể thay đổi các giá trị radius và dir để biết thêm về các tính năng của nó.
Nếu các bạn muốn nó thẳng đứng 90 độ như trong demo trên thì chỉ việc thêm vào css đoạn code phía dưới, và nếu muốn cong qua trái hay phải thì chỉ việc thay đổi giả trị dir trong Jquery là 1, -1
#ex{ // ID của thẻ h1
// CSS3 for all browser
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
Áp dụng thực tế
Bây giờ chúng ta sẽ áp dụng và một dự án thực tế nhé. Bạn có thể xem demo tại đây.
Setup code html và css
<style type="text/css">
body{
font-family: Roboto;
color: #6ABDC5;
background:#6ABDC5 url(../images/background-puple.png) repeat;
}
article{
width: 900px;
margin: 0 auto;
}
article section{
width: 400px;
height: 400px;
position: relative;
background: #fff;
display: inline-block; // Thay thế float, giúp 2 đối tượng ngang hàng nhau
border-radius: 50%;// Tạo vòng tròn
text-align: center;
margin-top: 50px;
margin-right: 80px;
cursor: pointer;
}
article section h1{
line-height: 400px;
font-size: 30px;
font-size: 180px;
text-transform: uppercase;
}
article section p{
position: absolute;
bottom: -40px; // Định vị trí cho thẻ p
left: 20px;
color: #fff;
font-size: 25px;
text-transform: uppercase;
}
article section:last-child{
margin-right: 0;// bỏ margin left cho section thứ 2
}
</style>
<article>
<section id="Yes">
<h1>YES</h1>
<p>Lorem ipsum dolor sit amet</p>
</section>
<section id="No">
<h1>NO</h1>
<p>Lorem ipsum dolor sit amet</p>
</section>
</article>
Sau đó bạn có thể xem thử, tuy nhiên nó vẩn chưa hoàn thành nhé. Giờ chúng ta sẽ nhúng Jquery vào.
<script type="text/javascript">
jQuery(document).ready(function($) {
var sec = $("section");
sec.find("p").css('bottom', '50'); // set css này để che lại phần chữ trong thẻ p
sec.find("p").arctext({radius:210,dir:-1}); // set arc text cho đoạn chữ
// funtion hover có thể hiểu như thế này:
// Khi hover vào section thì nó sẽ tìm thẻ p.
// sau đó animate đẩy p xuống 40px để hiển thị ra ngoài.
sec.hover(function(){
$(this).find('p').animate({
'bottom':-40 // khi hover vào thì đẩy xuống 40px
},"slow")},function(){
$(this).find('p').animate({
'bottom':50 // khi đưa chuột ra khỏi section thì sẻ quay về vị trí cũ
},"slow")// slow, fast hoặc ms
})
});
</script>
Bây giờ thì khi các bạn đưa chuột vào chữ YES hoặc NO thì phần desciption sẽ hiện ra. Khá thú vị phải không các bạn.