Pomoc w uzyskaniu efektu 'uciekającej grafiki' na stronie WWW (Joomla)

Question

Nie owijając w bawełnę chciałbym uzyskać następujący efekt na stronie:
Po załadowaniu widzimy grafikę na całą stronę z jakimś napisem na środku, a po przescrollowaniu w dół o określoną wartość grafika z tekstem by 'uciekała' do góry i się chowała.. Jakieś wskazówki jak to zrobić? Lub jak się nazywa taki efekt, żebym mógł przeprowadzić szturm na google w celu uzyskania odpowiedzi.
Domyślam się, że bez JS się nie obejdzie.
działam na Joomla! 3.x, więc możliwe, że jest taki moduł,
Z góry dziękuję za wszelką pomoc.

Answer 1

Parallax, być może o to Ci chodzi

Comments

znalazłem coś takiego:
 

* {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  margin: 0;
}

html, body {
  height: 100%;
}

div {
  width: 100%;
  height: 100%;
}
div.first {
  background-image: url("http://i.imgur.com/PbV1Grl.jpg");
  background-attachment: fixed;
  background-size: cover;
}
div.second {
  background-image: url("http://i.imgur.com/VWYl1EC.jpg");
  background-size: cover;
}

<div class="first"></div>
<div class="second"></div>

Zamieniłem miejscami te div'y i efekt prawie taki, o jaki chodziło. chciałbym tylko, żeby np po 2-3 przeskokach scrolla (na myszce) grafika sama uciekała do góry

---

<script> 
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};

// Get the navbar
var tekst = document.getElementById("tekst");

// Get the offset position of the navbar
var unstycki = tekst.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
    if (window.pageYOffset < unsticky) {
        navbar.classList.remove("sticky")
    } else {
        navbar.classList.add("sticky");
    }
}
</script>

<style>
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
#navbar{
  capacity:1;
  z-index:1;
}
body{
   background-image: url("http://i.imgur.com/PbV1Grl.jpg");

  background-attachment: fixed;

  background-size: cover;
}
* {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  margin: 0;
}

html, body {
  height: 100%;
}

div {
  width: 100%;
  height: 100%;
}
div.second {
  background-image: url("http://i.imgur.com/VWYl1EC.jpg");
  background-size: cover;
}
p#tekst {
    position: fixed;
    top: 0;
    z-index: -1;
}
</style>

<div class="second">
</div>
<div class="first" ><p id='tekst'>
  nigdy bym nie pomyślał, że tak wszystko się zmieni,<br>
na obcej ziemi długo, ponad cztery lata,<br>
trochę zyskałem, co z tego? o wiele więcej straciłem,<br>
każdego kolejnego dnia z myślami się biję,<br>
w pobliżu jak wąż się wije pierdolona zła energia, <br>
***** ten świat zaczyna mnie poważnie wnerwiać,<br>
praca, dobrze jest jeden plus chociaż się opłaca,<br>
do normalnego życia nie muszę dopłacać,<br>
mam hajs na zioło, alkohol, ciuchy i sprzęt,<br>
mogę zajmować się muzyką kiedy tylko chcę,<br>
co z tego? skoro zgubiłem własną drogę i sens,<br>
zaciśnięta pięść, bardzo często podobny sen,<br>
nostalgia, melancholia, tęsknota za tym co było,<br>
tysiące wspomnień wraca z coraz większą siłą,<br>
choć czasem się wydaje, że tego nigdy nie było,<br>
co to jest przyjaźń? co to ***** jest miłość?<br>
<br>
te wszystkie godziny, które spędziłem sam,<br>
często myślę - za dużo było tych zmian,<br>
za dużo ran, wiele niepotrzebnych słów,<br>
pieprzyć wszystko, czas na kolejny ruch,<br>
<br>
zostałem sam na tej pieprzonej stacji donikąd,<br>
nie pierwszy, nie ostatni ze straconych zawodników,<br>
nie ufam już nikomu, poza paroma wyjątkami,<br>
jedno jest pewne kurwy będą kurwami,<br>
tęsknię za mamą, Poznaniem, moimi rejonami,<br>
za porządną imprezką z dobrymi kumplami,<br>
po staremu pewnie byłaby pizda na poziomie,<br>
tutaj mój nastrój często w deszczu tonie,<br>
łzy gdy widzisz jak ktoś bliski schodzi na psy,<br>
często jestem zły, jeszcze częściej wkurwiony,<br>
a demony przeszłości nie znają litości,<br>
wszystko rozpieprzą, ona to już przeszłość,<br>
a teraźniejszość jest totalnie pogmatwana,<br>
czasem do rana nie potrafię zasnąć przez nią,<br>
ciemność, wtedy problemy wychodzą na zewnątrz,<br>
umierają wtedy, piękne kwiaty zaczynają więdnąć,<br>
<br>
te wszystkie godziny, które spędziłem sam,<br>
często myślę - za dużo było tych zmian,<br>
za dużo ran, wiele niepotrzebnych słów,<br>
pieprzyć wszystko, czas na kolejny ruch,<br>
te wszystkie godziny, które spędziłem sam,<br>
często myślę - za dużo było tych zmian,<br>
za dużo ran, wiele niepotrzebnych słów,<br>
pieprzyć wszystko, czas na kolejny ruch,<br>
</p>
</div>

Ktoś dałby radę poprawić CSS/JS tak, aby po 'zniknięciu' div.second, div.first(tekst) zaczął się scrollować ?