Cách áp dụng hiệu ứng Parallax.js cho blogspot và website - NLD Blog

Chào các bạn, bài viết này mình sẽ chia sẻ về hiệu ứug Parallax. Hiệu ứng này sẽ chuyển động khi bạn di chuyển con trỏ chuột trên trang web, còn có một kiểu nữa là chuyển động khi cuộn chuột bài này thì mình sẽ chia sẻ hiệu ứng khi di chuyển chuột trên trang web nhé.

Hiệu ứng Parallax là gì?

Đầu tiên Parallax mouse move là hiệu ứng khi các yếu tố đồ họa/văn bản ở đằng trước chuyển động lệch với tốc độ chuyển động của chuột, hình thành cảm giác giữa chúng có khoảng cách, khiến website của bạn có một độ sâu 3D cực tinh tế.

Nếu ứng dụng hợp lý, parallax có thể đem lại những trải nghiệm vô cùng thú vị, khiến người xem ấn tượng mạnh với trang web. Tuy nhiên, nếu không được thiết kế tốt, hiệu ứng này sẽ làm cho website trở nên hỗn độn, gây khó chịu cho người dùng, làm giảm hiệu quả mục đích trang. Hãy nhớ rằng chúng ta phải thiết kế cho cả giao diện trên điện thoại, parallax có thể khiến cho thiết bị chậm lại, hoặc cản trở việc kéo trang.

Cài đặt

Để sử dụng các bạn thêm đoạn cdn sau vào trong theme của bạn.

<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>

Tạo phần tử HTML

Chúng ta cần phải xác định đối tượng áp dụng hiệu, trong bài này mình sẽ lấy ví dụ intro xuất hiện màn hình đầu tiên của trang web như ảnh thumbnail ở trên đầu bài viết. Mình sẽ viết HTML như sau:

<div class='home-intro'>
    <!--Thêm các phần tử khác của bạn-->
 <div id='home-intro-cloud-paralax'>
    <!--Các phần tử chuyển động sẽ nằm trong này-->
 </div>
</div>

CSS cho code trên mình sẽ để như sau:

.home-intro {
   position:relative;
   width:100%;
   height:100vh;
   margin:0!important;
   padding:0!important;
   background:url(https://cdn.jsdelivr.net/gh/ngylduy/parallax/one.png) no-repeat top center;
   background-size:cover;
   background-attachment:fixed;
   background-position:center;
   overflow:hidden
}
#home-intro-cloud-parallax {
   bottom:0;
   left:0;
   position:absolute;
   padding:0;
   z-index:100
}

Thay https://cdn.jsdelivr.net/gh/ngylduy/parallax/one.png bằng link ảnh background của bạn nhé.

Thêm JS áp dụng hiệu ứng

let ourParallax = document.getElementById('home-intro-cloud-paralax');
let parallaxInstance = new Parallax(ourParallax);

Trong đó home-intro-cloud-paralax là ID là ID của phần tử cha của các phần tử sẽ chuyền động như ví dụ ở trên.

Cấu hình

Tiếp theo chúng ta sẽ thêm những phần tử chuyển động như sau:

<div id='home-intro-cloud-parallax'>
<img class='img1' data-depth='0.25' alt='' src='https://cdn.jsdelivr.net/gh/ngylduy/parallax/cloud.png'/></li>
<img class='img2' data-depth='0.55' alt='' src='https://cdn.jsdelivr.net/gh/ngylduy/parallax/cloud-2.png'/></li>
<img class='img3' data-depth='0.75' alt='' src='https://cdn.jsdelivr.net/gh/ngylduy/parallax/cloud-2.png'/></li>
</div>

Trong đó những thẻ HTML là phần tử sẽ chuyển động khi bạn di chuyển chuột và bạn cũng có thêm thêm bao nhiêu tuỳ bạn nhé. Thay đường dẫn hình ảnh của các vật thể bên trong thẻ img nhé các bạn. Và data-depth là độ sâu của phần tử nó cũng như z-index vậy.

Và như ví dụ trên mình sẽ viết CSS cho các phần tử bên trong để xác định vị trí cho nó như sau:

#home-intro-cloud .img1{margin-left:-399px}
#home-intro-cloud .img2{margin-top:100px}
#home-intro-cloud .img3{margin-left:181%;margin-top:100px}

Các bạn sử dụng thuộc tính margin để điều chỉnh vị trí nhé, không dùng được transform vì khi áp dụng hiệu ứng trên nó sẽ không có tác dụng và hiệu ứng sẽ không hoạt động đúng.

Kết luận

Cơ bản hiệu ứng này là như vậy bạn cũng có thể áp dụng thêm thuộc tính transition cho các phần tử chuyển động để cho trang web thêm đặc biệt.

Như demo trên thì mình hoàn thiện nó như này các bạn cũng có thể tham khảo: Intro with Parallax. Bạn nào cần thì mình cũng để code ở bên dưới các bạn tham khảo.

