{"id":8865,"date":"2020-06-29T15:00:17","date_gmt":"2020-06-29T13:00:17","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=8865"},"modified":"2022-02-23T10:47:18","modified_gmt":"2022-02-23T09:47:18","slug":"slider-revolution-parallax","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/slider-revolution-parallax\/","title":{"rendered":"How to Create a Parallax Effect in Slider Revolution"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]This article is part of our ongoing series of Slider Revolution tutorials. You can find all the articles from this series in our Comprehensive Slider Revolution Guide<\/a>. <\/em>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Parallax is a popular effect that adds an impression of depth and dynamicity to the visual content of your website. There are a lot of great premium WordPress themes with parallax effects<\/a> integrated and you\u2019ve probably seen the effect a thousand times across the web. But you might have wondered how it was made.Today we\u2019re going to talk about using the parallax effect in Slider Revolution<\/a> sliders.[\/vc_column_text][vc_empty_space height=”68px”][vc_column_text]<\/p>\n

What is Parallax?<\/h2>\n

[\/vc_column_text][vc_column_text]Parallax can roughly be defined as an effect in which elements in the background and those in the foreground move at different speeds when the user scrolls, creating an illusion of depth<\/strong>. Specifically, elements in the background are set to move slower. Below you can see an example of parallax from our Aoki theme<\/a>.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Parallax <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]There are different ways to achieve this effect, and if you\u2019re already working with Slider Revolution you\u2019ll be glad to hear that this plugin packs the required functionalities for creating parallax. [\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Enable Parallax in Slider Revolution<\/h2>\n

[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]First things first – head over to Slider Revolution and turn the parallax on<\/strong>. Go to Module General Options > On Scroll > Scroll Based Features > Parallax<\/strong><\/em> and turn the Parallax Enabled switch to On<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Enabling <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The plugin offers a number of different depth values so you can pick the one that works for you. If the value you\u2019re looking for is not here, you can enter your own, as shown below.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Scroll <\/div>\n<\/div>[vc_empty_space height=”79px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Add Parallax to Background Images<\/h2>\n

[\/vc_column_text][vc_column_text]To add the parallax effect to your background image, go to Slide Options > On Scroll > Parallax & 3D Settings<\/strong><\/em>, and choose the preferred depth from the dropdown.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Enabling <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]When it comes to picking the depth, there\u2019s no golden rule. We suggest you try out different values to see how they work on your page. Different depths will create different effects, so try them all out until you find the perfect effect for your page. If you don\u2019t feel like experimenting, the ones in the middle are always a safe choice.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]That\u2019s pretty much it for the background.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Add Parallax to the Layers<\/h2>\n

[\/vc_column_text][vc_column_text]The Slider Revolution parallax effect is not reserved just for the background images. You can also use it for the individual layers inside your slider<\/a>. With this effect, you can give your users an illusion they are controlling parts of your slider by moving their mouse. This is a really neat effect, and it\u2019s very easy to set up.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Select your layer, go to the Layer Options > On Scroll > Parallax & 3D tab<\/strong><\/em>, and choose the desired level of depth.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Adding <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]And that\u2019s really all there is to it. The result will be the layer with parallax that activates as the mouse moves. [\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”81px”][vc_widget_sidebar sidebar_id=”slider-revolution-banner”][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

In Conclusion<\/h2>\n

[\/vc_column_text][vc_column_text]As we saw, whether we are talking about individual layers or background images, adding the Slider Revolution parallax effect is extremely simple. Bear in mind, though, that not every slider needs parallax. Very dynamic sliders with lots of animation<\/a> will probably do better without this effect, as the result may turn out to be too busy or cluttered with motion. For simple sliders, though, parallax can be just the thing you need to spice up your page.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

With Slider Revolution, parallax effects have never been so easy to set up, creating impressive, immersive sliders that will captivate your visitors. <\/p>\n","protected":false},"author":6,"featured_media":8871,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,53,4,13],"class_list":["post-8865","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-slider-revolution","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=8865"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8865\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/8871"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=8865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=8865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=8865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}