Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][CSS][PHP] Pojawiające się nutki w tle strony
Forum PHP.pl > Forum > Przedszkole
lekosm2
witajcie, chciałbym na mojej stronie zrobić coś takiego, jak pojawiające się nutki na tle strony, szukałem jakiegoś skrtytu w JavaScript, ale nie wiem pod jaką nazwą tego szukać, więc nic nie znalazłem. Chodzi o to by ta nutka https://cdn4.iconfinder.com/data/icons/soun...ic_node-128.png Pojawiała się jako kilka nutek rozmieszczonych na tle strony i po chwili znikały.. i tak w kółko, pojawiają się w losowym miejscu i znikają..
Jest mi ktoś w stanie pomóc? Wiecie jak taki efekt się nazywa?
trueblue
http://stackoverflow.com/a/4796985/5889778
lekosm2
Wszystko fajnie, tylko jak zrobić by było kilka tych nutek?
Zrobiłem to tak:

  1. (function makeDiv(){
  2. var divsize = ((Math.random()*32) + 32).toFixed();
  3. var color = 'url(http://cdn4.iconfinder.com/data/icons/sound-and-audio/32/black_7_music_node-32.png) no-repeat';
  4. $newdiv = $('<div/>').css({
  5. 'width':divsize+'px',
  6. 'height':divsize+'px',
  7. 'background': color
  8. });
  9.  
  10. var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
  11. var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
  12.  
  13. $newdiv.css({
  14. 'position':'absolute',
  15. 'left':posx+'px',
  16. 'top':posy+'px',
  17. 'display':'none'
  18. }).appendTo( 'body' ).fadeIn(100).delay(300).fadeOut(200, function(){
  19. $(this).remove();
  20. makeDiv();
  21. });
  22. })();
trueblue
W środku funkcji makeDiv tworzyć kilka divów, np. w pętli. Przy czym aby się nie pokazywały wszystkie równocześnie, warto dodać jakiś losowy czynnik, od którego będzie uzależnione utworzenie danego diva.
lekosm2
A powiedz mi jeszcze jak zrobić, by te nutki pojawiały się pod zawartością, która jest w divach? Bo próbowałem z z-index, ale nie działa..
trueblue
Które divy masz na myśli?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.