JP Bokeh
Article Index
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 .
Have a look of "JP bokeh" output.
