Płynnie zmieniające się tło forum

Witam,

    Na forum jest dostępny Background Selector, tj. opcja, gdzie można wybrać sobie tło (każdy może użyć (opcja z Duende v2)).

   Chciałbym tę opcję usunąć i zamiast tego. I czy jest możliwe ustawienie by tło samo się zmieniało, np. co kilka sekund?
Powiedzmy, że jest ok. 5 obrazów i płynnie się zmieniają. Zależy mi na tej płynności, niż jeżeli miałby być to pokaz slajdów. 

Pozdrawiam

Wszystko zależy na jakim poziomie leży twoja obecna wiedza na temat html, css i js.
Możesz użyć: https://webboard.pl/thread-45241.html
lub: https://github.com/jaysalvat/vegas
lub pure css: https://codepen.io/dudleystorey/pen/ehKpi

Ok, dzięki za odpowiedź.
Wiedza jest znikoma, raczej szukam odpowiedzi w internecie i jakoś tam powoli robię.

Ten efekt z drugiego linku - o takie coś mi chodziło. Postaram się go wstawić, jakbym miał jakieś problemy to będę pisać.

---

Jednak łatwiejszy będzie dla mnie do wykonania tej sposób: https://codepen.io/dudleystorey/pen/ehKpi

Po stawieniu tych kodów, mam pewien problem. Zdjęcia wyświetlają się "nad forum".
Mam obraz na całą stronę, który zmienia się co chwile na inny, a scrollując w dół mam reszte forum.
W global.css mam usunąć

body {
background: url...

Czy kod CSS tam wstawić?

Wystarczy, że dodasz do szablonu headerinclude (niezgrupowane szablony):

<script>
$(document).ready(function() {    
    $(function() {
        var body = $('body');
        var backgrounds = new Array(
            'url("http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg")',
            'url("http://www.hdbloggers.net/wp-content/uploads/2016/09/Download-Background-Pictures.jpg")'
        );
        var current = 0;

    function nextBackground() {
        body.css(
            'background',
            backgrounds[current = ++current % backgrounds.length]
        );

    setTimeout(nextBackground, 5000);
    }
        setTimeout(nextBackground, 5000);
        body.css('background', backgrounds[0]);
    });
});
</script>

Tutaj zmienisz ścieżki do plików obrazków:

var backgrounds = new Array(
            'url("http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg")',
            'url("http://www.hdbloggers.net/wp-content/uploads/2016/09/Download-Background-Pictures.jpg")'
        );

a w funkcji setTimeout() wartość 5000 to 5 sekund. Jak chcesz to sobie zmień.

Źródło: https://css-tricks.com/forums/topic/chan...ry-10-sec/

Dzięki za odpowiedź.
Zrobiłem tak jak napisałeś, ale tła nie zmieniają się.

<script>
$(document).ready(function() {
   $(function() {
       var body = $('body');
       var backgrounds = new Array(
           'url("http://forum.ragesyndrome.net/images/duende2/bg/bg1.png")',
'url("http://forum.ragesyndrome.net/images/duende2/bg/bg2.jpg")',
'url("http://forum.ragesyndrome.net/images/duende2/bg/bg3.jpg")',
'url("http://forum.ragesyndrome.net/images/duende2/bg/bg4.png")',
'url("http://forum.ragesyndrome.net/images/duende2/bg/bg5.png")',
'url("http://forum.ragesyndrome.net/images/duende2/bg/bg6.png")'
       );
       var current = 0;

   function nextBackground() {
       body.css(
           'background',
           backgrounds[current = ++current % backgrounds.length]
       );

   setTimeout(nextBackground, 3000);
   }
       setTimeout(nextBackground, 3000);
       body.css('background', backgrounds[0]);
   });
});
</script>

W sumie do obrazków wystarczy adres względny.



Ponadto, kod dodałeś do headerinclude na początku, przed zaincludowaną biblioteką jQuery. Dodaj kod na koniec pliku (po prostu go przenieś) i daj znać.

Dalej bez zmian, nie zmieniają się tła.

---

Ok, pozmieniałem trochę w kodzie. Link: /images/duende...
I usunąłem przecinek za ostatnim adresem.

Działa, chociaż czy jest możliwe, żeby tło nie przewijało się? Tło w miejscu, całe forum się przewija - o takie coś mi chodzi.
A jeszcze lepiej, jakby te przejścia były płynne. Tutaj jest coś na rodzaj pokazu slajdów.

Możesz użyć background-attachment do tego. Aby było płynne możesz dodać fadeIn lub użyć dodatkowo biblioteki jQuery UI.

Tutaj masz przykład z fadeIn: https://jsfiddle.net/1a31okyz/

Z fadeln wygląda przyzwoicie.
Kod z tego linku wkleić do headerinclude i nic więcej?

Bo tak zrobiłem i nie zmieniają się. Chyba, że coś przeoczyłem.


Ok, widzę, że muszą też być tamte kody.
Mógłbyś powiedzieć, gdzie je wkleić? Ten z HTML i CSS

section w okienku javascript zamień na body po prostu.

Super, działa w najlepsze teraz.

Dziękuję Wam za pomoc.

Łukasz napisał 20.11.2016, 17:36:
Pamiętaj aby oznaczać temat jako rozwiązany, wybierając najlepsze posty

Jak oznaczyć tematy jako rozwiązane?

Mam jeszcze pytanie co do tego zmieniania się.

Poprzez zmienianie się, robi się coś na rodzaj "odświeżania strony". Niby w niczym to nie przeszkadza, oprócz tego, że podczas pisania wskaźnik przeskakuje na początek przez to odświeżenie. Podejrzewam, że będzie to dość irytujące.

Jest możliwość uniknięcia tego?

---

Co do cofania się wskaźnika - w shoutboxie nie zmienia się po odświeżeniu. Wskaźnik reaguje tylko w edytorze, np. podczas pisania postu.

Ja na JSie specjalnie się nie znam, ale bez .hide() płynniej się zmienia. Jakby ktoś ogarnięty w temacie mógłby się wypowiedzieć to fajnie byłoby.

Na jakiej zasadzie ten wskaźnik przeskakuje? Możesz jakoś to przedstawić (gif / konto testowe / etc.)?

Pisząc jakieś zdanie, przez zmianę tła, wskaźnik przeskakuje na początek linijki. Jakbym wcisnął Home.
Przy dłuższych tekstach, na parę linijek, wskaźnik wraca na początek pierwszej linijki. Tak jakbym miał zacząć pisać od nowa.

Jeśli chcesz sprawdzić w praktyce, to na PW podsyłam Ci dane do testowego konta.

Dopiero znalazłem chwilę czasu, aby tu posiedzieć, lecz chyba zrezygnowałeś ze skryptu.

Ponadto mogła być to wina Twojego edytora tekstu, bo na domyślnym sprawdziłem u siebie i błędu nie zaobserwowałem.