SHARE INTRO GIỚI THIỆU HIỆU ỨNG CHUYỂN ĐỘNG TUYỆT ĐẸP CHO BLOGSPOT

- Trong quá trình làm việc, cũng như là trong quá trình viết bài, khó tránh khỏi sai sót, rất mong các bạn, anh chị em bỏ qua. Đồng thời do trình độ lập trình & kinh nghiệm thực tiễn còn hạn chế nên giao diện và bài viết còn nhiều lỗi ! Em rất mong nhận được ý kiến đóng góp từ mọi người, để bản thân học hỏi thêm được nhiều kinh nghiệm và sẽ cố gắng hoàn thiện trong tương lai. Em xin chân thành cảm ơn !
- Mọi chi tiết xin liên hệ:
• Phone number: 038.689.7757
• Facebook: fb.com/leanhduc.pro.vn
• Email: Admin@leanhduc.pro.vn

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


DEMO

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

Không có nhận xét nào