{"id":3535,"date":"2017-11-08T22:12:08","date_gmt":"2017-11-08T22:12:08","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=3535"},"modified":"2017-11-09T17:55:09","modified_gmt":"2017-11-09T17:55:09","slug":"swipe-to-reveal-technique","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/swipe-to-reveal-technique\/","title":{"rendered":"Swipe to Reveal Technique"},"content":{"rendered":"

Check out this swipe to reveal technique created by Daniel Sivan from Wired Messenger Inc<\/a>. This technique overlays a div with an image over a div container and uses left padding on the overlay div to “push” the image to the right of the container – leaving a “handle” that the user can use to drag the content into view.<\/p>\n

\"swipe-to-reveal.gif\"<\/a><\/p>\n


\nView in CodePen<\/a>
\n<\/center><\/p>\n

Its a pretty simple technique and works best in mobile (works in the Gmail app as well) since the interaction is more intuitive. Although it can also be used in desktop the user would have to scroll using the scrollbar. <\/p>\n

Alternatively you can use media queries to display the swipe interaction in mobile and tablets and a hover based reveal<\/a> interaction in the desktop. <\/p>\n



<\/p>\n

\n
\nSubscribe to the #EmailGeeks Newsletter<\/span>\n

<\/p>\n