JS/JQUERY - fadeIn oraz fadeOut w zależności od scrolla? Opcje

[malcolm]

Hej wszystkim,
mam pytanko:

JS/JQUERY - fadeIn oraz fadeOut na stronie w zależności od pozycji scrolla?

Już tłumaczę o co mi chodzi, np.
gdy scrollbar przeglądarki na stronie przesunę do dołu do 100px, po przekroczeniu tych 100px, pojawi mi efekt animacji: animate o 200px w prawo z efektem fadeIn,
po czym stop,
i "trwa" i nic się nie zmienia, aż przesunę scrollbar przeglądarki do 200px, wtedy gdy przesunę scrollbar dalej poza te 200px, ten sam obrazek podczepiony pod ten sam skrypt,
zmieni mi animację z powrotem na: animate -200px w lewo z efektem fadeOut.

Jak to zrobić w JQUERY lub ew. za pomocą CSS3?

Proszę o przykład takiego skryptu.

Z góry dzięki:-)

Ten post edytował malcolm 1.12.2012, 00:41:26

[Pawel_W]

podpinasz się pod event $(window).scroll() następnie pobierasz $(this).scrollTop i dalej na podstawie wartości wykonujesz pożądaną akcję

[Arcioch]

http://pehaa.com/2011/08/intriguing-animat...query-tutorial/

To powinno pomóc

[malcolm]

Wiele mi to rozjaśniło, ale...

no dobrze, ale jak zrobić, na przykładzie który zapodał Arcioch,
efekt kiedy chciałbym dodać kolejną sekcję, czyli tak jak na przykładzie:
zjeżdżam do pewnego momentu na stronie, pojawia się się ta "zieleninka",
przesuwam jeszcze niżej suwakiem i ten efekt powyżej rozjeżdża mi się z powrotem,
a w kolejnej sekcji pojawia się mi na tej samej zasadzie kolejny.

Chodzi mi o to, aby gdy przechodzę z sekcji 1 do 2 rozjeżdżała się zielenika z sekcji 1, a pojawiała w sekcji 2 np. nowa zielenika;-)



ew. pytanie do Pawel_W,
gdyby mógł bardziej rozwinąć wątek,
jakiś najprostszy działający przykład...

jak to zrobić?

...albo może znacie jeszcze jakieś strony z takimi efektami,
bo dużo jest co prawda stron z tutorialami do jquery carousela lub accordion,
ale trudno znaleźć efektów animacji css i jquery typu prallax background
lub o tym efekcie animacji, o którym mowa powyżej - zależnych od scroll bara...

thx:-)

Ten post edytował malcolm 2.12.2012, 17:07:30

[kamil4u]

Czego nie rozumiesz jeśli chodzi o post ~Pawel_W?

podpinasz się pod event $(window).scroll()

event = zdarzenie. Czyli korzystasz z tego jak z każdego innego zdarzenia( load, keypress, mousemove, itd.) - jak nie rozumiesz to w necie są miliony kursów wyjaśniających jak działają zdarzenia w jQuery. Już nie mówiąc o: http://api.jquery.com/scroll/

Wszystko co poniżej wrzucasz do funkcji w zdarzeniu scroll:

następnie pobierasz $(this).scrollTop

http://api.jquery.com/scrollTop/ - informacja o tym, gdzie znajduje się scroll

i dalej na podstawie wartości wykonujesz pożądaną akcję

czyli zwykły if i warunek - jeżeli scroll jest większy od jakieś tam liczby to zrób coś tam

Napisz czego nie rozumiesz i pokaż jak próbowałeś.

[malcolm]

dzięki,
a może jakiś przykład znacie jakąś prostą stronę wykonaną z takim efektem?
Na działającym przykładzie łatwiej ogarnąć...
pleaseee...:-)

Ten post edytował malcolm 3.12.2012, 10:57:10

[kamil4u]

To są 4 linie kodu, już dawano być to miał, gdybyś próbował zrobić to samodzielnie. Gotowca nie dostaniesz dla zasady. Pokaż jak próbowałeś.

[malcolm]

znakazlem cos takiego:
http://johnpolacek.github.com/superscrollorama/
Taki efekt jak ten z tekstem Fly-It
z tym zeby po przesunieciu scrollbara nizej,
pojawial sie efekt (lopatalogicznie tlumaczac) -reverse.

function init() {
myHeight = $(window).height();
$(window).scroll().css('height', myHeight - 400);
$(section).scrollTop.css('min-height', Math.max(myHeight / 2 + 300, 800));
}

coś takiego wyczarowałem, ale nie działa...

pomóżcie...

...jak to zrobić?