Rafeq_PL

Witam, dziękuję za tą szybką odpowiedź. Choć nie zrozumiałem tego kodu do końca poradziłem sobie w inny sposób. Istnieje pomysłowy plugin pt. "jQuery visible" (link:https://github.com/t...jquery-visible/). Polega to na tym, że gdy obiekt jest widoczny na ekranie to funkcja zwraca wartość "true". W innym przypadku zwraca "false".

Oto kod, który mi działa. Animacja (napisana w css3) działa gdy obiekt "img#shape" jest na ekranie. Gdy scrollujemy, obiekt ciągle jest sprawdzany, czy nie jest widoczny. Animacje dwóch obiektów są przypisane do klas dlatego klasy są dodawane do obiektów o id: "shape" i "animacja".
 

$(document).ready(function(){
if ($("img#shape").visible() === true)
{ $("img#shape").addClass("NAZWAKLASY");
 $("p#animacja").addClass("NAZWAKLASY");
}
});

$(window).scroll(function(){
if ($("img#shape").visible() === true)
{ $("img#shape").addClass("NAZWAKLASY");
 $("p#animacja").addClass("NAZWAKLASY");
}
});

Dobra, sam sobie poradziłem. 

Demo: http://cssdesk.com/6Mp2C

wniosek: wystarczyło margin'y zmienić na position(relative).

No właśnie chodziło mi by ten obrazek/obraz/tło - jak wolisz, był za tekstem.

Niestety, jak powciskasz kilka razy na przemian to skończy się tym, że dwa się wyświetlą.

Nie, po prostu ma mi to nie spadać z boxa.

Możesz elementom o klasie box ustawić pozycję absolutną.
Wtedy będzie jeden na drugim, dzięki czemu uzyskasz lepszy efekt przejścia.
Później już tylko ustawiasz margin i ewentualny padding.

Próbowałem, ale jakoś nie chce się przestawić ;\. mam jeszcze jeden pomysł, na razie to sprawdzam..