Add Parallax scrolling effects to your website without plugins

Parallax Scroll, or Parallax scrolling effects it was first used in the field of animation and video gaming. The term is probably derived from the Greek parallage, which means change. Below we will see how you can use it in your CMS web design without adding a plugin.

Parallax's technique is used by professionals and non-professionals to design products, companies, projects with an impressive narrative (Parallax) way.

Let's look at a small example, and we'll go ahead with the code : Technology News in real time, Opinions and . Only.

Let's see the code.

First you have to find her που θέλετε να χρησιμοποιήσετε. Όταν βρείτε την εικόνα, την ανεβάζετε στο you by copying the link.

In our example we used the following picture:Parallax

Then you have to choose where you want the effect to appear.

To the point Copy the code below, replacing the text with what you want to post. Real-Time Technology, Views and Tweaks. Only.

Let's add the necessary CSS. You can add the following in style.css of the theme you are using:

.parallax-iguru {background-image: url (""); height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; margin-left: -1px; margin-right: -1px; } .parallax-iguru-content {width: 60%; margin: 0 auto; color: # 075400; padding-top: 20px; } 

In css you can change the margin-left and margin-right values ​​with larger (identical) numbers to see the effect on a larger width. If you wish, you can cover the entire width of your page.

Higher price on the padding-top will give more height to the image above the letters.
If you now add a padding-bottom with the same value you use at the top, it will give you the same height below the letters.

.parallax-iguru-content { width:60%; margin:0 ; color:#075400; padding-top:40px; padding-bottom:40px; } 

That's it. Just add Parallax scrolling effect to your page!

The most bizarre planning principles

You save space on the Windows 10 disk The Best Technology Site in Greecefgns

Subscribe to Blog by Email

Subscribe to this blog and receive notifications of new posts by email.

Written by giorgos

George still wonders what he's doing here ...

Leave a reply

Your email address is not published. Required fields are mentioned with *

Your message will not be published if:
1. Contains insulting, defamatory, racist, offensive or inappropriate comments.
2. Causes harm to minors.
3. It interferes with the privacy and individual and social rights of other users.
4. Advertises products or services or websites.
5. Contains personal information (address, phone, etc.).