Aprende como hacer un sitio web con temática «hacker» usando partículas en JS.

Share on Pinterest
Comparte con tus amigos










Enviar

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










Enviar

FalconMasters Carlos Arturo

10 respuestas a “Como hacer un sitio web estilo «Hacker» utilizando partículas.”

  1. Mark dice:

    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

  2. Andrés Felipe Patiño dice:

    Hola carlos arturo, hay forma de aplicar estar particulas y se vean bien en el responsive?
    por cierto, excelentes aportes. muchas gracias

  3. Alexis dice:

    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.

  4. CARLOS ALBERTO CASTRO MONROY dice:

    No encuentro el archivo app.js que copia y pega y no me queda

  5. Ángel Vazquez dice:

    ¡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 :(

  6. MusicalSpectrum dice:

    No aparece el archivo app.js, aparece uno diferente

  7. MusicalSpectrum dice:

    No salen las particulas :/

  8. Carlos Nuñez dice:

    ¡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.

  9. Yojan Bustamante dice:

    Si No Les Salen Las Particulas Pongan:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Aprende con nuestros cursos

React y Firebase: El Curso Completo, Práctico y desde Cero

React y Firebase: Curso Completo, Práctico y desde Cero

En este curso aprenderás React desde lo mas básico y paso por paso hasta un nivel avanzado donde podrás crear sitios y aplicaciones web reales.

Inicia el curso

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 5: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso