-->

Tạo hiệu ứng toàn trang cho Blogspot

Lê Vạn Bảo Trọng Tác giả: Lê Vạn Bảo Trọng
Xuất bản: 26 Aug, 2019
Hello các bạn, mình là Trọng đây. Do hôm nay đi về muộn nên tận bây giờ mới có bài viết cho các bạn đây. Bài này sẽ hướng dẫn cho các bạn đam mê viết Blog như mình nhé, các bạn trick bên FB có thể xem và tìm tòi, tham khảo nhé. Hôm nay mình sẽ chia sẽ các hiệu ứng toàn trang cho Blogspot nhé, cái này mình lượm được bên  Việt Designer nhé, link nguồn mình sẽ để ở cuối bài nha!
1, Cover Canvas
Hiệu ứng này khá phức tạp vì cần đến link .js và script cấu hình. Nhưng 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 trông khá bắt mắt
  • Code HTML ( Chèn nơi bạn muốn hiển thị)
    • <div class='banner-cover'>
  <div class='banner-widget'>
    <div class='cover' id='particle-ground'>
      <div class='cover-container text-center'>
        <h1 class='slogan'>BẢO TRỌNG IT</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>

  • CSS 
    • <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*,*: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/AVvXsEiNHyrwWwPf2_P4Hd0r8Zz-ePMsX6M9klb4zOV7U6fJDG0pCPF5t7E4AIBhBFryXYpXyRProL2kW8FYuwcI01mZubTw7Nx5f5yCsFhVFLhqv_BlVikbFFCaOjBZPAlZd9u58F7Pg5mc6ow/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%}} 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>

  • Thư viện JS ( chèn trước thẻ đóng body)
    • <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>

2, Video
Hiệu ứng này khá dễ, chỉ cần có link .mp4 webm.. thì các bạn có thể dùng được thoải má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'>Bảo Trọng IT</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>

  • 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%}}
3, Nguồn Youtube
Cái này nhúng nguồn từ Diu Túp xong thay vào code là xong chứ có gì đâu :)) Cũng giống hiệu ứng trên nên mình không để demo nữa nhé!
  • Code HTMl
    • <div class='cover'>
  <div class='cover-video'>
    <iframe allowfullscreen='' frameborder='0' src='https://www.youtube.com/embed/R3AKlscrjmQ?controls=0&amp;showinfo=0&amp;rel=0&amp;autoplay=1&amp;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>

  • 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%}}



Chúc các bạn thành công
**Nguồn: Thiết kế Blogspot**

Thêm đánh giá

Bài đăng mới hơn Bài đăng cũ hơn
Tags:
Reaction
0 Comment Emoticon


Không có nhận xét nào. Bạn hãy là người đầu tiên!

Bài viết liên quan

Copyright © Bảo Trọng IT - All Right Reserved.
DMCA.com Protection Status