Làm web (03) - Photoshop và Bootstrap (03)

Tiếp theo của: Làm web (02) - Photoshop và Bootstrap (02)
-----

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&amp;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: Tổng hợp các bài viết về Làm web
Xem thêm: Làm web (04) - Photoshop và Bootstrap (04)