Standard drop-down menus that contain sub-menus very often have no concept of user intent, and this can lead to a repeating frustration that most of us have likely run into: straying off course by even a single pixel can cause the sub-menu to close instantly. Ways around this include adding a delay to try and account for user error, but that doesn’t feel as snappy. Amazon has a really clever solution that accounts for user error yet responds instantly:
At every position of the [pointer] you can picture a triangle between the current mouse position and the upper and lower right corners of the dropdown menu. If the next mouse position is within that triangle, the user is probably moving their [pointer] into the currently displayed submenu. Amazon uses this for a nice effect. As long as the [pointer] stays within that blue triangle the current submenu will stay open. It doesn’t matter if the [pointer] hovers over “Appstore for Android” momentarily – the user is probably heading toward “Learn more about Cloud Drive.”
And if the [pointer] goes outside of the blue triangle, they instantly switch the submenu, giving it a really responsive feel.
So if you’re as geeky as me and think something this trivial is cool, I made a jQuery plugin that fires events when detecting this sort of directional menu aiming: jQuery-menu-aim.
See the source link for more.
Here’s a secret: You may not need
scrollevents in your next app. Using an
IntersectionObserver, I show how you can fire a custom event when
position:stickyelements become fixed or when they stop sticking. All without the use of scroll listeners.
One of the practical limitations of using CSS sticky position is that it doesn’t provide a platform signal to know when the property is active. In other words, there’s no event to know when an element becomes sticky or when it stops being sticky.
I got frustrated of not being able to tell the tabs apart as I was working on stuff. So this is my so-dumb-it’s-smart solution.
This is really excellent: take a JPG, which has great compression for photos, but doesn’t support transparency, and link it within an
<svg> which can apply a clipping mask based on a path. The path can be traced manually over the photo in Photoshop or Illustrator, and can be exported as an SVG file from Illustrator. The following code (minus the path data), demonstrates how to do this:
Code language: HTML
<svg viewBox="0 0 921.17 1409.71"> <defs> <clipPath id="chris-clip"> <path d=" ... " /> </clipPath> </defs> <image xlink:href="/images/chris.jpg" clip-path="url(#chris-clip)" x="0" y="0" width="921" height="1409"> <svg>
These are awesome and mesmerizing, even more so that they demonstrate what can be done with native browser WebGL APIs. Give them a try. (Warning: some may be quite laggy if you have lower end hardware, and I haven’t tested these on mobile.)