JP Bokeh is an effective plugin that enables you to easily setup and configure to create camera lense bokeh type animated effect in your site.
How to install:
- Download the latest “JP Bokeh” plugin package from product page.
- Install the downloaded “jp_bokeh.zip” using the extension manager menu in the administrator section of your Joomla website.
- After JP Bokeh successfully installed in your website then go to the next step.
- From the main joomla menu click “Extensions -> Plugins”. Use the Search or Filter feature to find the installed plugin, and then make sure the installed plugin is enabled.
JP Bokeh Configuration :
JP Bokeh plugin settings makes easy to design the bokeh effect according to your requirements.
- Under "Download ID - Auto Updates", gently fill the Download ID received during the product purchase for easy updates of future versions directly from the joomla extensions.
- You can find the different settings for JP Bokeh. And look into all one-by-one briefly
- Target Div ID - You can add one or more div ids seperated by comma(,) in which the bokeh animated effect to be applied .
- Background Color - Select the background color of the JP Bokeh layout section from color palette.
- Circle Size - Describes the circle size in px.
- Circles Count - Describe the circles count to be used in the effect.
- Animation Delay - Enter the animation delay time in seconds.
- Color # - Select the circle colors from the color palette .
- Opacity for Full Effect - Opacity for overlay effect if div contains background image then set this to 0.5 for show image and bokeh effect.
- Once finished all the settings for the plugin , Click "Save & Close".
Add bokeh effect to template:
- Here we demonstrated using "YOOtheme PRO" template website builder and you can use your own template to do the same.
- Then you can easily add the bokeh effect by defining the div ID used in Target div ID .
- Note: Please remove any bg image or any other bg color to the section if anything applied.
- Instantly the bokeh effect is added to the desired divs in the site layout .