Tag Archives: effect

Search

A Search Bar
This is another DailyUI where I can’t resist coding the thing. The idea was to explore ways to animate a search bar. In this particular scenario, a circular button unrolls to create a search field. The idea was so simple and fun that I had to code it. You’ll see its very simple! Check out the demo.

The main mechanic makes use of the dasharray and dashoffset properties for SVG strokes. In this case, the whole SVG path starts from the end of the text field and comes around the circle. They are not two separate paths! Therefore it makes it easier to animate it using only the two dash properties. The circle is 36px in diameter, which makes a circumference of roughly  π36 = 113.097. This is our dasharray value. The length of the text field is exactly 200px. This is our dashoffset value. Something I had to figure out was that the dashoffset is calculated from the bounding box. not from the length of the path. Therefore, the dashoffset needs to be negative, so that the first dasharray starts at -199 (I had to give it a little room to accommodate the imprecision of my circumference) from the starting point.

Now we need some JavaScript to trigger the animation. The input field is self-containing, which means we can’t place elements inside. Therefore a simple CSS solution wasn’t possible (Prove me wrong! lol). Using .blur() and .focus(), I can remove and add classes that will let me interpolate between the two dasharray and dashoffset states. It’s not more complicated than that.

In the end, I still think my code is a little intense for a search box, but the goal was to create a neat little animation. Use it, implement it, modify it, cite me if you want, and keep coding!

Seamless hover

A while ago, I constructed this type of grid layout, or masonry layout, that would be unified by a special hover effect. I first encountered this idea in the wild on the updated Sagmeister & Walsh website, and it pushed me to try and implement this effect, with my own technique and with my own style. This is the story of the seamless hover effect, a web experiment in which I question the unity of large content collections, and I try to figure out how to stitch content together, using a common hover effect for a collection of things. I do have to point out that this technique is only useful in an environment where a pointer exists, such as on a desktop computer.

The seamless hover effects, in a nutshell, takes the coordinates of your mouse pointer, using a bit of jQuery and maths, and uses those coordinates to pile up every selected titles at the location of the pointer. Which means that all the text content is following your cursor, always, however, you only see the text content when your cursor is located inside its respective grid cell. Demo. You will notice before you move the cursor, that everything is placed in a singular grid cell, and that the text clips onto it. The clipping makes use of the overflow property, which is all very compatible across all browsers. Very good.

The effect only needs two basic elements. A tile and a title element. For the best effect, I deliberately squeezed the grid cells together, and for laziness, I made them all the same size. I am sure the same effect could be used in a padded layout or on a masonry grid. I would make for an even more dynamic layout.

Use it, implement it, modify it, cite me if you want, and keep coding.