Collection
Post cover
Created 5 month back

Top 9 jQuery Keyboards

Collection of free top 9 jQuery keyboard code examples.

Keyboard

Author: Tim Dikun

Links: demo and code

Made with: HTML (Haml) / CSS (Sass) / JS (CoffeeScript)

Macbook Pro keyboard.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Interactive Keyboard UI

Author: Souleste

Links: demo and code

Made with: HTML / CSS / JS

A simple interactive keyboard made with jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css, font-awesome.css, jquery.js, jquery-ui.js

jQuery Keyboard

Author: Lennart Hase

Links: demo and code

Made with: HTML (Haml) / CSS / JS

Apple German keyboard layout. Type Something...

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Morphing Keyboard

Author: Lucas Bebber

Links: demo and code

Made with: HTML / CSS (Stylus) / JS

Animation for keyboard keys, morphing from lowercase to uppercase and vice versa.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Happy Hacking Keyboard

Author: Peiwen Lu

Links: demo and code

Made with: HTML / CSS (Sass) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Microsoft Keyboard

Author: Kevin Falencik

Links: demo and code

Made with: HTML (Haml) / CSS (Sass) / JS (Babel)

A pure HTML + SCSS Microsoft keyboard visualisation. Used jQuery to make it more dynamic and respond to physical keyboard strokes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, jquery.js, jquery-play-sound.js

Smooth Keyboard Layout On CSS Grid

Author: Andrej Sharapov

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Post cover

Keyboard

Author: Joe Taylor

Links: demo and code

Made with: HTML (Haml) / CSS (SCSS) / JS

A keyboard. Nothing much else to it. Not functional.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Neumorphism Keyboard Interaction

Author: Wouter;

Links: demo and code

Made with: HTML / CSS (Sass) / JS

A simple keyboard interaction in the Neumorphism style.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js, p5.js

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback