Discover the best vanillajs websites created by professional designers. Get inspired and start planning your perfect vanillajs web design today!

Javascript Music Player with Three.js

My Social Media:
https://www.linkedin.com/in/fojcikdominik
https://www.instagram.com/_fojciko

Portfolio: https://fojcikdominik.com


Three.js: https://threejs.org

Resources i used for this project:
https://github.com/bradtraversy/vanillawebprojects/tree/master/music-player
https://github.com/santosharron/audio-visualizer-three-js

THREE.JS MUSIC PLAYER

MUSIC PLAYER with THREE.JS

A small function to animate each character of a text using CSS Keyframes.

Text Animation is a vanilla function to animate every single character of a text sequentially.

Inspired by the text effects introduced in the Once Upon a Time in Hollywood Mag.

Learn how to use it on Github: https://github.com/happycrappie/animateText

AnimateText Effect

Animate Text Preview

Vanilla JS used to create stutter image effect on hover. Fun stuff. 🚀

hrsh22

Image Stutter Effect

Overview: Cosmos is the first project I ever completed in Webflow on my own. While it was in the same visually, except for the countup animations, I have touched it up in order to make the project have cleaner code, use less unnecessary javascript, and improve the SEO performance of the page. 

Details: While most things remain the same, the navigation effect was initially created using 2 navigation elements. This is a poor practice for SEO. I changed it to 1 element + vanilla JS for the effect. I also replaced a large portion of hover animations & used custom css animations instead. This way, less unnecessary JS is used and therefore, cleaner & better performing code. The last touchup were countup animations using finsweet attributes for integers & jQuery + ajax for decimals.

Disclaimer: The site was not designed by me. In fact it already exists & here's the url of that site: https://cosmos.network . The project I made was for educational purposes only!

Cosmos

Vibrand Design

Mouse Hover Effect with vanilla JavaScript for a following link background effect that always assumes the size of the active element. 

I'm glad if you like it.

- Dennis from Vibrand Design

++++++++++++++++++++++++
Support our work on Patreon: patreon.com/denniskarg

Floating Link Background

Three custom Barba.js page transitions to clone! The code uses a mix of Barba, Gsap timelines and some vanilla javascript.

Enjoy :) Press like so I know you want me to make more of these!

Barba Js Transitions | Volume I

Barba.js Transitions | Volume I

Custom-coded vanilla JavaScript Pokedex app. No libraries. Fluid responsiveness by Wizardry technique. Designed layer by layer in Figma. 
Functions: 
-Search pokemons through the numpad, arrowkeys
-Fetch from PokeAPI
-Change front-back sprites with right/left arrowkeys
-Change different type images according to pokemon type
-Fetch Random Pokemon
Awesome Armand Salle provided a javascript-webflow template on his repo (go check!), and code is automatically pushed to Netlify and served. 
Hope you like it as much as I do! All links relevant to project are inside the website's footer. Thank you.

Discover vanillajs websites built by the Webflow community

Discover vanillajs websites built by the Webflow community