SlipHover: jQuery plug-in that can perceive the Image Mask effect of the mouse

In the previous blog post, I introduced my work here after jQuery plug-in development, which is also the first practice and a little achievement.

The plug-in was written a year ago, and then mounted to GitHub. Then, it secretly watched Google Analysis's mind as excited and excited, because there were intermittent visitors from around the world, it seems like the country's second dog has just entered the city.

Invalid red

The first thing we need to introduce is the inspiration. Well, it is necessary to introduce it. Because idea is sometimes more meaningful than actual products, it also makes us reflect on Mao's foreign friends more creative, our thinking is too rigid!

I was inspired by a simple DEMO written by a foreign company, but I forgot what I searched for at the time. I saw this page anyway, this is fucking awesome! Then he just had a tutorial to explain how to implement it. But after reading it, I thought it was too easy to understand, and I couldn't find out how to implement it. After all, there was no plug-in writing capability yet.

Later, in an accidental situation, I still couldn't remember what I searched on the internet, and I saw This DEMO on CODEPEN. I went, This's really fucking pretty cool !!, If you love too much, you just want to possess it. No jQuery plug-ins are available for one search. This is an opportunity to fill in gaps at home and abroad. I don't think much about it. Start it!

Later, we found that some websites are already using this effect, for example, in the image search results of Baidu:

Because I have implemented it myself, I feel very kind and will not be as surprised as I saw it for the first time.

The plug-in must be simple

In fact, the Code provided by the original author in the first DEMO allows us to implement this orientation-aware mask effect, but there is no documentation, and it is not convenient to use at the same time. It requires a specific HTML structure, introduce some specific style sheets, and finally call the plug-in code. The author just wrote a Demo to demonstrate the effect, but didn't provide a decent plug-in.

So I set a guideline for writing plug-ins at the beginning: It must be easy to use!

I mean, you just need to introduce the plug-in code and then call the plug-in method.

Most of the jQuery plug-ins you usually see require you to introduce the plug-in style sheet, and some also need the images provided by the plug-in, I personally think that the most troublesome plug-ins that people don't want to touch are the ones that require you to write the HTML format and specify the style class or data attribute plug-ins on some elements to take effect, of course, except for specific UI parts, there is no way. If your HTML is not written in the specified format, it is difficult to generate these parts, such as Slider and Accordion.

For such an image effect plug-in, at least HTML does not need to be required. The plug-in code goes directly to the page to find the image and then applies the effect, it is not closely related to the specific HTML layout, and you can not introduce style sheets separately. If you can do the work in the code, try not to increase the burden on plug-in users.

However, when I implemented SlipHover, I encountered some problems because I insisted on not writing a single style sheet file:

• First, the location of the Image Mask is located. Because the actual page environment is complex, and the image position may change after the window size changes, finally, the solution is to use a container to locate the mask and monitor the resize event of the window, and then reposition the mask after the image changes;
• Second, when implementing the 3D mask effect, CSS 3 animations created using JavaScript cannot implement 3D. The final solution is to add the <style> label to the page in the code, add the CSS3 animation style of 3D to the page to avoid writing it to a separate CSS file and using the plug-in together.

In terms of plug-in simplicity, I have seen a reference for the previous project called photobooth. js plug-in is used to call the camera in js to take photos of users. This plug-in is a js file, and the style sheet is created and added to the page through js, even the images are converted to dataURL and saved as text in this js file.

The ultimate in minimalism is the plug-in: you only need to introduce the plug-in code on the page, and then do not even need to call anything, the plug-in will take effect! For example, Pace. js is used to display the page loading progress. This is also related to the specific functions to be implemented by the plug-in. For example, if you listen to the page loading progress and display the effect on the page, you do not need to write additional code to call anything. It is fully automated.

3D effect mask

In the beginning, the 3D mask effect was not added to the plug-in, because the code in the CODEPEN example is SCSS source code and is a little complicated, and I didn't study it when I looked tired. Later, I got deeply touched on CSS3 animations and various variants. I was inspired to use CSS3 instead of others.

At first, I was not very confident that I could be able to make it. So I started to write such a separate DEMO (click to view it in full screen) and then added it to the SlipHover to make it an option, by default, it is a 2D translation Image Mask. When filp: true is passed to the plug-in, this 3D flip mask is enabled. Look, fucking perfect!

 

Online Demo and source code

GitHub address: https://github.com/Wayou/SlipHover

Online Demo: http://wayou.github.io/SlipHover/

SlipHover parameters and options, and how to use can go to the document page to view: http://wayou.github.io/SlipHover/

Those who like it must go to star me or fork me to support it ~

Browser compatibility

It can work well in newer browsers. IE requires 9 +, and the 3D flip effect is not very good in IE.

Plugin recording

The following is an incomplete statistics on SlipHover's indexing status on various community websites. This is a result of boring and painful work.

 

Reference: