How to add Parallax effect to any theme

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.

  1. Plugin

Please use and active Advanced wordpress background plugin. Then you notice the new ‘Advanced WordPress Backgrounds’ button in the visual editor

Screenshot_10

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.

Screenshot_1

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:

Depend on different your selections, you received different codes.

Please replace “Your content here” in above code by your content.

Screenshot_2

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”>

<div class=”parallax-your content”>

Your content here

<div>

</div>

You put CSS for two classes:

.parallax { 

background-image: url(“http://themes.g5plus.net/academia/wp-content/themes/academia/assets/images/bg-page-title.jpg”);
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-300px;
margin-right:-300px;
}

.parallax-content {
width:50%;
margin:0 auto;
color:#000;
padding-top:50px;
}

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

That’s all, hopefully this article helped you know how to add Parallax effect to any theme. If you have any further questions for us, don’t hesitate to put it up in the comments. See you again in orther tutorials!

 

 

 

 

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *