-----
5.3 Sử dụng thư viện WOWjs
WOWjs là một thư viện viết bằng JavaScript, do Matt
Aussaguel phát triển. Sử dụng WOWj kết hợp với Animate.css để tạo ra các hiệu ứng
khi cuộn chuột một cách hoàn hảo hơn. Chỉ khi nào người dùng cuộn chuột tới phần
tử thì hiệu ứng mới được thực thi.
Đọc thêm về WOWjs tại đây: https://www.cione.vn/blog/front-end/wowjs.html
Một số giao diện tham khảo: http://thefoxwp.com/
Đọc hướng dẫn sử dụng (tiếng Anh): https://wowjs.uk/docs.html
Các bước sử dụng:
– Tải và nhúng Animate.css vào tài liệu HTML
<link rel="stylesheet"
href="css/animate.css">
– Tải thư viện WOWjs (thư mục WOW-master) tại đây: https://github.com/matthieua/WOW
– Nhúng vào tài liệu HTML và khởi tạo thư viện, đặt đoạn mã ở
cuối phần tử body (ngay trước thẻ </body>),
<script
src="vendor/WOW-master/dist/wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
– Muốn áp dụng WOW vào phần tử nào chỉ việc khai báo class=“wow loại hiệu ứng”, ví dụ,
<div
class="col-sm-6 col-sm-push-3 text-center wow bounceInUp">
– Để thiết lập độ trễ cho hiệu ứng, sử dụng thuộc tính data-wow-delay=“số giây”, ví dụ,
<div
class="col-sm-6 col-sm-push-3 text-center wow bounceInUp" data-wow-delay="0.3s">
6 Tạo vùng các khóa học nổi bật
[Photoshop] cắt ảnh:
– Sử dụng công cụ Slice Tool để chọn vùng
– Nhấp đúp chuột vào vùng chọn, đặt tên cho vùng (ví dụ: one-course)
– Vào menu File, chọn Export\ Save for Web (Legacy), chọn loại
ảnh (ví dụ JPEG), bấm nút Save
– Trong cửa sổ Save Optimized As, chọn thư mục sẽ lưu ảnh, mục
slices chọn Selected Slices, các mục khác để mặc định.
[HTML] đoạn mã cho một khóa học,
<div class="col-sm-6">
<a
href="" class="one-course">
<img
src="images/courses.png" alt="">
<span
class="course-info">
<h4
class="name">Front-end căn bản</h4>
<div
class="course-group">Front-end</div>
</span>
</a>
</div>
– Cách tạo phần tử gồm hai lớp:
+ Lớp một,
a.one-course {
display: block;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
margin-bottom: 30px;
}
+ Lớp hai,
span.course-info {
display: block;
width: 100%;
position: absolute;
bottom: 0;
background: #5bbfdd;
padding: 35px 32px;
transition: 0.4s;
bottom: -400px; /* ẩn
đi */
}
h4.name {
color: white;
margin-bottom: 10px;
font-weight: 600;
font-size: 26px;
text-transform:
capitalize;
}
.course-group {
color: #585858;
font-size: 23px;
position: relative;
padding-top: 10px;
}
a.one-course:hover .course-info {
bottom: 0; /* hiển thị
lên lại */
}
Mã HTML khi có thêm hiệu ứng di chuyển,
<div class="row courses-title text-center wow
bounceInUp">
<h2
class="line-over">Outstanding Courses</h2>
</div>
<div
class="row courses">
<div
class="col-sm-6 wow bounceInUp">
<a
href="" class="one-course">
<img
src="images/courses.png" alt="">
<span
class="course-info">
<h4
class="name">Front-end căn bản</h4>
<div
class="course-group">Front-end</div>
</span>
</a>
</div>
<div
class="col-sm-6 wow bounceInUp" data-wow-delay="0.3s">
<a
href="" class="one-course">
<img
src="images/courses.png" alt="">
<span
class="course-info">
<h4
class="name">Front-end căn bản</h4>
<div
class="course-group">Front-end</div>
</span>
</a>
</div>
[Hình minh họa]
[Khi rê chuột lên hình]
7 Tạo vùng thống kê
Sử dụng phông “Playfair Display” của Google. Phông này đã hỗ
trợ tiếng Việt.
– Vào trang Google gõ từ khóa “Playfair display” hoặc vào thẳng
trang: https://fonts.google.com/specimen/Playfair+Display
– Chọn mục SELECT THIS FONT
– Bấm chuột vào cửa sổ Family Selected (ở cuối màn hình, bên
phải), chọn CUSTOMIZE, đánh dấu chọn các kiểu chữ, cỡ chữ, chọn mục Vietnamese để
sử dụng cho tiếng Việt.
– Bấm chuột vào mục EMBED, chép đường dẫn sau, bỏ vào tài liệu
HTML
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i&subset=vietnamese"
rel="stylesheet">
[HTML]
<!-- begin statistics area -->
<div
class="statistics">
<div
class="container">
<div
class="row">
<div
class="col-sm-3">
<div
class="content">
<div
class="number">10</div>
<div
class="text">Khóa học</div>
</div>
</div>
<div
class="col-sm-3">
<div
class="content">
<div
class="number">150</div>
<div
class="text">Số học viên đang học</div>
</div>
</div>
<div
class="col-sm-3">
<div
class="content">
<div
class="number">20</div>
<div
class="text">Lớp học</div>
</div>
</div>
<div
class="col-sm-3">
<div
class="content">
<div
class="number">500</div>
<div
class="text">Học viên từng học</div>
</div>
</div>
</div>
</div>
</div>
<!-- end
statistics area -->
[CSS]
.content {
width: 100%;
height: 322px;
border: 10px solid
#5bbfdd;
text-align: center;
padding-top: 65px;
margin-top: 37px;
color: white;
}
.number {
font-family: "Playfair Display", serif;
font-size: 70px;
color: #5bbfdd;
font-weight: 600;
}
.text {
font-family:
"Playfair Display", serif;
font-size: 24px;
}
[Hình minh họa]
-----------
Cập nhật [24/9/2018]
-----------
Xem thêm: Làm web (04) - Photoshop và Bootstrap (04)