Nếu bạn thường xuyên ghé thăm một số trang web dịch vụ chắc bạn cũng không còn lạ lẫm gì về các hiệu ứng này. Bài này mình sẽ giới thiệu 3 hiệu ứng phổ biến thường được các website sử dụng, bên cạch đó là code css, html và script (nếu có) của mỗi hiệu ứng để bạn đọc tham khảo.
1. Video source
Hiệu ứng đầu tiên mà mình muốn giới thiệu đó là video source vì nó đơn giản nhất so với hai hiệu ứng còn lại, nhược điểm duy nhất của phương pháp này cần đến link video định dạng mp4, webm và ogg nếu bạn không có sẵn host bạn phải lấy link ngoài
+ Code html
<div class='banner-cover'>
<div class='banner-widget'>
<div class='cover'>
<video autoplay='' class='video-bg fill' loop='' muted='' playsinline='' preload=''>
<source src='//fpt-token.com/video/ketnoim2m.mp4' type='video/mp4'/>
</video>
<div class='overlay'></div>
<div class='cover-container text-center'>
<h1 class='slogan'>Việt Blogger Design</h1>
<p>Chuyên làm dịch vụ: Convert Wordpress sang Blogger - Sửa lỗi, nâng cấp Template - Thiết kế Contact Form từ Google Form</p>
<a class='btn btn-outline-primary' href='https://theme.vietblogger.design/p/dich-vu.html' title=''>ĐẶT DỊCH VỤ</a>
</div>
<p class='more'>Hãy là người tiên phong trong lĩnh vực của bạn</p>
</div>
</div>
</div>
+ Code css
*,*:before,*:after {box-sizing:border-box}
a{text-decoration:none;outline:none}
.btn{display:inline-block;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);padding:10px 20px;font-size:.81rem;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;margin:.375rem;border:0;-webkit-border-radius:.125rem;border-radius:.125rem;cursor:pointer;text-transform:uppercase;white-space:normal;word-wrap:break-word;color:#fff!important;}
.text-center{text-align:center!important}
.banner-cover{width:100%;-js-display:flex;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}
.banner-widget{float:left;width:100%;min-height:100vh}
.cover{overflow:hidden;height:100%;display:block;position:relative}
.cover .cover-container{transform:translate(-50%,-50%)!important;top:50%;left:50%;position:absolute;z-index:2;padding:0 15px}
.cover .cover-container .slogan{position:relative;display:block;margin-bottom:10px;color:#fff;font-family:'Roboto',sans-serif;text-transform:uppercase}
.cover .cover-container .slogan:before{position:absolute;bottom:-20px;left:50%;content:"";background:white;width:170px;height:2px;margin-left:-85px}
.cover .cover-container p{display:block;position:relative;z-index:1;margin-bottom:30px;padding-top:24px;color:#fff;font-weight:300;line-height:1.5;text-align:center}
.cover .cover-container .btn{position:relative;z-index:10;text-transform:uppercase;letter-spacing:1px;box-shadow:unset;border:1px solid #fff}
.btn-outline-primary{color:#008df2;background-image:none;background-color:transparent;border-color:#008df2}
.cover .cover-container .btn:hover{border:1px solid #008df2;background-color:#008df2}
.cover .more{position:absolute;bottom:0;left:0;width:100%;margin-bottom:15px;color:#fff;font-size:0.75em;text-transform:uppercase;letter-spacing:10px;text-align:center}
.video-bg{object-fit:cover;object-position:50% 50%;font-family:'object-fit:cover;object-position:center center;';width:100%}
.fill{position:absolute;top:0;left:0;height:100%;right:0;bottom:0;padding:0!important;margin:0!important}
.overlay{position:absolute;top:0;bottom:0;height:100%;left:-1px;right:-1px;background-color:rgba(0,0,0,.3);transition:transform .3s,opacity .6s;pointer-events:none}
@media (min-width:360px) and (max-width:415px){.cover .cover-container .slogan{font-size:1.7em;letter-spacing:2px}}
@media (min-width:414px)and (max-width:641px){.cover .cover-container .slogan{font-size:1.8em;letter-spacing:5px}.cover .cover-container p{font-size:1.2em;letter-spacing:2px}}
@media (min-width:640px){.cover .cover-container .slogan{font-size:3em;letter-spacing:10px}.cover .cover-container p{font-size:1.714em;letter-spacing:5px}}
@media (min-width:320px) and (max-width:768px){.cover .cover-container{width:85%}}
@media (min-width:769px){.cover .cover-container{width:65%}}
2. YouTube source
So với cách chèn link video trực tiếp thì cách này lại sử dụng phương pháp nhúng video iframe lấy nguồn từ YouTube, ngoài ra bạn có thể lấy nguồn từ một số trang web chia sẻ video phổ biến như Vimeo, Dailymotion,..., bằng cách nhúng iframe tương tự chỉ khác thay link video của YouTube thành link video của trang web mà bạn muốn nhúng.
+ Code html
<div class='cover'>
<div class='cover-video'>
<iframe allowfullscreen='' frameborder='0' src='https://www.youtube.com/embed/R3AKlscrjmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1'/>
</div>
<div class='cover-container text-center'>
<h1 class='slogan'>Việt Blogger Design</h1>
<p>Chuyên làm dịch vụ: Convert Wordpress sang Blogger - Sửa lỗi, nâng cấp Template - Thiết kế Contact Form từ Google Form</p>
<a class='btn btn-outline-primary' href='https://theme.vietblogger.design/p/dich-vu.html' title=''>ĐẶT DỊCH VỤ</a>
</div>
<p class='more'>Hãy là người tiên phong trong lĩnh vực của bạn</p>
</div>
+ Code css
*,*:before,*:after {box-sizing:border-box}
a{text-decoration:none;outline:none}
.btn{display:inline-block;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);padding:10px 20px;font-size:.81rem;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;margin:.375rem;border:0;-webkit-border-radius:.125rem;border-radius:.125rem;cursor:pointer;text-transform:uppercase;white-space:normal;word-wrap:break-word;color:#fff!important;}
.text-center{text-align:center!important}
.cover{background:#000;position:fixed;top:0;right:0;bottom:0;left:0;z-index:-99}
.cover-video,.cover iframe{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.cover .cover-container{transform:translate(-50%,-50%)!important;top:50%;left:50%;position:absolute;z-index:2;padding:0 15px}
.cover .cover-container .slogan{position:relative;display:block;margin-bottom:10px;color:#fff;font-family:'Roboto',sans-serif;text-transform:uppercase}
.cover .cover-container .slogan:before{position:absolute;bottom:-20px;left:50%;content:"";background:white;width:170px;height:2px;margin-left:-85px}
.cover .cover-container p{display:block;position:relative;z-index:1;margin-bottom:30px;padding-top:24px;color:#fff;font-weight:300;line-height:1.5;text-align:center}
.cover .cover-container .btn{position:relative;z-index:10;text-transform:uppercase;letter-spacing:1px;box-shadow:unset;border:1px solid #fff}
.btn-outline-primary{color:#008df2;background-image:none;background-color:transparent;border-color:#008df2}
.cover .cover-container .btn:hover{border:1px solid #008df2;background-color:#008df2}
.cover .more{position:absolute;bottom:0;left:0;width:100%;margin-bottom:15px;color:#fff;font-size:0.75em;text-transform:uppercase;letter-spacing:10px;text-align:center}
@media (min-width:360px) and (max-width:415px){.cover .cover-container .slogan{font-size:1.7em;letter-spacing:2px}}
@media (min-width:414px)and (max-width:641px){.cover .cover-container .slogan{font-size:1.8em;letter-spacing:5px}.cover .cover-container p{font-size:1.2em;letter-spacing:2px}}
@media (min-width:640px){.cover .cover-container .slogan{font-size:3em;letter-spacing:10px}.cover .cover-container p{font-size:1.714em;letter-spacing:5px}}
@media (min-width:320px) and (max-width:768px){.cover .cover-container{width:85%}}
@media (min-width:769px){.cover .cover-container{width:65%}}
@media (min-aspect-ratio:16/9){.cover-video{height:300%;top:-100%}}
@media (max-aspect-ratio:16/9){.cover-video{width:300%;left:-100%}}
/>
3. Ảnh kết hợp hiệu ứng particles canvas
Hiệu ứng này khá phức tạp vì cần đến link jquery.min.js, particles.min.js và script cấu hình. Tất nhiên nếu sử dụng hiệu ứng này thì quá trình tải trang sẽ bị chậm hơn chút nhưng bù lại nó mang lại một hiệu ứng ma trận dang sợi chỉ chuyển động rất đẹp.
+ Code html
<div class='banner-cover'>
<div class='banner-widget'>
<div class='cover' id='particle-ground'>
<div class='cover-container text-center'>
<h1 class='slogan'>Việt Blogger Design</h1>
<p>Chuyên làm dịch vụ: Convert Wordpress sang Blogger - Sửa lỗi, nâng cấp Template - Thiết kế Contact Form từ Google Form</p>
<a class='btn btn-outline-primary' href='https://theme.vietblogger.design/p/dich-vu.html' title=''>ĐẶT DỊCH VỤ</a>
</div>
<p class='more'>Hãy là người tiên phong trong lĩnh vực của bạn</p>
</div>
</div>
</div>
+ Code css
*,*:before,*:after {box-sizing:border-box}
a{text-decoration:none;outline:none}
.btn{display:inline-block;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);padding:10px 20px;font-size:.81rem;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;margin:.375rem;border:0;-webkit-border-radius:.125rem;border-radius:.125rem;cursor:pointer;text-transform:uppercase;white-space:normal;word-wrap:break-word;color:#fff!important;}
.text-center{text-align:center!important}
.text-uppercase{text-transform:uppercase!important}
.banner-cover{width:100%;-js-display:flex;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}
.banner-widget{float:left;width:100%;min-height:100vh}
.cover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYOhkzWRRDGnWr6ppifNXvO0UBczpUO7gDzjwu-sJiFzc5kWEahyphenhyphenykmdILFCJjT7Dl9-0gJJBDnq45gSMP150_0XXV1TMKJBYIWs5dQV0i_SRHyqZ0piIIuvo6fA2LUWNlWsGi1DN654E/s1600/web-design.png) 50% no-repeat;background-size:cover;overflow:hidden;height:100%;display:block;position:relative}
.cover:before{position:absolute;top:0;left:0;content:"";width:100%;height:100%;background-color:#122153;opacity:0.55;filter:alpha(opacity=55)}
.cover .cover-container{transform:translate(-50%,-50%)!important;top:50%;left:50%;position:absolute;z-index:2;padding:0 15px}
.cover .cover-container .slogan{position:relative;display:block;margin-bottom:10px;color:#fff;font-family:'Roboto',sans-serif;text-transform:uppercase}
.cover .cover-container .slogan:before{position:absolute;bottom:-20px;left:50%;content:"";background:white;width:170px;height:2px;margin-left:-85px}
.cover .cover-container p{display:block;position:relative;z-index:1;margin-bottom:30px;padding-top:24px;color:#fff;font-weight:300;line-height:1.5;text-align:center}
.cover .cover-container .btn{position:relative;z-index:10;text-transform:uppercase;letter-spacing:1px;box-shadow:unset;border:1px solid #fff}
.btn-outline-primary{color:#008df2;background-image:none;background-color:transparent;border-color:#008df2}
.cover .cover-container .btn:hover{border:1px solid #008df2;background-color:#008df2}
.cover .more{position:absolute;bottom:0;left:0;width:100%;margin-bottom:15px;color:#fff;font-size:0.75em;text-transform:uppercase;letter-spacing:10px;text-align:center}
.cover canvas{position:absolute;top:0;left:0;z-index:1}
@media (min-width:360px) and (max-width:415px){.cover .cover-container .slogan{font-size:1.7em;letter-spacing:2px}}
@media (min-width:414px)and (max-width:641px){.cover .cover-container .slogan{font-size:1.8em;letter-spacing:5px}.cover .cover-container p{font-size:1.2em;letter-spacing:2px}}
@media (min-width:640px){.cover .cover-container .slogan{font-size:3em;letter-spacing:10px}.cover .cover-container p{font-size:1.714em;letter-spacing:5px}}
@media (min-width:320px) and (max-width:768px){.cover .cover-container{width:85%}}
@media (min-width:769px){.cover .cover-container{width:65%}}
+ Code jquery
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://vietblogdao.github.io/js/particles.min.js'/>
<script>//<![CDATA[
jQuery(document).ready(function($) {
'use strict';
particlesJS('particle-ground', {
"particles": {
"number": {
"value": 120,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#8AC7F7"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#8AC7F7"
},
"polygon": {
"nb_sides": 5
},
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 4,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 140,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
}
});
});
//]]></script>
Trên đây mình giới thiệu một số hiệu ứng toàn trang với video source, YouTube source và ảnh kết hợp với particles canvas. Các bạn thấy kiểu nào đẹp phù hợp với template mình đang sử dụng lấy code chèn vào.
Chào anh, em muốn làm theo hiệu ứng số 3 cho trang blogger của em mà sau khi làm xong nó thành một trang trắng. Anh chị có thể chỉ giúp em được ko ạ?
Trả lờiXóacác bước em làm như sau
1. xóa toàn bộ nội dung trong phần body thêm đoạn html vào
2. thêm css lên b:skin
3. thêm jquery xuống trước thẻ đóng body
em làm sai ở đoạn nào anh chỉ giúp em với ạ . em cảm ơn.