Have you ever wanted parallax effect to your website, it is wonderful. But you need custom post type, you need really CSS/ HTML to do that
Now, there are many plugins support to add parallax, I will introduce some plugin free and easy adding parallax so you don’t worry
Parallax effect is trend design in website, it scrolls down slower than foreign content, it make your website become professional, interactive.
Please use and active Advanced wordpress background plugin. Then you notice the new ‘Advanced WordPress Backgrounds’ button in the visual editor
It has two tabs: General and Styles
After you click in Advanced WordPress Backgrounds, you see a popup so that I can select elements ass:
background type, stretch, image, overlay color, parallax, mouse parallax.
First, you need click in background type: image which has big size, make sure to be fit with screen of website,
you select stretch or not stretch option
Then, you select image by uploading image you want or in media library.
About overlay color, if you want to any color covers on background-image, it becomes blurry. Next, you can select parallax types in box drop down : disable, scroll, scale… but the most commonly used is scroll type
Finally, you want to have mouse parallax or not by click select option
Please press on Insert button to continue. After all selections you selected, plugin bring up a code following looks like:
[nk_awb awb_type="image" awb_stretch="true" awb_color="#dddddd" awb_image="1374" awb_image_size="full" awb_parallax="scroll" awb_parallax_speed="0.5"]
Your Content Here
Depend on different your selections, you received different codes.
Please replace “Your content here” in above code by your content.
2. Add Parallax with CSS
Beside, you use plugin-fast way, if you interested in code of a developer, you can use CSS for adding parallax:
Now, I will guide clearly and simple for you, you can use it for any website you want
First, you need add class for your parallax , to be simple, you should use name :parallax, it ‘s simple and not replace with other elements. When you insert CSS, CSS not be effect to other class
<div class=”parallax-your content”>
Your content here
You put CSS for two classes:
Is it simple? You can choose the best solution after two way. What way you like? Please comment in this post so that I can view your opinion. I’m thankful and happy if I receive your opinion