Śnieg na stronie

RafalBudzis · 2011-12-22, 23:40(Ostatnia zmiana: 2011-12-26, 09:42)

Witem chciałem się pobawić w śnieg na stronie ale mam kilka problemów
Skrypt zaczerpnąłem stąd
http://www.peters1.dk/webtools/javascript/sne.php?sprog=pl

i teraz tak chciał bym aby płatki się zatrzymywały na koncu strony to udało mi się zrobić ale nie do końca bo jeśli przewiniemy naszą stronę w dół płatki zostają na tej samej wysokości

dodatkowo chciałem aby tworzyło całkiem nowego płatka po dojściu jednego z nich do końca i tu już mi się coś psuje bo czyści całą stronę nic nie widać

to mój zmodyfikowany skrypt

Kod: [Zaznacz]

////////////////////////////////////////////////////////////////
// Javascript made by Rasmus - http://www.peters1.dk // mod Rafał Budzis budzis.republika.pl
////////////////////////////////////////////////////////////////

var SNOW_Picture = "http://www.domain.com/billeder/snow.gif"
var SNOW_no = 2;

var SNOW_browser_IE_NS = (document.body.clientHeight) ? 1 : 0;
var SNOW_browser_MOZ = (self.innerWidth) ? 1 : 0;
var SNOW_browser_IE7 = (document.documentElement.clientHeight) ? 1 : 0;

var SNOW_Time;
var SNOW_dx, SNOW_xp, SNOW_yp;
var SNOW_am, SNOW_stx, SNOW_sty; 
var i, SNOW_Browser_Width, SNOW_Browser_Height;

var SNOW_NEW = 0;//nowa zmienna

if (SNOW_browser_IE_NS)
{
	SNOW_Browser_Width = document.body.clientWidth;
	SNOW_Browser_Height = document.body.clientHeight;
}
else if (SNOW_browser_MOZ)
{
	SNOW_Browser_Width = self.innerWidth - 20;
	SNOW_Browser_Height = self.innerHeight;
}
else if (SNOW_browser_IE7)
{
	SNOW_Browser_Width = document.documentElement.clientWidth;
	SNOW_Browser_Height = document.documentElement.clientHeight;
}

SNOW_dx = new Array();
SNOW_xp = new Array();
SNOW_yp = new Array();
SNOW_am = new Array();
SNOW_stx = new Array();
SNOW_sty = new Array();

for (i = 0; i < SNOW_no; ++ i) 
{ 
	SNOW_dx[i] = 0; 
	SNOW_xp[i] = Math.random()*(SNOW_Browser_Width-50);
	SNOW_yp[i] = Math.random()*SNOW_Browser_Height;
	SNOW_am[i] = Math.random()*20; 
	SNOW_stx[i] = 0.02 + Math.random()/10;
	SNOW_sty[i] = 0.7 + Math.random();
	document.write("<\div id=\"SNOW_flake"+ i +"\" style=\"position: absolute; z-index: "+ i +"; visibility: visible; top: 15px; left: 15px;\"><\img src=\""+SNOW_Picture+"\" border=\"0\"><\/div>");
}

function SNOW_Weather() 
{ 

for (i = 0; i < SNOW_no; ++ i) 
{ 
	SNOW_yp[i] += SNOW_sty[i];

	if (SNOW_yp[i] > SNOW_Browser_Height-20) 
	{
		
		SNOW_yp[i] = SNOW_Browser_Height-20;
		SNOW_stx[i] = 0.02 + Math.random()/10;
		SNOW_sty[i] = 0.7 + Math.random();
		SNOW_NEW = SNOW_NEW + 1;//dodanie nowego płatka
	}

	SNOW_dx[i] += SNOW_stx[i];
	document.getElementById("SNOW_flake"+i).style.top=SNOW_yp[i]+"px";
	document.getElementById("SNOW_flake"+i).style.left=SNOW_xp[i] + SNOW_am[i]*Math.sin(SNOW_dx[i])+"px";
}


////////////////////////nowy platek
if (SNOW_NEW > 0){

	SNOW_no=SNOW_no+SNOW_NEW;
	SNOW_NEW=0;
	SNOW_dx[SNOW_no] = 0; 
	SNOW_xp[SNOW_no] = Math.random()*(SNOW_Browser_Width-50);
	SNOW_yp[SNOW_no] = Math.random()*SNOW_Browser_Height;
	SNOW_am[SNOW_no] = Math.random()*20; 
	SNOW_stx[SNOW_no] = 0.02 + Math.random()/10;
	SNOW_sty[SNOW_no] = 0.7 + Math.random();
	document.write("<\div id=\"SNOW_flake"+ SNOW_no +"\" style=\"position: absolute; z-index: "+ SNOW_no +"; visibility: visible; top: 15px; left: 15px;\"><\img src=\""+SNOW_Picture+"\" border=\"0\"><\/div>");

}
////////////

SNOW_Time = setTimeout("SNOW_Weather()", 10);

}

SNOW_Weather();

Demonical Monk · #1 2011-12-23, 03:22(Ostatnia zmiana: 2011-12-23, 03:45)

Najpierw doprowadź swój kod do porządku i zlikwiduj SYF. Nie dało się użyć obiektów prototypowych i trzymać w jednej tablicy referencje do nich, zamiast 6 dużych tablic symulujących kontener?

Kod: [Zaznacz]

czlowiek = { rozmiarInteresu: 5, wzrost: 140, imie: "Jan Kowalski" }Pod `czlowiek` tworzy się obiekt zawierający trzy właściwości.

Kod: [Zaznacz]

czlowiek.rozmiarInteresu // 5
czlowiek.wzrost // 140
czlowiek.imie // "Jan Kowalski"

Referencje do obiektów można wrzucać w tablicę, wtedy używasz jednej tablicy zamiast 6 i piszesz znacznie czytelniej.

Kod: [Zaznacz]

SNOW_dx = new Array();
SNOW_xp = new Array();
SNOW_yp = new Array();
SNOW_am = new Array();
SNOW_stx = new Array();
SNOW_sty = new Array();

Tak to można najwyżej wzorki na papierze toaletowym nazywać, a jak już się tak nazywa to się pisze najnormalniej w świecie komentarze.

Do rzeczy: Nie używaj do takich spraw `document.write`, tylko wstawiaj elementy bezpośrednio do DOM lub w ostateczności przez .innerHTML do jakiegoś kontenera. Druga sprawa, że masz błąd logiczny. Jeśli dwa płatki w tym samym czasie dojdą do krawędzi to stworzy się tylko jeden.

Kod: [Zaznacz]

if (SNOW_NEW > 0){
//...
SNOW_no=SNOW_no+SNOW_NEW;
SNOW_NEW=0;

Zmienna SNOW_NEW jest inkrementowana w pętli. Kiedy dwa (lub więcej) płatków śniegu jednocześnie dojdą do krawędzi spłodzisz sobie jedno (lub więcej) puste miejsce w tablicy, które może oznaczać wyłożenie się skryptu przy próbie odczytu czegokolwiek stamtąd.

Problem pozostawiania płatków śniegu na tej samej wysokości jest związany z właściwością pozycjonowania absolutnego:

Cytuj

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>

Użyj `position: fixed`:
http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed

Cytuj

An element with fixed position is positioned relative to the browser window.

Czyli dokładnie to, o co Ci chodzi. Osobiście jednak nie polecałbym wykorzystywania jakiegokolwiek skryptu na płatki śniegu lub wrzucenie razem ze skryptem przycisku umożliwiającego wyłączenie tego nie zawsze przyjemnego podczas czytania efektu.

RafalBudzis · #2 2011-12-23, 14:19

Dzięki

Cytat: Demonical Monk#msg w 2011-12-23, 03:22

Osobiście jednak nie polecałbym wykorzystywania jakiegokolwiek skryptu na płatki śniegu lub wrzucenie razem ze skryptem przycisku umożliwiającego wyłączenie tego nie zawsze przyjemnego podczas czytania efektu.

Kto powiedział ze będzie padać wszędzie

Zrobiłem #msg1014609ograniczenie#msg1014609 i snieg pada tylko po bokach strony i oczywiście symbolicznie 2 - 3 płatki w ruchu
http://budzis.republika.pl/zima/link.html

Mi się wydaje ze takie coś jest mało uciążliwe ;)

inż. Avallach · #3 2011-12-23, 14:25(Ostatnia zmiana: 2011-12-23, 14:27)

W Chrome śnieg pada praktycznie tylko z lewej, z prawej tylko jeden płatek na razie. Skoro zajmują tylko marginesy, może zwiększyłbyś ich ilość?

