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: http://www.falconmasters.com/cursos/curso-de-html-basico/curso-html-basico/

Curso de CSS básico: http://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: http://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:

Código CSS:

Codigo JS:

Como hacer un sitio web estilo “Hacker” utilizando partículas.

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

  • Mark

    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

  • Andrés Felipe Patiño

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

  • Alexis

    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.

  • CARLOS ALBERTO CASTRO MONROY

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

  • Ángel Vazquez

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

  • MusicalSpectrum

    No aparece el archivo app.js, aparece uno diferente

  • MusicalSpectrum

    No salen las particulas :/

  • Carlos Nuñez

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

  • Yojan Bustamante

    Si No Les Salen Las Particulas Pongan:


Aprende con nuestros cursos

Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso
Curso básico de WordPress desde 0

Curso básico de WordPress desde 0

Aprende a utilizar Wordpress desde 0 y crea sitios web, blogs, galerías e incluso tiendas online.

Inicia el curso
Curso cómo hacer un Sitio Web básico con Bootstrap

Curso cómo hacer un Sitio Web básico con Bootstrap

Aprende como hacer un sitio web básico utilizando lo mejor de Bootstrap

Inicia el curso
Curso completo de Bootstrap desde 0

Curso completo de Bootstrap desde 0

Curso básico de Bootstrap, Aprende a crear sitios web adaptables a dispositivos móviles con este poderoso framework.

Inicia el curso