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.
Rarallax's technique usesby professionals and non-professionals, for the construction of websites presenting products, companies, projects in an impressive narrative (Parallax) way.
Let's look at a small example, and we'll go with it code
Let's see the code.
First you need to find the image you want to use. When you find the image, upload it to your server by copying the link.
In our example we used the following picture:
Then you have to choose the point where you want it to appear effects.
At your selection point, copy the following code by changing the text that you want to publish.
iGuRu.gr: Real-Time Technology, Views and Tweaks. Only.
Let us add the necessary CSS. You can add the following series to the style.css of the theme you are using:
.parallax-iguru { background-image: url("https://cdn.iguru.gr/wp-content/uploads/2018/01/background-design.jpg"); 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.
Greater price στο padding-top θα δώσει περισσότερο ύψος στην εικόνα πάνω από τα letterthe.
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 auto; 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