SHARE INTRO GIỚI THIỆU HIỆU ỨNG CHUYỂN ĐỘNG TUYỆT ĐẸP CHO BLOGSPOT
Xuất bản:
LỜI MỞ ĐẦU
Xin chào các bạn đã đến với bài viết tiếp theo của mình. Nay đi thăm các blogger thấy bên anh Niệm Style có cái intro hay hay nên mình mạn phép Rip về chia sẻ cho các bạn nè. Không linh tinh luyên thuyên nữa thì chúng ta bắt đầu nào!
DEMO & CODE
THỰC HÀNH:
Các bạn copy toàn bộ Code phía dưới rồi bỏ vào bỏ vào chỗ cần hiển thị và lưu lại thế là xong (thường thì người ta để ở đầu trang đó)
<!-- Intro -->
<style>
*,*:before,*:after {box-sizing:border-box}
a{text-decoration:none;outline:none}
.lad{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}
.banner2-cover{width:100%;-js-display:flex;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}
.banner2-widget{float:left;width:100%;min-height:600px}
.cover{background:url(https://i.imgur.com/OgPcHqz.jpg) 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;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 .lad{position:relative;z-index:10;text-transform:uppercase;letter-spacing:1px;box-shadow:unset;border:1px solid #fff}
.lad-outline-primary{color:#008df2;background-image:none;background-color:transparent;border-color:#008df2}
.cover .cover-container .lad: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%}}
</style>
<script src='https://xxleanhducxx.000webhostapp.com/JSTEMPLATE/intro1.js'></script>
<script src='https://xxleanhducxx.000webhostapp.com/JSTEMPLATE/Intro2.js'></script>
<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>
<div class='banner2-cover'>
<div class='banner2-widget'>
<div class='cover' id='particle-ground'>
<div class='cover-container text-center'>
<h1 class='slogan'>LÊ ANH ĐỨC</h1>
<p>Nơi chia sẻ kiến thức, thủ thuật về Blog, Facebook, Windows,...</p>
<a class='lad lad-outline-primary' href='https://lucky268.blogspot.com/search/label/TH%E1%BB%A6%20THU%E1%BA%ACT%20BLOGGER' title=''>XEM NGAY NÀO</a>
</div>
<p class='more'>Hãy xem theo cách của bạn</p>
</div>
</div>
</div>
<!-- Intro -->
LỜI KẾT
Như vậy là mình đã share cho các bạn một intro tuyệt đẹp rồi nha. Mọi thắc mắc hãy để lại một comment phía dưới, mình sẽ cố gắng giải đáp trong thời gian ngắn nhất. Chúc các bạn thành công !
@Copyright Lê Anh Đức
Nghiêm cấm sao chép dưới mọi hình thức !
Chưa có bình luận nào, hãy là người đầu tiên!