Keys.js

All you need to do is add the keys.js file into your projects JS folder and add the following code with your keys.js location as the src. Put this code in to your head HTML tags. Download Keys.js here or use npm.

                            <script src="/js/keys.js"></script>
                    

Or just add a CDN instead

                        <script src="https://cdn.jsdelivr.net/npm/@idevgames/keys-js/src/keys.js"></script>
                    

To activate keys.js add the data attribute "data-keys" or a class "enable-keys" to your html element. When keys are pressed, keys.js will add classes like "keys-active", "key-space", "key-enter", etc. to your element, allowing you to trigger CSS animations.

                            <div class="fadeIn" data-keys> </div>
                    

                        .fadeIn{ opacity:0; }
                        .fadeIn.keys-active{ animation: fadeIn 1s normal forwards ease-in-out; }
                        @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }
                    

Press R key to rotate the wheel!

Keys.js exposes keyboard state as CSS variables that you can use with CSS transform, opacity, etc.

                            <div class="element" data-keys data-keys-var="true"> </div>
                    

                            .element.key-space{ transform: translateY( -20px ); }
                    

The CSS variables you can use by adding data-keys-var="true" include:

Classes like .key-space, .key-enter, .keys-active are added automatically.

Press A/D keys to move the living room image!

Keys.js creates a class of "keys-typing" or "keys-idle" on the body of the document depending on keyboard activity. This allows you to create effects that respond to active typing vs idle states.

Press W/S keys to move the skyscraper!

You can watch specific keys using data-keys-watch="space,enter" to only respond to certain keys. This is more efficient than watching all keys and gives you precise control over your interactions.

Press any keys to reveal the gradient!

You can use the below data attributes for additional features

                            <div id="yourelement" data-keys-watch="space,enter" data-keys-combo="ctrl+s" data-keys-global="false" data-keys-var="true" data-keys> </div>
                        

Press any keys to blur the servers!