Parallax w darmowej wersji Elementora

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email
W płatnej wersji Elementora efekt Parallax zrobić jest bardzo łatwo. Ale jeśli zależy Tobie tylko na nim, pokażę Ci jak zaoszczędzić $50 rocznie.

Parallax w darmowej wersji Elementora nie jest tak prosty do ustawienia, jak w Elementorze PRO. Tam wystarczy w stylu Sekcji, w zakładce Tło, kliknąć „Scrolling Effects”, wybrać opcję „Vertical Scroll”, ustawić kierunek i prędkość, i gotowe. Ale Elementor PRO kosztuje $50. Dużo, jeśli tylko na tym efekcie Tobie zależy. Tym bardziej, że możesz go uzyskać w darmowej wersji. W tym artykule pokażę Ci jak, to zrobić.

parallax w darmowej wersji elementora

Czym jest Parallax?

Oczywiście mógłbym się posłużyć definicją wziętą choćby z Wikipedii, ale na nasze potrzeby uproszczę ją, niczym prostownica loki.

Dla mnie Parallax to coś, co nazwałbym efektem pływającego tła, nadającym wrażenie głębi. Możesz go zaobserwować np. na górze tej strony, w obrazku wyróżniającym ten wpis. Ten efekt polega na tym, że podczas scrollowania tło również się przesuwa, lecz z inną prędkością. Dzięki temu możesz odnieść wrażenie, że grafika znajduje się w dalszej odległości niż reszta strony. Fajny bajer.

Parallax w darmowej wersji Elementora

Na początek wystarczy, że do swojego CSS (Wygląd → Dostosuj → Dodatkowy CSS) dodasz:

/* --- PARALLAX --- */

.parallax {
    transition: none !important;
}

Zapobiegnie to przycinaniu tła.

Potem pliku functions.php w swoim motywie potomnym dodaj:

/* --- PARALLAX --- */

function jquery_parallax() { ?>
    <script language="JavaScript" type="text/javascript"> ;(function($) {
   'use strict'
    var testMobile;
    var isMobile = {
        Android: function() {
            return navigator.userAgent.match(/Android/i);
        },
        BlackBerry: function() {
            return navigator.userAgent.match(/BlackBerry/i);
        },
        iOS: function() {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
        },
        Opera: function() {
            return navigator.userAgent.match(/Opera Mini/i);
        },
        Windows: function() {
            return navigator.userAgent.match(/IEMobile/i);
        },
        any: function() {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
        }
    };
  var parallax = function() {
    testMobile = isMobile.any();
    if (testMobile == null) {
      $(".parallax").parallax("50%", 0.3);
    }
  };
  // Dom Ready
  $(function() {
    parallax();
     });
})(jQuery);
/*
jQuery Parallax 1.1.3
Author: Ian Lunn
Plugin URL: https://www.ianlunn.co.uk/plugins/jquery-parallax/
Dual licensed under the MIT and GPL licenses:
https://www.opensource.org/licenses/mit-license.php
https://www.gnu.org/licenses/gpl.html
*/ !function(n){var t=n(window),e=t.height();t.resize(function(){e=t.height()}),n.fn.parallax=function(o,r,i){function u(){var i=t.scrollTop();l.each(function(t,u){var l=n(u),f=l.offset().top,s=a(l);i>f+s||f>i+e||l.css("backgroundPosition",o+" "+Math.round((l.data("firstTop")-i)*r)+"px")})}var a,l=n(this);l.each(function(t,e){$element=n(e),$element.data("firstTop",$element.offset().top)}),a=i?function(n){return n.outerHeight(!0)}:function(n){return n.height()},(arguments.length<1||null===o)&&(o="50%"),(arguments.length<2||null===r)&&(r=.1),(arguments.length<3||null===i)&&(i=!0),t.bind("scroll",u).resize(u),u()}}(jQuery);
    </script>
    <?php
  
}
if (!(is_admin())) {
wp_enqueue_script('jquery');
add_action('wp_head', 'jquery_parallax');
}

Na koniec, aby efekt zadziałał w odpowiednim miejscu, dodaj tło w Sekcji, ustaw „Załącznik → Przyklejony” oraz „Rozmiar → Pokryj”, a w „Zaawansowane → KlasaCSS” wpisz parallax i voilà.

Podsumowanie

Mam nadzieję, że ten wpis okaże się dla Ciebie równie pomocny, co dla mnie. A to dlatego, że sam go nie wymyśliłem. Jak ustawić Parallax w darmowej wersji Elementora nauczyłem się z tego artykułu: https://snifflevalve.com/elementor-tutorials/elementor-parallax-section-background-image/

Chcesz być na bieżąco?
Zapisz się na newsletter

Kategorie wpisów

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *