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 trước mình đã 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.
Hôm nay ở bài này mình sẽ giới thiệu thêm 1 hiệu ứng nữa
Ảnh kết hợp hiệu ứng particles nasa
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'>Thiết Kế Blogspot</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":400,"density":{"enable":true,"value_area":800}},"color":{"value":"#fff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":true,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":10,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":false,"distance":500,"color":"#ffffff","opacity":0.4,"width":2},"move":{"enable":true,"speed":6,"direction":"bottom","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":"bubble"},"onclick":{"enable":true,"mode":"repulse"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":0.5}},"bubble":{"distance":400,"size":4,"duration":0.3,"opacity":1,"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 ảnh kết hợp với particles. 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. Xem bài trước Giới thiệu một số hiệu ứng toàn trang đẹp thường được sử dụng trong thiết kế web
