Particles Login

├── README.md ├── index.html ├── main.js ├── particles.json └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Particle-Effect 2 | Particle and TypeWriter Text 3 | 4 | ## How to 5 | 1. Modify the Text. in index.html for desired typewriter and display Text 6 | 2. Modify particles.json for the particles configuration 7 | 3. Modify styles.css for background, text-position, etc. 8 | 4. Run with `Live Server` 9 | 10 | #### Star the repo if it helped you.😀 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Particles Login 8 | 9 | 10 | 11 | 12 |

13 | 14 |

15 |

Hey there! I'm Apurva. I like
16 | 17 |

18 |

19 | 20 |

21 | 22 | 23 | 24 | 25 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | // const TypeWriter = function(txtElement, words, wait = 3000) { 2 | // this.txtElement = txtElement; 3 | // this.words = words; 4 | // this.txt = ''; 5 | // this.wordIndex = 0; 6 | // this.wait = parseInt(wait, 10); 7 | // this.type(); 8 | // this.isDeleting = false; 9 | // } 10 | 11 | // // Type Method 12 | // TypeWriter.prototype.type = function() { 13 | // // Current index of word 14 | // const current = this.wordIndex % this.words.length; 15 | // // Get full text of current word 16 | // const fullTxt = this.words[current]; 17 | 18 | // // Check if deleting 19 | // if(this.isDeleting) { 20 | // // Remove char 21 | // this.txt = fullTxt.substring(0, this.txt.length - 1); 22 | // } else { 23 | // // Add char 24 | // this.txt = fullTxt.substring(0, this.txt.length + 1); 25 | // } 26 | 27 | // // Insert txt into element 28 | // this.txtElement.innerHTML = `${this.txt}`; 29 | 30 | // // Initial Type Speed 31 | // let typeSpeed = 300; 32 | 33 | // if(this.isDeleting) { 34 | // typeSpeed /= 2; 35 | // } 36 | 37 | // // If word is complete 38 | // if(!this.isDeleting && this.txt === fullTxt) { 39 | // // Make pause at end 40 | // typeSpeed = this.wait; 41 | // // Set delete to true 42 | // this.isDeleting = true; 43 | // } else if(this.isDeleting && this.txt === '') { 44 | // this.isDeleting = false; 45 | // // Move to next word 46 | // this.wordIndex++; 47 | // // Pause before start typing 48 | // typeSpeed = 500; 49 | // } 50 | 51 | // setTimeout(() => this.type(), typeSpeed); 52 | // } 53 | 54 | 55 | // ES6 Class 56 | class TypeWriter { 57 | constructor(txtElement, words, wait = 3000) { 58 | this.txtElement = txtElement; 59 | this.words = words; 60 | this.txt = ''; 61 | this.wordIndex = 0; 62 | this.wait = parseInt(wait, 10); 63 | this.type(); 64 | this.isDeleting = false; 65 | } 66 | 67 | type() { 68 | // Current index of word 69 | const current = this.wordIndex % this.words.length; 70 | // Get full text of current word 71 | const fullTxt = this.words[current]; 72 | 73 | // Check if deleting 74 | if(this.isDeleting) { 75 | // Remove char 76 | this.txt = fullTxt.substring(0, this.txt.length - 1); 77 | } else { 78 | // Add char 79 | this.txt = fullTxt.substring(0, this.txt.length + 1); 80 | } 81 | 82 | // Insert txt into element 83 | this.txtElement.innerHTML = `${this.txt}`; 84 | 85 | // Initial Type Speed 86 | let typeSpeed = 300; 87 | 88 | if(this.isDeleting) { 89 | typeSpeed /= 2; 90 | } 91 | 92 | // If word is complete 93 | if(!this.isDeleting && this.txt === fullTxt) { 94 | // Make pause at end 95 | typeSpeed = this.wait; 96 | // Set delete to true 97 | this.isDeleting = true; 98 | } else if(this.isDeleting && this.txt === '') { 99 | this.isDeleting = false; 100 | // Move to next word 101 | this.wordIndex++; 102 | // Pause before start typing 103 | typeSpeed = 500; 104 | } 105 | 106 | setTimeout(() => this.type(), typeSpeed); 107 | } 108 | } 109 | 110 | 111 | // Init On DOM Load 112 | document.addEventListener('DOMContentLoaded', init); 113 | 114 | // Init App 115 | function init() { 116 | const txtElement = document.querySelector('.txt-type'); 117 | const words = JSON.parse(txtElement.getAttribute('data-words')); 118 | const wait = txtElement.getAttribute('data-wait'); 119 | // Init TypeWriter 120 | new TypeWriter(txtElement, words, wait); 121 | } -------------------------------------------------------------------------------- /particles.json: -------------------------------------------------------------------------------- 1 | { 2 | "particles":{ 3 | "number":{ 4 | "value":100 5 | }, 6 | "color":{ 7 | "value":"#fff" 8 | }, 9 | "shape":{ 10 | "type":"circle", 11 | "stroke":{ 12 | "width":1, 13 | "color":"#ccc" 14 | }, 15 | "image":{ 16 | "src":"http://www.iconsdb.com/icons/preview/white/contacts-xxl.png" 17 | } 18 | }, 19 | "opacity":{ 20 | "value":0.5, 21 | "random":true, 22 | "anim":{ 23 | "enable":false, 24 | "speed":1 25 | } 26 | }, 27 | "size":{ 28 | "value": 5, 29 | "random":false, 30 | "anim":{ 31 | "enable": false, 32 | "speed":30 33 | } 34 | }, 35 | "line_linked":{ 36 | "enable": true, 37 | "distance": 120, 38 | "color":"#fff", 39 | "width":1 40 | }, 41 | "move":{ 42 | "enable":true, 43 | "speed":2, 44 | "direction":"none", 45 | "straight":false 46 | } 47 | }, 48 | "interactivity":{ 49 | "events":{ 50 | "onhover":{ 51 | "enable":true, 52 | "mode":"repulse" 53 | }, 54 | "onclick":{ 55 | "enable": true, 56 | "mode":"push" 57 | } 58 | }, 59 | "modes":{ 60 | "repulse":{ 61 | "distance":50, 62 | "duration":0.4 63 | }, 64 | "bubble":{ 65 | "distance":100, 66 | "size":10 67 | } 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin:0; 3 | font: normal 16px Arial, Helvetica, sand-serif; 4 | color:#333; 5 | } 6 | 7 | #particles-js{ 8 | background:black; 9 | height:100vh ; 10 | width: 100vw ; 11 | display: flex; 12 | /* flex-direction: column; */ 13 | justify-content: left; 14 | /* text-align: center; */ 15 | 16 | align-content: center; 17 | 18 | } 19 | .center{ 20 | position: absolute; 21 | top: 50%; 22 | left: 50%; 23 | transform: translate(-50%,-50%); 24 | font-style: Times; 25 | } 26 | 27 | 28 | #text{ 29 | top: 30px; 30 | padding-top: 100px; 31 | } 32 | 33 | @import url('https://fonts.googleapis.com/css?family=Raleway:200,100,400'); 34 | 35 | body { 36 | font-family: 'Raleway', sans-serif; 37 | height: 100vh; 38 | color: #ccc; 39 | overflow:hidden; 40 | } 41 | 42 | 43 | 44 | .container { 45 | display: flex; 46 | flex-direction: column; 47 | justify-content: center; 48 | height: 100%; 49 | /* padding: 0 3rem; */ 50 | margin: auto; 51 | } 52 | 53 | p, h2 { 54 | font-weight: 200; 55 | margin: 0.4rem; 56 | } 57 | 58 | p { 59 | font-size: 3.5rem; 60 | align-content: center; 61 | color: white ; 62 | margin: auto; 63 | } 64 | 65 | 66 | /* Cursor */ 67 | .txt-type > .txt { 68 | border-right: 0.2rem solid #777; 69 | } 70 | 71 | @media(min-width: 1200px) { 72 | h1 { 73 | font-size: 5rem; 74 | } 75 | } 76 | 77 | @media(max-width: 800px) { 78 | .container { 79 | padding: 0 1rem; 80 | margin: auto; 81 | display: flex; 82 | flex-direction: column; 83 | justify-content: center; 84 | padding-top: 100px; 85 | } 86 | 87 | h1 { 88 | font-size: 3rem; 89 | } 90 | } 91 | 92 | @media(max-width: 500px) { 93 | h1 { 94 | font-size: 2.5rem; 95 | } 96 | 97 | h2 { 98 | font-size: 1.5rem; 99 | } 100 | } --------------------------------------------------------------------------------