Aprende como hacer un sitio web con temática «hacker» usando partículas en JS.
Share on Pinterest
Comparte con tus amigos
En el articulo pasado aprendimos como utilizar particulas con javascript, y en este tutorial aprenderemos como hacer un diseño web con temática de «hackers» aprovechando de estas partículas.
Aquí tienes un demo del sitio que estaremos realizando
Demo: http://falconmasters.com/demos/sitio_estilo_hacker/
El objetivo de este tutorial es que puedas aprender como utilizar las partículas en proyectos reales, en este caso estableciéndolas de fondo para el sitio.
Para este tutorial yo supongo que ya sabes HTML y CSS, si aun no lo haces te invito a que veas mis cursos para que entiendas de lo que voy a hablar.
Curso de HTML básico: https://www.falconmasters.com/cursos/curso-de-html-basico/curso-html-basico/
Curso de CSS básico: https://www.falconmasters.com/cursos/curso-css-basico/curso-css-basico/
Recursos:
Google Fons (font «oswald»): http://www.google.com/fonts
Jquery: http://code.jquery.com/jquery-latest.js
Particles JS: http://vincentgarreau.com/particles.js/
Como hacer efecto partículas en movimiento con Javascript: https://www.falconmasters.com/web-design/efecto-particulas-javascript/
En esta ocasión solo habrá videotutorial ya que no tiene sentido explicar la estructura HTML y CSS.
Codigo HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Particulas</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="estilos.css"> <link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'> </head> <body> <div id="particles-js"></div> <header> <div class="menu"> <div class="contenedor"> <div class="logo">FalconMasters</div> <nav> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contacto</a></li> </ul> </nav> </div> </div> </header> <div class="texto"> <h2>User: F4lc0nMast3rs</h2> <br> <p>Pass: www.falconmasters.com</p> </div> <div class="principal contenedor"> <article> <h2 class="titulo">Titular del Articulo</h2> <p class="fecha">26 de Enero de 2015</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> <article> <h2 class="titulo">Titular del Articulo</h2> <p class="fecha">26 de Enero de 2015</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> </div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="particles.min.js"></script> <script src="particulas.js"></script> </body> </html>
Código CSS:
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family:oswald, helvetica, arial, sans-serif;
background: url(bg.jpg);
background-size:cover;
background-attachment: fixed;
background-position:0 0px;
}
.contenedor {
width: 90%;
max-width:1000px;
margin:auto;
}
#particles-js {
width: 100%;
height:100%;
position: fixed;
background:rgba(0,0,0,.8);
}
header {
position: relative;
height: auto;
}
header .menu {
background:rgba(255,255,255,.7);
overflow: hidden;
}
header .logo {
color:rgba(0,0,0,.8);
float: left;
font-size:30px;
line-height:80px;
}
header nav {
float: right;
}
header nav ul {
list-style: none;
}
header nav ul li {
float: left;
}
header nav ul li a {
color:rgba(0,0,0,.8);
text-decoration: none;
display: block;
font-size:18px;
padding:0 20px;
line-height:80px;
}
header nav ul li:hover {
background:rgba(0,0,0,.8);
border-bottom: inset 5px solid #fff;
}
header nav ul li a:hover {
color:#fff;
}
/* Texto Inicial */
.texto {
padding:200px 0;
text-align: center;
color:#fff;
position: relative;
font-weight: 400;
}
.texto h2, .texto p {
background: rgba(0,0,0,.8);
display:inline-block;
padding:10px 20px;
}
.texto h2 {
font-size:40px;
letter-spacing: 2.5px;
font-weight: normal;
}
.texto p {
font-size:20px;
letter-spacing: 2.5px;
}
/* Principal */
.principal {
position: relative;
color:#000;
}
.principal article {
padding:20px;
background:#fff;
margin-bottom: 20px;
}
.principal article p {
margin-bottom: 20px;
line-height:24px;
font-family:helvetica, arial, sans-serif;
}
.principal article .fecha {
color:#939393;
}
Codigo JS:
// No cargar en dispositivos moviles, hacer un condicional con el width
$(document).ready(function(){
var ancho = $(window).width();
if(ancho > 600){
particlesJS('particles-js', {
particles: {
color: '#fff',
shape: 'circle', // "circle", "edge" or "triangle"
opacity: 1,
size: 4,
size_random: true,
nb: 150,
line_linked: {
enable_auto: true,
distance: 100,
color: '#fff',
opacity: 1,
width: 1,
condensed_mode: {
enable: false,
rotateX: 600,
rotateY: 600
}
},
anim: {
enable: true,
speed: 2
}
},
interactivity: {
enable: true,
mouse: {
distance: 300
},
detect_on: 'canvas', // "canvas" or "window"
mode: 'grab',
line_linked: {
opacity: .5
},
events: {
onclick: {
enable: true,
mode: 'push', // "push" or "remove"
nb: 4
}
}
},
/* Retina Display Support */
retina_detect: true
});
}
});
Como hacer un sitio web estilo «Hacker» utilizando partículas.
Share on Pinterest
Comparte con tus amigos
Algo anda mal incluso en el demo que subieron
Las particulas se cargaron en la resolucion de menos 600 y se quedaron pegadas
Incluso si haces zoom se quedan pegadas
Hola carlos arturo, hay forma de aplicar estar particulas y se vean bien en el responsive?
por cierto, excelentes aportes. muchas gracias
Hola Carlos Arturo, primero agradecerte por todo tu conocimiento. Segundo… como puedo insertar este efecto de particulas en un sitio creado con bootstrap teniendo en cuenta que manejamos el sistema de grids, cual sería la posición y la forma de llamar los elementos? agradeceria mucho tu colaboración. Nota: soy muy nuevo en diseño web, aunque domino ya ciertos elementos basicos.
No encuentro el archivo app.js que copia y pega y no me queda
¡AYUDA! No me salen las Particulas he checado todo y no se en que este mal, lo hice de acuerdo a tu codigo, Igualmente en el video de las particulas con js lo intente y no me dan :(
No aparece el archivo app.js, aparece uno diferente
No salen las particulas :/
¡Encontre el problema, para los que no le salen las partículas!
Le pondré los pasos
1. Abran el demo de la pagina de falcon masters http://falconmasters.com/demos/sitio_estilo_hacker/
2. Denle click derecho e inspeccionar elemento.
3. Se van a la parte donde dice «Sources»
4. Les aparecera una carpeta llamada «demos/sitio_estilo_hacker , (les apareceran todos los recursos que utiliza en la pagina)
5. Luego vayan donde dice «particles.min.js» y copien el codigo
6. Vayanse a su editor y reemplacen el nombre de «particles.js» por «particles.min.js» y pegan el codigo (OJO, TAMBIEN EN SUS INDEX.HTML, PONGAN
7. Actualicen y listo!
Si tienen alguna duda, escribanme.
https://uploads.disquscdn.com/images/94f84a6a902475d341b9be55c915a65ef9ce9e6d73330db717ff7a7da018e7a2.png
me lo podrias pasar, es que a mi no me aparece el archivo
Si No Les Salen Las Particulas Pongan: