Skip to main content

Particle Js Example

Particle Js Example

 it is state foreword example we just need to changes in .html , .css And Very Importantly .Json File

1.html file(Index.html file):
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Particles Login</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="particles-js">
  
  </div>

  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

  <script>
    particlesJS.load('particles-js', 'particles.json', function(){
      console.log('particles.json loaded...');
    });
  </script>
</body>
</html> 
2. CSS file:(style.css)
body{
  margin:0;
  font: normal 16px Arial, Helvetica, sand-serif;
  color:#333;
}

#particles-js{
  background:firebrick;
  height:400px;
}
 3 . Most Important json file, in this file contaion all property like on move, onclick , links and may more.
JSon file(particles.json):
{
  "particles":{
    "number":{
      "value":400
    },
    "color":{
      "value":"#fff"
    },
    "shape":{
      "type":"circle",
      "stroke":{
        "width":1,
        "color":"#ccc"
      },
      "image":{
        "src":"http://www.iconsdb.com/icons/preview/white/contacts-xxl.png"
      }
    },
    "opacity":{
      "value":0.5,
      "random":true,
      "anim":{
        "enable":false,
        "speed":1
      }
    },
    "size":{
      "value": 5,
      "random":false,
      "anim":{
        "enable": false,
        "speed":30
      }
    },
    "line_linked":{
      "enable": true,
      "distance": 120,
      "color":"#fff",
      "width":1
    },
    "move":{
      "enable":true,
      "speed":2,
      "direction":"none",
      "straight":false
    }
  },
  "interactivity":{
    "events":{
      "onhover":{
        "enable":true,
        "mode":"repulse"
      },
      "onclick":{
        "enable": true,
        "mode":"push"
      }
    },
    "modes":{
      "repulse":{
        "distance":50,
        "duration":0.4
      },
      "bubble":{
        "distance":100,
        "size":10
      }
    }
  }
}



Comments

Post a Comment

Popular posts from this blog

>>list_numbers = [12,6,8,78] >>list_numbers[::-1] [78, 8, 6, 12] # Reverse a List >>list_numbers[-1:] [78] >>list_numbers[:-1] [12, 6, 8] #Remove a last number >>list_numbers[-1::] [78] >>list_numbers[-2::] [8, 78] # Last Two Element >>list_numbers[:-2] [12, 6] ########################################### Two List match one to end list_b = [5, 6, 7, 8,34] list_a = [1, 2, 3, 4, 90,80] c = map(lambda x,y:[x,y],list_a,list_b) for i in c:     print(i)
Post a Comment
Read more

My First Game Application.........

APK file Link
Post a Comment
Read more

CHat Bot In java

package com.gaurav.bole; import java.awt.Color; import java.awt.event.KeyEvent; import java.awt.event.KeyListener; import javax.swing.JFrame; import javax.swing.JPanel; import javax.swing.JScrollPane; import javax.swing.JTextArea; import javax.swing.Scrollable; public class ChatBoot extends JFrame implements KeyListener {  JPanel p=new JPanel();  JTextArea dilog=new JTextArea(20,50);  JTextArea input= new JTextArea(1,50);  JScrollPane scroll= new JScrollPane(dilog,    JScrollPane.VERTICAL_SCROLLBAR_AS_NEEDED,    JScrollPane.HORIZONTAL_SCROLLBAR_AS_NEEDED    );  String[][] chatBot={    //standerds greeting    {"hi","hell","him"},    {"hi","hello","hey"},    //question    {"how r u","how are you","how are u","how r you"},    {"good","doing well","ya i am ok"},    //..........    {"sut up","you're b...
Post a Comment
Read more