//edit: z prawej już też kilka spadło. Wrażenie tej niejednolitości być może wynika z faktu że spadają tylko po jednej stronie na raz. Pojawia się kilka po jednej, potem kilka po drugiej, i tak na zmianę co jakiś czas. Szkoda że nie jest to jednoczesne, bardziej spójne.

Demonical Monk · #4 2011-12-23, 14:59

Cytat: RafalBudzis#msg w 2011-12-23, 14:19

Dzięki

Cytat: Demonical Monk#msg w 2011-12-23, 03:22
Osobiście jednak nie polecałbym wykorzystywania jakiegokolwiek skryptu na płatki śniegu lub wrzucenie razem ze skryptem przycisku umożliwiającego wyłączenie tego nie zawsze przyjemnego podczas czytania efektu.

Kto powiedział ze będzie padać wszędzie Zrobiłem #msg1014621ograniczenie#msg1014621 i snieg pada tylko po bokach strony i oczywiście symbolicznie 2 - 3 płatki w ruchu
http://budzis.republika.pl/zima/link.html

Mi się wydaje ze takie coś jest mało uciążliwe ;)

Na starym FF tak mi dowaliło płatków, że ledwo stronę dałem radę zamknąć.

inż. Avallach · #5 2011-12-23, 15:31

Mi już też, widzę że Rafal testuje inne parametry...

RafalBudzis · #6 2011-12-23, 16:31

Cytat: Avallach#msg w 2011-12-23, 15:31

Mi już też, widzę że Rafal testuje inne parametry...

Już przestałem ;d

Mam jeszcze jedno pytanie jest jakaś możliwość pobrania współrzędnych kursora ?

Bo chciał bym jeszcze zrobić jakoś #msg1014630mieszanie#msg1014630 płatków żeby użytkownik mógł się pobawić

Demonical Monk · #7 2011-12-23, 16:37

Zdarzenia myszki:
http://javascript.about.com/library/blmousepos.htm

(Google: js mouse pos)

RafalBudzis · #8 2011-12-24, 14:03

Podpowiedział byś coś co do tej jednej tablicy z wieloma obiektami
zamiast tego

Kod: [Zaznacz]

SNOW_dx = new Array();//niewiem
SNOW_xp = new Array();//pozycjaX
SNOW_yp = new Array();//pozycjaY
SNOW_am = new Array();//wiatr
SNOW_stx = new Array();//opadanie
SNOW_sty = new Array();//opadanie
SNOW_koniec = new Array();//zatrzymanie

dałem

Kod: [Zaznacz]

var SNOW = { niewiem: 0, pozycjaX: 0, pozycjaY:0, wiatr:0, opadanieX:0,opadanieY:0 ,koniec:0 }

SNOW = new Array();

odwołuje się tak

Kod: [Zaznacz]

SNOW[i].koniec = 0;

Kod: [Zaznacz]

if (SNOW[i].koniec == 0){

...

i nie działa

Demonical Monk · #9 2011-12-24, 14:12

Kod: [Zaznacz]

var SNOW = { niewiem: 0, pozycjaX: 0, pozycjaY:0, wiatr:0, opadanieX:0,opadanieY:0 ,koniec:0 }

SNOW = new Array();

Tablica != obiekt!

Albo tworzysz obiekt, albo tablicę. W tym wypadku najpierw zrobiłeś jedną instancję obiektu, a potem wywaliłeś to wszystko i zrobiłeś pustą tablicę.

http://www.javascriptkit.com/javatutors/oopjs.shtml

RafalBudzis · (Ostatnia zmiana: 2011-12-24, 16:10)

Dzięki Monk dużo mi pomogłeś już skończyłem
efekt:
http://budzis.republika.pl/zima/link.html
skrypt:
http://budzis.republika.pl/zima/js/snow.js

Skrypt rozbudowałem o :
- pojawianie się nowych płatków
- przemieszczanie płatków kursorem
- 4 obrazki płatków zamiast 1
- zatrzymywanie się śniegu
- usypywanie górek

teraz jeszcze trzeba zastosować do wszystkich zakładek

...

Mark56 · **#11** 2012-02-12, 18:05

moglesz jescze zrobic zeby sie platky przesuvaly v kierunku dovolnym od kursora a nie tylko vprawo i levo

RafalBudzis

Demonical Monk

RafalBudzis

inż. Avallach

Demonical Monk

inż. Avallach

RafalBudzis

Demonical Monk

RafalBudzis

Demonical Monk

RafalBudzis

Mark56