Banner

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

Thietkeblogspot.Com đăng lúc theo dõi trên

Giới thiệu 3 ứng toàn trang đẹp phổ biến thường được các website sử dụng và code css, html và script (nếu có) của mỗi hiệu ứng


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

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

Xem demo

+ 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.

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

Xem demo

+ 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>

+ 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.

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

Xem demo

+ 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.


Blogger tips CSS HTML Jquery
Thêm đánh giá

1 bình luận

Bài cùng tác giả

Đăng ký nhận thông báo email từ FeedBurner

Nhận thông báo ngay qua email từ FeedBurner để không bỏ lỡ bài đăng mới nào từ Blog

Email nhận thông báo *

*Vui lòng kiểm tra hộp thư đến của bạn để biết thông báo xác minh từ FeedBurner. Nếu bạn không thấy email xác nhận, vui lòng kiểm tra thư mục thư rác.

Liên hệ Zalo