<link rel= "stylesheet" href= "Css/refocus.css" > <script type= "Text/javascript" src= "Js/jquery.min.js" ></script><script type= "Text/javascript" src= "Js/refocus.js" ></script>
Using this lens blur effect plugin requires the introduction of jquery and Refocus.js and refocus.css files.
<div class= "Refocus" id= "Hero-header" > <div class= "REFOCUS-IMG-BG" ></div> <!-- The contents of the container with focus-in will be obfuscated- <div class= "refocus-img focus-in" > </ Div> <!--content in a container with Focus-out does not blur-- <div class= "Refocus-text-container" > <div Class = "T" > <div class= "TC" >
HTML structure in HTML results, to be added to the focus and the non-focused containers, respectivelyfocus-in
Andfocus-out
Class/* Increase or decrease blur level/#refocus-1. Focus-out, #refocus-1. REFOCUS-IMG-BG { filter:blur (15px); -webkit-filter:blur (15px);} /* The following code is the speed at which the display is modified */#refocus-1. Focus-in, #refocus-1. focus-out { transition:filter 2s ease 0.3s; -webkit-transition:-webkit-filter 2s ease 0.3s;}
CSS Styles
After introducing the Refocus.css file, if you need to modify the degree of ambiguity, you can modify the value of the following code in the Refocus.css file blur
.
$ (window). Load (function () { $ (' #refocus-1 '). Refocus ();});
Initializing plug-ins
After the page DOM element has finished loading, you can initialize the lens blur effect plugin by using the following method.
Original address: http://www.htmleaf.com/jQuery/Image-Effects/201510132661.html
jquery plugin for background image lens blur effect