Đỗ Tuấn Hải | Website Chia Sẻ Thủ Thuật - Kiến Thức Tổng Hợp: Hiệu ứng slide đẹp cho blog - Minh Blogger

Chào các bạn, vậy là một mùa giáng sinh nữa sắp đến rồi, nên mình sẽ chia sẻ cho mọi người một hiệu ứng slide đẹp cho blog nhé.

Các bạn có thể thêm JS vào cho nó hoàn thiện hơn vì đây chỉ là một hiệu ứng slide lướt và sau đó sẽ không có gì ở sau nữa nhé :3

Đầu tiên các bạn tạo widget mới và chèn code sau

<script type="text/javascript">
var select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
  animationWindow = select('#animationWindow'),   
    animData = {
  wrapper: animationWindow,
  animType: 'svg',
  loop: true,
  prerender: true,
  autoplay: true,
  path: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/christmas_pudding_slider.json',
  rendererSettings: {
    //context: canvasContext, // the canvas context
    //scaleMode: 'noScale',
    //clearCanvas: false,
    //progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
    //hideOnTransparent: true //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
  }  
 }, anim;

 anim = bodymovin.loadAnimation(animData);
 anim.addEventListener('DOMLoaded', onDOMLoaded);
 anim.setSpeed(1);

function onDOMLoaded(e){

 anim.addEventListener('complete', function(){});
}

//ScrubBodymovinTimeline(anim)
</script>
<style type="text/css">
body {
 background-color: #111;
 overflow: hidden;
 text-align: center;
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

#animationWindow {
 width: 100%;
 height: 100%;
}

.stripeFill {
 fill:#FF0000 !important;
}
</style>
<div id="animationWindow">
</div>

Đây là demo

Bài đăng đã hết chào các bạn