Chủ đề Bootstrap "Công ty"
Tạo chủ đề: "Công ty"
Trang này sẽ chỉ cho bạn cách xây dựng chủ đề Bootstrap từ đầu.
Chúng tôi sẽ bắt đầu với một trang HTML đơn giản, sau đó thêm ngày càng nhiều thành phần cho đến khi chúng tôi có một trang web đầy đủ chức năng, cá nhân và phản hồi.
Kết quả sẽ như thế này và bạn có thể tự do sửa đổi, lưu, chia sẻ, sử dụng hoặc làm bất cứ điều gì bạn muốn với nó:
Trang bắt đầu HTML
Chúng ta sẽ bắt đầu với trang HTML sau:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme Company</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Company</h1>
<p>We specialize in blablabla</p>
</body>
</html>Thêm CDN Bootstrap và thêm Jumbotron
Thêm Bootstrap CDN và một liên kết đến jQuery rồi đặt các phần tử HTML bên trong .jumbotron :
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme Company</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron">
<h1>Company</h1>
<p>We specialize in blablabla</p>
</div>
</body>
</html>Kết quả:
Công ty
Chúng tôi chuyên về blablabla
Thêm màu nền và văn bản ở giữa
1. Thêm màu nền màu cam cho jumbotron.
2. Thêm lớp .text-center để căn giữa văn bản bên trong jumbotron:
Ví dụ
<style>
.jumbotron {
background-color: #f4511e; /* Orange */
color: #ffffff;
}
</style>
<body>
<div class="jumbotron text-center">
<h1>Company</h1>
<p>We specialize in blablabla</p>
</div>
</body>Kết quả:
Công ty
Chúng tôi chuyên về blablabla
Thêm biểu mẫu
Thêm biểu mẫu có trường nhập và nút:
Ví dụ
<div class="jumbotron text-center">
<h1>Company</h1>
<p>We specialize in blablabla</p>
<form class="form-inline">
<div class="input-group">
<input
type="email" class="form-control" size="50" placeholder="Email Address"
required>
<div class="input-group-btn">
<button type="button" class="btn btn-danger">Subscribe</button>
</div>
</div>
</form>
</div>Kết quả:
Công ty
Chúng tôi chuyên về blablabla
Thêm vùng chứa
Thêm hai vùng chứa ( .container-fluid ) và thêm một lớp tùy chỉnh vào vùng chứa thứ hai ( .bg-grey - thêm màu nền xám):
Ví dụ
<style>
.bg-grey {
background-color: #f6f6f6;
}
</style>
<div class="container-fluid">
<h2>About Company Page</h2>
<h4>Lorem ipsum..</h4>
<p>Lorem ipsum..</p>
<button class="btn btn-default btn-lg">Get in Touch</button>
</div>
<div class="container-fluid bg-grey">
<h2>Our Values</h2>
<h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
<p><strong>VISION:</strong> Our vision Lorem ipsum..
</div>Kết quả:
Giới thiệu về trang công ty
Lorem ipsum..
Lorem ipsum..
Giá trị của chúng tôi
SỨ MỆNH: Nhiệm vụ của chúng tôi lorem ipsum..
TẦM NHÌN: Tầm nhìn của chúng tôi Lorem ipsum..
Thêm phần đệm
Hãy làm cho jumbotron và các thùng chứa trông đẹp mắt bằng cách thêm một số phần đệm:
Ví dụ
<style>
.jumbotron {
background-color: #f4511e;
color: #fff;
padding: 100px 25px;
}
.container-fluid {
padding: 60px 50px;
}
</style>Kết quả:
Công ty
Chúng tôi chuyên về blablabla
Giới thiệu về trang công ty
Lorem ipsum..
Lorem ipsum..
Giá trị của chúng tôi
SỨ MỆNH: Nhiệm vụ của chúng tôi lorem ipsum..
TẦM NHÌN: Tầm nhìn của chúng tôi Lorem ipsum..
Thêm lưới
1. Thêm biểu tượng (hoặc logo của công ty) vào mỗi hộp đựng.
2. Tách biểu tượng và "văn bản giới thiệu" bằng cách tạo hai cột ( .col-sm-8 và .col-sm-4 )
3. Thêm truy vấn phương tiện để căn giữa "cột logo" trên màn hình có chiều rộng nhỏ hơn 768 pixel.
Ví dụ
<style>
.logo {
font-size: 200px;
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<h2>About Company Page</h2>
<h4>Lorem ipsum..</h4>
<p>Lorem ipsum..</p>
<button class="btn btn-default btn-lg">Get in Touch</button>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-signal logo"></span>
</div>
</div>
</div>
<div class="container-fluid bg-grey">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-globe logo"></span>
</div>
<div class="col-sm-8">
<h2>Our Values</h2>
<h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
<p><strong>VISION:</strong> Our vision Lorem ipsum..</p>
</div>
</div>
</div>Kết quả:
Giới thiệu về trang công ty
Lorem ipsum..
Lorem ipsum..
Giá trị của chúng tôi
SỨ MỆNH: Nhiệm vụ của chúng tôi lorem ipsum..
TẦM NHÌN: Tầm nhìn của chúng tôi Lorem ipsum..
Thêm vùng chứa dịch vụ
Thêm vùng chứa mới, với các cột 2x3 có chiều rộng bằng nhau ( .col-sm-4 ):
Ví dụ
<div class="container-fluid text-center">
<h2>SERVICES</h2>
<h4>What we offer</h4>
<br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-heart"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-lock"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-leaf"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-certificate"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-wrench"></span>
<h4>HARD WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
Kết quả:
DỊCH VỤ
Những gì chúng tôi cung cấp
QUYỀN LỰC
Lorem ipsum dolor ngồi amet..
YÊU
Lorem ipsum dolor ngồi amet..
CÔNG VIỆC HOÀN THÀNH
Lorem ipsum dolor ngồi amet..
MÀU XANH LÁ
Lorem ipsum dolor ngồi amet..
ĐƯỢC CHỨNG NHẬN
Lorem ipsum dolor ngồi amet..
CÔNG VIỆC KHÓ KHĂN
Lorem ipsum dolor ngồi amet..
Biểu tượng kiểu dáng
Thêm một lớp tùy chỉnh ( .logo-small ) vào mỗi glyphicon trong vùng chứa "Dịch vụ". Sử dụng CSS để tạo kiểu cho chúng:
Ví dụ
/* Add an orange color to all icons and set the font-size */
.logo-small {
color: #f4511e;
font-size: 50px;
}
.logo {
color: #f4511e;
font-size: 200px;
}
Kết quả:
Giới thiệu về trang công ty
Lorem ipsum..
Lorem ipsum..
Giá trị của chúng tôi
SỨ MỆNH: Nhiệm vụ của chúng tôi lorem ipsum..
TẦM NHÌN: Tầm nhìn của chúng tôi Lorem ipsum..
DỊCH VỤ
Những gì chúng tôi cung cấp
QUYỀN LỰC
Lorem ipsum dolor ngồi amet..
YÊU
Lorem ipsum dolor ngồi amet..
CÔNG VIỆC HOÀN THÀNH
Lorem ipsum dolor ngồi amet..
MÀU XANH LÁ
Lorem ipsum dolor ngồi amet..
ĐƯỢC CHỨNG NHẬN
Lorem ipsum dolor ngồi amet..
CÔNG VIỆC KHÓ KHĂN
Lorem ipsum dolor ngồi amet..
Thêm vùng chứa danh mục đầu tư
Tạo một vùng chứa có chiều rộng đầy đủ mới, với ba cột có chiều rộng bằng nhau ( .col-sm-4 ):
Bên trong mỗi cột, thêm một hình ảnh.
Sau đó, sử dụng lớp .img-thumbnail để định hình hình ảnh thành hình thu nhỏ.
Thông thường, bạn sẽ thêm trực tiếp lớp .img-thumbnail vào phần tử <img>. Trong ví dụ này, chúng tôi đã đặt một vùng chứa hình thu nhỏ xung quanh hình ảnh để có thể chỉ định văn bản hình ảnh.
Ví dụ
<div class="container-fluid text-center bg-grey">
<h2>Portfolio</h2>
<h4>What we have created</h4>
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="paris.jpg" alt="Paris">
<p><strong>Paris</strong></p>
<p>Yes, we built Paris</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="newyork.jpg" alt="New York">
<p><strong>New York</strong></p>
<p>We built New York</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg" alt="San Francisco">
<p><strong>San Francisco</strong></p>
<p>Yes, San Fran is ours</p>
</div>
</div>
</div>
Kết quả:
danh mục đầu tư
Những gì chúng tôi đã tạo ra
Paris
Vâng, chúng tôi đã xây dựng Paris
Newyork
Chúng tôi đã xây dựng New York
San Francisco
Vâng, San Fran là của chúng tôi
Tạo kiểu cho hình ảnh thu nhỏ
Sử dụng CSS để tạo kiểu cho hình ảnh. Trong ví dụ của chúng tôi, chúng tôi đã cố gắng làm cho chúng trông giống như những tấm thiệp bằng cách xóa đường viền của chúng và đặt chiều rộng 100% cho mỗi hình ảnh.
Ví dụ
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
Kết quả:
danh mục đầu tư
Những gì chúng tôi đã tạo ra
Paris
Vâng, chúng tôi đã xây dựng Paris
Newyork
Chúng tôi đã xây dựng New York
San Francisco
Vâng, San Fran là của chúng tôi
Thêm băng chuyền
Thêm băng chuyền:
Ví dụ
<h2>What our customers say</h2>
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<h4>"This company is the best. I am so happy with the result!"<br><span style="font-style:normal;">Michael Roe, Vice President, Comment Box</span></h4>
</div>
<div class="item">
<h4>"One word... WOW!!"<br><span style="font-style:normal;">John Doe, Salesman, Rep Inc</span></h4>
</div>
<div class="item">
<h4>"Could I... BE any more happy with this company?"<br><span style="font-style:normal;">Chandler Bing, Actor, FriendsAlot</span></h4>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Kết quả:
Khách hàng của chúng tôi nói gì
Hãy tự mình thử »Phong cách băng chuyền
Sử dụng CSS để tạo kiểu cho băng chuyền:
Ví dụ
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #f4511e;
}
.carousel-indicators li {
border-color: #f4511e;
}
.carousel-indicators li.active {
background-color: #f4511e;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item span {
font-style: normal;
}Kết quả:
Khách hàng của chúng tôi nói gì
Hãy tự mình thử »Thêm vùng chứa giá
Tạo một thùng chứa có chiều rộng đầy đủ, với ba cột có chiều rộng bằng nhau ( .col-sm-4 ):
Bên trong mỗi cột, thêm một bảng điều khiển:
Ví dụ
<div class="container-fluid">
<div class="text-center">
<h2>Pricing</h2>
<h4>Choose a payment plan that works for you</h4>
</div>
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Basic</h1>
</div>
<div class="panel-body">
<p><strong>20</strong> Lorem</p>
<p><strong>15</strong> Ipsum</p>
<p><strong>5</strong> Dolor</p>
<p><strong>2</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div class="panel-footer">
<h3>$19</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Pro</h1>
</div>
<div class="panel-body">
<p><strong>50</strong> Lorem</p>
<p><strong>25</strong> Ipsum</p>
<p><strong>10</strong> Dolor</p>
<p><strong>5</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div class="panel-footer">
<h3>$29</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Premium</h1>
</div>
<div class="panel-body">
<p><strong>100</strong> Lorem</p>
<p><strong>50</strong> Ipsum</p>
<p><strong>25</strong> Dolor</p>
<p><strong>10</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div class="panel-footer">
<h3>$49</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
Kết quả:
Định giá
Chọn gói thanh toán phù hợp với bạn
Nền tảng
20 Lorem
15 Ipsum
5 nỗi buồn
2 ngồi
Amet vô tận
chuyên nghiệp
50 Lorem
25 Ipsum
10 nỗi buồn
5 ngồi
Amet vô tận
Phần thưởng
100 Lorem
50 Ipsum
25 buồn bã
10 ngồi
Amet vô tận
Tấm tạo kiểu
Sử dụng CSS để tạo kiểu cho các bảng:
Ví dụ
.panel {
border: 1px solid #f4511e;
border-radius:0;
transition: box-shadow 0.5s;
}
.panel:hover {
box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}
.panel-footer .btn:hover {
border: 1px solid #f4511e;
background-color: #fff !important;
color: #f4511e;
}
.panel-heading {
color: #fff !important;
background-color: #f4511e !important;
padding: 25px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color: #fff !important;
}
.panel-footer h3 {
font-size: 32px;
}
.panel-footer h4 {
color: #aaa;
font-size: 14px;
}
.panel-footer .btn {
margin: 15px 0;
background-color: #f4511e;
color: #fff;
}
Kết quả:
Định giá
Chọn gói thanh toán phù hợp với bạn
Nền tảng
20 Lorem
15 Ipsum
5 nỗi buồn
2 ngồi
Amet vô tận
chuyên nghiệp
50 Lorem
25 Ipsum
10 nỗi buồn
5 ngồi
Amet vô tận
Phần thưởng
100 Lorem
50 Ipsum
25 buồn bã
10 ngồi
Amet vô tận
Thêm vùng chứa liên hệ
Thêm vùng chứa mới với thông tin liên hệ:
Ví dụ
<div class="container-fluid bg-grey">
<h2 class="text-center">CONTACT</h2>
<div class="row">
<div class="col-sm-5">
<p>Contact us and we'll get back to you within 24 hours.</p>
<p><span class="glyphicon glyphicon-map-marker"></span> Chicago, US</p>
<p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span> [email protected] </p>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>Kết quả:
LIÊN HỆ
Hãy liên hệ với chúng tôi và chúng tôi sẽ liên hệ lại với bạn trong vòng 24 giờ.
Chicago, Mỹ
+00 1515151515
Thêm bản đồ/hình ảnh vị trí
Thêm hình ảnh vị trí hoặc bản đồ (đọc Hướng dẫn về Google Maps của chúng tôi dành cho google maps):
Ví dụ
<!-- Image of location/map -->
<img src="map.jpg" style="width:100%">Kết quả:
Thêm thanh điều hướng
Thêm thanh điều hướng ở đầu trang thu gọn trên màn hình nhỏ hơn:
Ví dụ
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#pricing">PRICING</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>Kết quả:
Hãy tự mình thử » Mẹo: Căn phải các nút điều hướng với lớp navbar-right .
Kiểu thanh điều hướng
Sử dụng CSS để tùy chỉnh thanh điều hướng:
Ví dụ
.navbar {
margin-bottom: 0;
background-color: #f4511e;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #f4511e !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}Kết quả:
Hãy tự mình thử »Thêm cuộn giấy
Thêm Scrollspy để tự động cập nhật liên kết thanh điều hướng khi cuộn:
Ví dụ
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<div id="about" class="container-fluid">
<div id="services" class="container-fluid">
<div id="portfolio" class="container-fluid">
<div id="pricing" class="container-fluid">
<div id="contact" class="container-fluid"> Hãy tự mình thử »Thêm chân trang
Thêm biểu tượng "Mũi tên lên" vào chân trang, biểu tượng này sẽ đưa người dùng lên đầu trang khi nhấp vào:
Ví dụ
<style>
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color: #f4511e;
}
</style>
<footer class="container-fluid text-center">
<a href="#myPage" title="To Top">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<p>Bootstrap Theme Made By <a href="https://www.example.com.vn" title="Visit w3schools">www.example.com.vn</a></p>
</footer>Kết quả:
Hãy tự mình thử »Thêm tính năng cuộn mượt mà
Sử dụng jQuery để thêm tính năng cuộn mượt mà (khi nhấp vào liên kết trên thanh điều hướng):
Ví dụ
<script>
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
})
</script> Hãy tự mình thử »Liên lạc cuối cùng
Cá nhân hóa Chủ đề của bạn bằng cách thêm phông chữ bạn thích. Chúng tôi đã sử dụng "Montserrat" và "Lato" từ Thư viện Phông chữ của Google.
Link tới font chữ ở phần <head> :
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
Sau đó, bạn có thể sử dụng chúng trong trang:
Ví dụ
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
.jumbotron {
font-family: Montserrat, sans-serif;
}
.navbar {
font-family: Montserrat, sans-serif;
}Chúng tôi cũng đã thêm một số phong cách bổ sung cho một số thành phần:
Ví dụ
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
} Hãy tự mình thử »Trượt trong các phần tử
Chúng tôi cũng đã tạo hiệu ứng hoạt hình sẽ trượt theo các phần tử khi cuộn. Nếu bạn muốn sử dụng nó, chỉ cần thêm lớp .slideanim vào thành phần bạn muốn trượt vào và thêm phần sau vào CSS và jQuery của bạn (bạn có thể thoải mái sửa đổi thời lượng, độ mờ, nơi bắt đầu, thời điểm trượt vào, và như thế):
Ví dụ CSS
.slideanim {visibility:hidden;}
.slide {
/* The name of the animation */
animation-name: slide;
-webkit-animation-name: slide;
/* The duration of the animation */
animation-duration: 1s;
-webkit-animation-duration: 1s;
/* Make the element visible */
visibility: visible;
}
/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
0% {
opacity: 0;
transform: translateY(70%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}Ví dụ về jQuery
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
}); Hãy tự mình thử »