Membuat Animasi Background dengan CSS3-javascript

Halo, ketemu lagi dengan saya, kali ini saya akan berbagi tutorial atau referensi mengenai bagaimana Membuat Animasi Background Dengan CSS3-javascript, Buat kalian yang ingin tampilan background terlihat cantik dan menarik tidak ada salah nya untuk mencoba cara berikut ini.

Langsung saja, silahkan kalian ketika kode HTML berikut, Boleh banyak atau sedikit.

<h1>Animasi Background</h1>

Bisa juga menggunakan paragraf, bisa disesuaikan dengan kebutuhan, kemudian lanjutkan lagi untuk kode CSS3 berikut ini.

body,html {
  background: #007bff;
  height:100%;
}
h1 {
  height:auto;
  display:table;
  width: 80%;
  text-align:center;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0;left: 0;bottom: 0;right: 0;
  color: white;
  font-family: 'Raleway', sans-serif;
  font-weight:300;
  font-size:3em;
}

h2 {
    position: fixed;
    text-align:center;
    top:10px;
    right:20px;
    color:white;
    font-size: 20px;
    font-family: Roboto;
    font-weight: normal;
		z-index:999;
    span{
      font-size:15px;
      font-weight: lighter;
    }
    a{
      color:white;
      font-size:15px;
      padding: 0 30px

    }
  }

Kalo sudah, terakhir ketikan kode Javascript berikut untuk membuat background terlihat lebih hidup dengan animasi-animasi.

  var background = {}
  
  background.initializr = function (){
    
    var $this = this;
     

   
    //option
    $this.id = "background_css3";
    $this.style = {bubbles_color:"#fff",stroke_width:0, stroke_color :"black"};
    $this.bubbles_number = 30;
    $this.speed = [1500,8000]; //milliseconds
    $this.max_bubbles_height = $this.height;
    $this.shape = false // 1 : circle | 2 : triangle | 3 : rect | false :random
    
    if($("#"+$this.id).lenght > 0){
      $("#"+$this.id).remove();
    }
    $this.object = $("<div style='z-inde:-1;margin:0;padding:0; overflow:hidden;position:absolute;bottom:0' id='"+$this.id+"'> </div>'").appendTo("body");
    
    $this.ww = $(window).width()
    $this.wh = $(window).height()
    $this.width = $this.object.width($this.ww);
    $this.height = $this.object.height($this.wh);
    
    
    $("body").prepend("<style>.shape_background {transform-origin:center; width:80px; height:80px; background: "+$this.style.bubbles_color+"; position: absolute}</style>");
    
    
    for (i = 0; i < $this.bubbles_number; i++) {
        $this.generate_bubbles()
    }
    
  }

  
  
  

   background.generate_bubbles = function() {
     var $this = this;
     var base = $("<div class='shape_background'></div>");
     var shape_type = $this.shape ? $this.shape : Math.floor($this.rn(1,3));
     if(shape_type == 1) {
       var bolla = base.css({borderRadius: "50%"})
     }else if (shape_type == 2){
       var bolla = base.css({width:0, height:0, "border-style":"solid","border-width":"0 40px 69.3px 40px","border-color":"transparent transparent "+$this.style.bubbles_color+" transparent", background:"transparent"}); 
     }else{
       var bolla = base; 
     }    
     var rn_size = $this.rn(.8,1.2);
     bolla.css({"transform":"scale("+rn_size+") rotate("+$this.rn(-360,360)+"deg)", top:$this.wh+100, left:$this.rn(-60, $this.ww+60)});        
     bolla.appendTo($this.object);
     bolla.transit({top: $this.rn($this.wh/2,$this.wh/2-60), "transform":"scale("+rn_size+") rotate("+$this.rn(-360,360)+"deg)", opacity: 0},$this.rn($this.speed[0],$this.speed[1]), function(){
       $(this).remove();
       $this.generate_bubbles();
     })
       
    }


background.rn = function(from, to, arr) {
  if(arr){
          return Math.random() * (to - from + 1) + from;
  }else{
    return Math.floor(Math.random() * (to - from + 1) + from);
  }
    }
background.initializr()

Kalo sudah semua, jangan lupa disimpan, kemudian coba jalankan di browser masing-masing, dan lihat hasilnya. Selesai.

Baik itulah tutorial bagaimana Membuat Animasi Background Dengan CSS3-javascript, semoga bermanfaat, sampai ketemu dilain kesempatan.

Selamat mencoba 🙂