Jak dodać efekt ruchomych cząstek jako tło? (Particles Background)

utworzone przez | lis 21, 2017 | Divi | 8 Komentarze

jak dodać efekt ruchomych czastek. particle background efekt
W tym wpisie dowiesz się jak dodać tło z efektem ruchomych cząstek (particles background effect). Poradnik ten dotyczy stron zbudowanych za pomocą platformy WordPress oraz wykorzystującej dowolną wtyczkę kreatora stron (buildera np: Divi Builder, Elementor, Page Builder by SiteOrigin, itd.) z możliwością przypisania ID do wybranego elementu na stronie. No i też bez buildera da się to zrobić tylko, że tutaj już będzie potrzebna znajomość języka HTML i praca z identyfikatorami ID.

Ja lubię proste i szybkie rozwiązania dlatego też przygotowałem poradnik gdzie wykonamy to bez znajomości kodowania 🙂

Zaczynamy

Krok 1 – Integracja biblioteki ParticleJs z WordPress.

W pierwszej kolejności aby WordPress mógł obsługiwać takie efekty musisz dodać do niego bibliotekę JS. Można zrobić to ręcznie korzystając z tej instrukcji.  Jednak mam dla Ciebie lepsze rozwiązanie. Wykona to za Ciebie specjalna wtyczka „Particles Background”. Wystarczy, że ją pobierzesz, zainstalujesz i włączysz w kokpicie WordPress. Kliknij w poniższy link aby pobrać wtyczkę:

Pobierz Wtyczkę (Particles Background)

Po aktywacji wtyczki w menu WordPress pojawi się nowa opcja „Particles Background”:

Kliknij na tą nową opcję. Po prawej tronie pojawi się pole gdzie należy wkleić specjalny kod, który generuje efekt ruchomych cząstek.

efekt ruchomych cząstek polde kodu

Teraz jesteś przygotowany do wdrożenia efektu ruchomych cząstek. Kolejny krok do wygenerowanie kodu efektu.

Krok 2 – Generowanie kodu – efekt ruchomych cząstek.

Kod wygenerujesz na tej stronie:

Strona do Generowania Kodu

particlejs generowanie kodu efekt ruchomych cząstek

Mamy tutaj możliwość skonfigurowania różne efekty. W prawym górnym rogu strony jest kilka funkcji. W polu gdzie obecnie jest widoczny napis „Default” mamy do wyboru 5 szablonów efektów wizualnych. Poniżej są dodatkowe opcje konfiguracji. Można tam zmienić szybkość, kształt i inne parametry związane z wyglądem i sposobem poruszana cząsteczek.

szablony efektów ruchomych cząsteczek

Po wybraniu pasującego nam szablonu i skonfigurowaniu efektu, należy pobrać go w postaci kodu na swój komputer klikając na opcję „Dowload current config (json).

szablony efektów ruchomych cząsteczek pobranie kodu

Kolejny krok to dodanie tego kodu w pole wcześniej zainstalowanej wtyczki „Particles Background”.

Krok 3 – Dodanie pobranego kodu do pola wtyczki „Particles Background”

Pobrany plik z poprzedniego kroku nazywa się „particlesjs-config” z rozszerzeniem „json” (particlesjs-config.json). Standardowo system Windows nie ma przypisanej domyślnej aplikacji do otwierania takich plików. Taki plik możesz otworzyć przy pomocy zwykłego notatnika. Kliknij prawym przyciskiem myszy na ten plik, następnie wybierz „otwórz za pomocą” i wskaż aplikacje Notatnik aby otworzyć ten plik. Po otwarciu pliku zobaczysz kod efektu ruchomych cząstek.

Przejdź teraz do kokpitu WordPress i opcji wtyczki „Particles Background”. W pierwszej kolejności dodaj poniższy kod:

particlesJS('ID_efektu',
>> Tutaj wklej kod z notatnika <<
);

W miejsce 'ID_efektu’ możesz wpisać dowolną nazwę.

Następnie w miejsce tekstu „>> Tutaj wklej kod z notatnika <<” wklej kod z pobranego pliku particlesjs-config.json, który otworzyłeś za pomocą notatnika.

Po wklejeniu kodu kliknij na przycisk „Zapisz zmiany”.

Krok 4 – Przypisanie efektu ruchomych cząstek do elementu na stronie.

Czas na uruchomienie efektu na stronie.

Dla osób, które korzystają z motywu Divi

Wystarczy, że w ustawieniach sekcji w zakładce „Zaawansowane” w polu CSS ID wpiszesz „ID_efektu” oraz ustawisz kolor tło dla tej sekcji.

id efektu ruchomej cząsteczki

Zapisujemy zmiany i cieszymy się efektem ruchomych cząsteczek 🙂

Jeśli masz jakieś pytania napisze je w komentarzu.

8 komentarzy

  1. Rafał Stępień

    Do usług 😉

    Odpowiedz
  2. Jurek

    Witam
    Jak można ustawić ikonę telefonu tak aby była cały czas widoczna podczas przewijania strony ?

    Pozdrawiam Jurek

    Odpowiedz
  3. Damian

    Cześć super sprawa z tym tłem, Po instalacji wszystko ładnie śmiga, ale przycisk który miałem, niestety już nie. Czy masz może na to rozwiązanie?

    Odpowiedz
    • Rafał Stępień

      Cześć,
      należny ustawić z-index. Dla guzika 999 aby był na wierszu, a dla sekcji która ma w tle ruchome cząstki z-index niższy nić 999.
      W ustawieniach modu czy sekcji jest to w zakładce Zaawansowane i opcji widoczność.

      Odpowiedz
    • Damian

      Dzięki wielkie Rafał 😀
      Jesteś dla mnie mistrzem. Świetnie to wygląda i teraz po ustawieniach tego co pisałeś, wszystko działa jak powinno, dzięki jeszcze raz.

      Odpowiedz
      • Rafał Stępień

        Super 😀 Powodzenia 🙂

        Odpowiedz
  4. Rafał

    Witam,

    mam mały problem. Efekt działa jak należy, jednak przy otwieraniu strony na telefonie lub urządzeniu o mniejszym wyświetlaczu efekt gubi proporcje (tzn. wygląda na rozciągnięty, nie dostosowuje się od razu do rozmiaru wyświetlacza). Po przesunięciu ekranu i powrocie już wszystko jest ok.
    Próbuję różne konfiguracje w ustawieniach, efekt ten sam. Stronkę edytuję przy pomocy wtyczki elementor.
    Może ktoś już napotkał taki problem?
    Pozdrawiam

    Odpowiedz

Wyślij komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *