Skip to content

A pure Javascript Plugin for an alternative hover function that works on mobile and desktop devices. It triggers a hover css class on »Taphold« and goes to a possible link on »Tap«. It works with all html elements.

License

Notifications You must be signed in to change notification settings

vin-ni/hover-on-touch

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Hover on Touch 3.0

This is a pure Javascript Plugin for an alternative hover function that works on mobile and desktop devices. It triggers a hover css class on »Taphold« and goes to a possible link on »Tap«. It works with all html elements.

Here's a demo for touch devices a shop demo and here's a demo video for desktops.

Preview of the Plugin on a Portfolio Preview with nice colors and animation Preview of the Plugin for a shop Preview of the Plugin for a text with an ad behind

Installing

<script src="your/path/hoverontouch.js"></script>

and add the following to your html:

<script type="text/javascript">
    var HoverOnTouch = new HoverOnTouch();
</script>

Description

When you touch an element, the »hoverontouch--aktiv« class is applied and triggers the effect defined in your css. For example it can hide an element and show some secondary information, initiate a link hover or just trigger any kind of css animation. If you release under 250ms, the touch event is interpreted as a click and a redirection to the given link is triggered (if there is one provided). Otherwise, if you hold longer, the event is interpreted as a »Taphold« and the old status is shown again on release.

This brings additional possibilities for the user to interact with the content of a website. For example, the user can read secondary information while scrolling a page. It further makes it feel more "alive" and "applike".

Some thoughts on what the plugin can be used for can be found on my blog entry.

HTML Structure

Each wrapper of your element you want to use it on, needs the class ».hoverontouch« Add as many objects as you like.

<a href="www.example.com" class="hoverontouch">
    <div class="cover"><img src="img/path"></div>
</a>

//or

<a href="www.example.com" class="hoverontouch">
    <div class="testObject">
        <div class="info"><img src="img/path"></div>
        <div class="cover"><img src="img/pth2"></div>
    </div>
</a>

Css

In the CSS you need to rename your hover functions this way:

.cover:hover

to

.hoverontouch--aktiv .cover

»Example:«

.object {
    width: 100vw;
    height: 250px;
    margin-bottom: 25px;
    display: block;
}

.cover {
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: blue;
}

.hoverontouch--aktiv .cover {
    opacity: 0;
}

.info {
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: green;
}

Result

On Tap Hold and Hover, the .cover div gets an opacity 0. On click or tap, the link is triggered.

UX

These are some points I think are necessary to make this approach work ux wise:

  • all clickable elements should have a second layer or an animation (to be consistent)
  • the elements should take reasonable space on the screen, so the user touches them automatically while scrolling (Otherwise this feature would need to be explained)
  • if there is relevant secondary information, it should leave space for the thumb

Link to my blogpost with additional thoughts.

Features & Functions

// Destroy the plugin and remove all event listeners:
hoverontouch.destroy();

// ReInit the plugin to parse new Links if they are added dynamically or new content is pushed to the page (for example pagination)
hoverontouch.reInitHoverOnTouch();
  • Put any html elements together
  • Works while scrolling, so users can see details while scrolling through the page
  • Gifs restart on display
  • For looping animations save the gifs as »looping«, for normal animations save them as »playing once«
  • The script works on mobile, on desktop and devices that support mouse and touch events.

Contribution

If anyone wants to contribute, just fork the project or write me at v@vinzenzaubry.com :)

Created by Vinzenz Aubry & Emmanuel Durgoni

About

A pure Javascript Plugin for an alternative hover function that works on mobile and desktop devices. It triggers a hover css class on »Taphold« and goes to a possible link on »Tap«. It works with all html elements.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published