<div class='home-intro'>
<div class='home-intro-inside'>
<h1><span style='color:yellow'>H</span>ãy nhớ rằng<span style='color:red'>.</span></h1>
<h3>Đừng so sánh mình với bất cứ ai trong thế giới này.<br/>Nếu bạn làm như vậy có nghĩa bạn đang sỉ nhục chính bản thân mình.</h3>
<div class='social-link'>
<a href='//facebook.com/duy.6888' rel='noopener' target='_blank' title='Theo dõi tôi trên Facebook'><i class='fa fa-facebook'></i></a>
<a href='//twitter.com/ngylduy' rel='noopener' target='_blank' title='Theo dõi tôi trên Twitter'><i class='fa fa-twitter'></i></a>
<a href='//instagram.com/ngylduy' rel='noopener' target='_blank' title='Theo dõi tôi trên Instagram'><i class='fa fa-instagram'></i></a>
<a href='//www.pinterest.com/ngylduy' rel='noopener' target='_blank' title='Theo dõi tôi trên Pinterest'><i class='fa fa-pinterest'></i></a>
</div>
</div>
<ul id='home-intro-uni'>
<li class='layer u1' data-depth='0.25'><img alt='' src='https://cdn.jsdelivr.net/gh/ngylduy/parallax/122.png' width='100%'/></li>
<li class='layer u2' data-depth='0.75'><img alt='' src='https://cdn.jsdelivr.net/gh/ngylduy/parallax/222.png' width='100%'/></li>
<li class='layer u3' data-depth='0.57'><img alt='' src='https://cdn.jsdelivr.net/gh/ngylduy/parallax/322%20(2).png' width='100%'/></li>
<li class='layer u4' data-depth='0.97'><img alt='' src='https://cdn.jsdelivr.net/gh/ngylduy/parallax/422.png' width='90%'/></li>
<li class='layer u5' data-depth='1.07'><img alt='' src='https://cdn.jsdelivr.net/gh/ngylduy/parallax/522.png' width='100%'/></li>
<li class='layer u6' data-depth='1.27'><img alt='' src='https://cdn.jsdelivr.net/gh/ngylduy/parallax/622.png' width='100%'/></li>
</ul>
<ul id='home-intro-cloud'>
<li class='layer l1' data-depth='0.25'><img alt='' src='https://cdn.jsdelivr.net/gh/ngylduy/parallax/cloud.png'/></li>
<li class='layer l2' data-depth='0.75'><img alt='' src='https://cdn.jsdelivr.net/gh/ngylduy/parallax/cloud-2.png'/></li>
<li class='layer l3' data-depth='0.57'><img alt='' src='https://cdn.jsdelivr.net/gh/ngylduy/parallax/cloud-2.png'/></li>
</ul>
</div>

<style>
.home-intro {position:relative;display:table;width:100%;height:100vh;margin:0!important;padding:0!important;background:url(https://cdn.jsdelivr.net/gh/ngylduy/parallax/one.png) no-repeat top center;background-size:cover!important;opacity:.9;background-size:cover;background-attachment:fixed;background-position:center;overflow:hidden}
.home-intro-inside{position:absolute;top:20%;width:100%;left:0;right:0;display:block}
.home-intro:before{content:'';z-index:0;position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(circle, rgba(0, 0, 0, 0.23), black)}
.home-intro h1 {text-align:center;color:white;font-size:4em;text-shadow:-1px 1px 0 grey;font-family:"Lobster",sans-serif;margin-top:0px;font-weight:400;margin:0}
.home-intro h3 {text-align:center;color:white;font-size:21px;text-shadow:-0.5px 0.5px 0 grey;line-height: 1.65em;font-family:"Roboto",sans-serif;margin-top:23px;font-weight: 400}
#home-intro-cloud{bottom:0;left:0;position:absolute;margin:0 0 -30px;padding:0;z-index:100}
#home-intro-cloud .l1{margin-left:-399px}
#home-intro-cloud .l2{margin-top:100px}
#home-intro-cloud .l3 img{margin-left:181%;margin-top:100px}
#home-intro-cloud .l4 img{margin-left:291%;margin-top:-310px}
#home-intro-uni{top:0;left:0;position:absolute;margin:0;padding:0;z-index:-1}
#home-intro-uni .u1{margin:-100px}
.social-link{text-align: center;z-index:100;margin-top:20px}
.social-link a{text-align:center;color:#fff;display:inline-block;margin-right:30px}
.social-link a:hover{color:#fff}
.social-link a i{font-size:20px}
.social-link a:last-child{margin-right:0!important}
</style>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js'></script>

<script>//<![CDATA[
$(window).load(function () {
    var scene = document.getElementById('home-intro-cloud');
	var sceneuni = document.getElementById('home-intro-uni');
    var parallax = new Parallax(scene);
	var parallax = new Parallax(sceneuni);
})
var headerlogo = document.querySelector('.home-intro-inside');
window.addEventListener('scroll', function(){
	var scrolled = window.scrollY;
	headerlogo.style.transform = "translate(0px,"+ scrolled/2 +"%)";
})
//]]></script>

À, quên các bạn nhớ thêm thư viện JQuery vào nhé:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>