Jak dodać automatyczne przejście w CSS do carousel?


(Pkowal 007) #1

Witam,

byłbym mega wdzięczny gdyby ktoś pomógł mi z dodaniem jednego elementu. Próbowałem już we wszystkie strony ale ni czorta, nie działa :confused:

Chodzi o ten element na dole strony http://fundacjacrm.pl/strona13/index.php - "Wspierają nas". Są tam loga które przesuwają się po naciśnięciu odpowiedniej strzałki. Ja chciałbym aby jeszcze dodatkowo te obrazki przesuwały się same, co mniej więcej 2 sekundy (oczywiście strzałki cały czas mają być aktywne). I teraz pytanie jak? Pomagałem sobie tą stroną http://csswizardry.com/2011/10/fully-fluid-responsive-css-carousel/ lecz w żaden sposób nie udało mi się tego tak uruchomić:confused:

Kod ze strony:

poprzedninastępny

  • [krka.png](images/wspieraja_nas/krka.png)
  • [bayer.png](images/wspieraja_nas/bayer.png)
  • [biomerieux.png](images/wspieraja_nas/biomerieux.png)
  • [lekam.png](images/wspieraja_nas/lekam.png)
  • [astellas.png](images/wspieraja_nas/astellas.png)
  • [gambro.png](images/wspieraja_nas/gambro.png)
  • [fmc.png](images/wspieraja_nas/fmc.png)
  • [apotex.png](images/wspieraja_nas/apotex.png)
  • usp.png
  • [image1a.png](images/wspieraja_nas/image1a.png)
  • [image2a.png](images/wspieraja_nas/image2a.png)
  • [image3a.png](images/wspieraja_nas/image3a.png)
    [/code] Kod z CSS
    [code] .carousel-box { width:220px; height:217px; position:relative; } #carousel li {width:220px !important; height:100px !important;background:url(../images/border-3.gif) repeat-x bottom;padding:8px 0 0px;} .jCarouselLite { margin:0px; width:217px !important; } .carousel-box2 {height:485px; position:relative;} #carousel2 li {width:230px; padding-bottom:20px;} #carousel2 li a {text-decoration:none;color:#7C7979;} #carousel2 li a:hover {text-decoration:underline;} .jCarouselLite2 {margin:0px; height:485px !important;} #prev, #next { position:absolute; display:block; width:14px; height:14px; background:#F00; z-index:5 !important; text-indent:-5000px; top:-31px !important; } #page6 #prev, #page6 #next {top:-47px !important;} #page6 #prev {right:55px !important;} #page6 #next {right:30px !important;} #prev { background:url(../images/prev.png) left 0 no-repeat; right:25px !important; } #next { background:url(../images/next.png) left 0 no-repeat; right:0px !important; } #prev:hover, #next:hover {background-position: left -24px;}

Próbowałem wstawić gdzieś ten element ale nic z tego:

-moz-animation:carousel 2s infinite;

-webkit-animation:carousel 2s infinite;

animation:carousel 2s infinite;

Czy ktoś może mi pomóc? :slight_smile: Dzięki!!


(manieKMP) #2

A określiłeś “keyframes” dla tej swojej karuzeli? Animacja bez tego nie może działać, ponieważ nie wiadomo co konkretnie ma robić (masz to na końcu tutka, który podałeś, z tym że w nim masz określone przesunięcie w bok/lewą stronę…).

Innymi słowy, dla:

-moz-animation:carousel 2s infinite;

-webkit-animation:carousel 2s infinite;

animation:carousel 2s infinite;

powinieneś dopisać jeszcze:

@keyframes carousel {

dane nt. wykonywanych czynności

}

(Pkowal 007) #3

No faktycznie. O tym nie pomyślałem. Generalnie coś zaczyna mi świtać ale brak wiedzy w tym temacie nie pozwala mi zrobić następnego kroku :confused:

Jak określić przewijanie z dołu w górę? Up? W ten sposób ani drgnie :confused:


(masma) #4

http://sorgalla.com/jcarousel/

http://sorgalla.com/projects/jcarousel/ … _auto.html

http://www.rshahin.com/how-to-install-a … usel-lite/

http://jsfiddle.net/x7jxa/4/

http://caroufredsel.dev7studios.com/

http://coolcarousels.frebsite.nl/c/23/

http://visionwidget.com/free-jquery-car … ugins.html


(manieKMP) #5

Określ tyle części procentowych ile masz elementów do przesunięcia w zakresie 0-100% (ogólnie określa to prędkość przesunięcia).

Dla każdego procentu podaj “top” o ujemnej wartości (pierwsza będzie miała top = 0px) równiej sumie wysokości przesuwanych elementów.

U Ciebie jest chyba 11 elementów ogółem, więc powinieneś podzielić % na 11 części (jak będą równe to prędkość przejścia będzie identyczna) i odejmować “top” każdej, biorąc pod uwagę wysokość elementu (u Ciebie jest chyba 100px)…

Przykład na 10 elementach (lenia mam na przeliczanie ;))

@-prefix-keyframes carousel {

0% {top: 0px;}

10% {top: -100px;}

20% {top: -200px;}

30% {top: -300px;}

40% {top: -400px;}

50% {top: -500px;}

60% {top: -600px;}

70% {top: -700px;}

80% {top: -800px;}

90% {top: -900px;}

100% {top: -1000px;}

}

Za “prefix” dajesz np. webkit, moz itp.


(Pkowal 007) #6

OK, udało mi się ruszyć tą skałę. Ale przewija się nie tak jak bym chciał i teraz nie wiem czemu? :confused:

Tak wygląda mój obecny kod w CSS dotyczący tej karuzeli"

.carousel-box {

	width:220px; 

	height:217px; 

	position:relative;

}


#carousel li {width:220px !important; height:100px !important;background:url(../images/border-3.gif) repeat-x bottom;padding:8px 0 0px;}


.jCarouselLite {

	margin:0px; 

	width:217px !important;


	-moz-animation:carousel 5s infinite;

}


@-moz-keyframes carousel {

0% {top: 0px;}

16,6% {top: -20px;}

33,2% {top: -40px;}

49,8% {top: -60px;}

66,4% {top: -80px;}

83,2% {top: -100px;}

100% {top: -120px;}

}


.carousel-box2 {height:485px; position:relative;}

#carousel2 li {width:230px; padding-bottom:20px;}

#carousel2 li a {text-decoration:none;color:#7C7979;}

#carousel2 li a:hover {text-decoration:underline;}

.jCarouselLite2 {margin:0px; height:485px !important;}


#prev, #next {

	position:absolute;

	display:block;

	width:14px;

	height:14px;

	background:#F00;

	z-index:5 !important;

	text-indent:-5000px;

	top:-31px !important;

}


#page6 #prev, #page6 #next {top:-47px !important;}

#page6 #prev {right:55px !important;}

#page6 #next {right:30px !important;}


#prev {

	background:url(../images/prev.png) left 0 no-repeat;

	right:25px !important;

}


#next {

	background:url(../images/next.png) left 0 no-repeat;

	right:0px !important;

}


#prev:hover, #next:hover {background-position: left -24px;}

Strona tutaj http://fundacjacrm.pl/strona13/index.php#. Zerknijcie plis. Będę wdzięczny za podpowiedź co zmienić aby przewijały się wszystkie zdjęcia a nie tylko pierwsze dwa. Wrzucałem ten element w inne miejsca i niestety nic z tego nie wyszło.

Poza tym obrazki chowają się pod napis a nie pod tą przerywaną linię co też mnie wkurza :slight_smile: Jakieś sugestie? :slight_smile:


(manieKMP) #7

Animacja jest podpięta pod zły element, dałeś pod “.jCarouselLite”, powinno być pod “ul#carousel” (jest dzieckiem tego pierwszego), przez to masz wjazd na tytuł (przenieś “animation…” w odpowiedni/podany element).

Poza tym keyframes źle nastawiłeś, według tego co masz teraz na stronie (i w podanym kodzie css) elementy “#carousel li” mają wysokość 100px, a nie jak w Twoim ustawieniu 20px (o tyle właśnie jest przesunięcie…). Mając jedenaście elementów, powinieneś odejmować 100 pikseli każdego, zaczynając od drugiego % (patrz przykład z poprzedniego postu, bo na dobrą sprawę musisz w nim jedynie powiększyć ilość elementów, zmniejszając/dzieląc odpowiednio %).


(Pkowal 007) #8

Łaaa!! Działa!! :slight_smile: Kolego przepraszam ale jeszcze Cie pomęczę :slight_smile: Działa ale teraz brakuje mi jeszcze dwóch rzeczy. Ustawiłem tak jak napisałeś ale obrazki lecą jednostajnie praktycznie bez zatrzymywania.

A ja chciałbym aby skakały co jeden w górę i tak wkoło. Czego tam brakuje?

A wygląda to tak:

.carousel-box {

	width:220px; 

	height:217px; 

	position:relative;

}


ul#carousel {


	-moz-animation:carousel 10s infinite;

}


@-moz-keyframes carousel {

0% {top: 0px;}

8,3% {top: -100px;}

16,6% {top: -200px;}

24,9% {top: -300px;}

33,3% {top: -400px;}

41,5% {top: -500px;}

49,8% {top: -600px;}

58,1% {top: -700px;}

66,4% {top: -800px;}

74,7% {top: -900px;}

83,1% {top: -1000px;}

91,5% {top: -1100px;}

100% {top: -1200px;}

}


#carousel li {width:220px !important; height:100px !important;background:url(../images/border-3.gif) repeat-x bottom;padding:8px 0 0px;}


.jCarouselLite {

	margin:0px; 

	width:217px !important;

}


.carousel-box2 {height:485px; position:relative;}

#carousel2 li {width:230px; padding-bottom:20px;}

#carousel2 li a {text-decoration:none;color:#7C7979;}

#carousel2 li a:hover {text-decoration:underline;}

.jCarouselLite2 {margin:0px; height:485px !important;}


#prev, #next {

	position:absolute;

	display:block;

	width:14px;

	height:14px;

	background:#F00;

	z-index:5 !important;

	text-indent:-5000px;

	top:-31px !important;

}


#page6 #prev, #page6 #next {top:-47px !important;}

#page6 #prev {right:55px !important;}

#page6 #next {right:30px !important;}


#prev {

	background:url(../images/prev.png) left 0 no-repeat;

	right:25px !important;

}


#next {

	background:url(../images/next.png) left 0 no-repeat;

	right:0px !important;

}


#prev:hover, #next:hover {background-position: left -24px;}

(manieKMP) #9

Hehe, teraz ja z lekka strzeliłem błędem ;). Spojrzałem jeszcze raz w tego tutka, którego podałeś w pierwszym poście i zauważyłem na jak wyglądają “pauzy”:

@keyframes carousel{

    0% { left:0; }

    11% { left:0; }

    12.5% { left:-100%; }

    23.5% { left:-100%; }

    25% { left:-200%; }

    36% { left:-200%; }

    37.5% { left:-300%; }

    48.5% { left:-300%; }

    50% { left:-400%; }

    61% { left:-400%; }

    62.5% { left:-300%; }

    73.5% { left:-300%; }

    75% { left:-200%; }

    86% { left:-200%; }

    87.5% { left:-100%; }

    98.5% { left:-100%; }

    100% { left:0; }

}

A poniższe dla Ciebie, ale do “dopieszczenia” (coś nie trybi z wysokością przesunięcia, więc będzie trzeba poprzesuwać odpowiednio, no i może będziesz chciał pobawić się z czasem -teraz jest po 5% na pauzę i 1% na przesunięcie):

@keyframes carousel {

0% {top: 0px;}

5% {top: 0px;}

6% {top: -100px;}

11% {top: -100px;}

12% {top: -200px;}

17% {top: -200px;}

18% {top: -300px;}

23% {top: -300px;}

24% {top: -400px;}

29% {top: -400px;}

30% {top: -500px;}

35% {top: -500px;}

36% {top: -600px;}

41% {top: -600px;}

42% {top: -700px;}

47% {top: -700px;}

48% {top: -800px;}

53% {top: -800px;}

54% {top: -900px;}

59% {top: -900px;}

60% {top: -1000px;}

65% {top: -1000px;}

66% {top: -1100px;}

71% {top: -1100px;}

72% {top: -1200px;}

80% {top: -1200px;}

100% {top: 0px;}

}

(Pkowal 007) #10

Super! Pobawiłem się z px i się udało! Działa tak jak chciałem aby działało! :slight_smile: Dzięki kolego!

Teraz mam pytanko dot. czegoś innego. Nie działają teraz strzałki do przewijania. Wiesz może czemu?


(manieKMP) #11

A na jakiej zasadzie one działały, nie były/są podpięte pod jakiś skrypt js?

Ja bym zasadzie się tych przycisków pozbył (skoro się wsio rusza z automatu ;)) i dodał do css’a “animation-play-state:paused;” dla dodatkowego wpisu “ul#carousel:hover”, czyli coś w tym stylu:

ul#carousel:hover {

animation-play-state:paused;

-webkit-animation-play-state:paused;

}

co powinno spowodować zatrzymanie animacji po najechaniu na tą przewijaną listę (takie ułatwienie dla kliknięcia w te obrazkowe linki ;))


(Pkowal 007) #12

W sumie masz rację. Tak się zastanowiłem na spokojnie i tak będzie lepiej. Schowałem te przyciski i zrobiłem też tak jak napisałeś, także jest spoko. Śmiga!

Dobra, to jak już tak sobie miło piszemy:D to mam jeszcze do Ciebie pytanko. Widzę, że ogarniasz temat dość biegle więc tutaj też pewnie podpowiesz mi coś mądrego. Chodzi o menu.

Wejdź na stronkę http://fundacjacrm.home.pl/strona13/ i najedź mychą na “odpowiedzialność społeczna”. Wysunie Ci się podmenu. Tutaj np. jak najedziesz na “pomagamy tym większym” to zielone podkreślenie nie zaznacza całego tekstu bo jest on w dwóch linijkach. Wkurza mnie to strasznie. Żeby to zmienić to musiałbym w stylach dodać drugą grupę/drugie submenu. Ale za nic mi to nie wychodzi. Można zrobić class tylko dla pozycji lub ?

Na stronie kod wygląda tak:

[code]/*********************************menu**********************************/ nav { background:url(…/images/nav-bg.jpg) repeat 0 0; width:100%; border-bottom:7px solid #5B5555; /*kolor paska czarnego pod menu */ border-top:7px solid #fff; /*kolor paska białego nad menu */ height:51px; } .menu { padding:0px; width:940px; } .menu > li { float:left; font-size:12px; line-height:1.25em; position:relative; padding: 7px 8px 14px; text-transform:none; /**było: uppercase **/ background:url(…/images/separator.gif) no-repeat left 11px; } .menu > li:first-child { background-image:none; padding-left:30px; /**przesunięcie menu w bok, było: 21 **/ } .menu > li.last {padding-right:0;} .menu > li a { padding-left: 9px; display:inline-block; background:url(…/images/hover-left.png) left -40px no-repeat; cursor:pointer; } .menu > li a > em { padding-right: 9px; display:inline-block; background:url(…/images/hover-right.png) right -40px no-repeat; } .menu > li a em em { color:#FFFFFF; /* kolor czcionki w menu 757272*/ text-align:center; padding: 12px 8px 13px; display:inline-block; background:url(…/images/hover-tail.png) 0 -40px repeat-x; } .menu > li > a:hover, .menu > li > a.active, .menu > li.sfHover > a {background-position: left 0;} .menu > li > a:hover em, .menu > li > a.active em, .menu > li.sfHover > a em {background-position: right 0;} .menu li:hover {visibility: inherit; } /******************************** submenu **************************************/ .menu ul { position: absolute; padding: 6px 0px; top: -999em; width: 161px; background: url(…/images/ul-hover.jpg) repeat 0 0; border-top: 1px solid #5a4e4b; border-left: 1px solid #5a4e4b; border-right: 1px solid #2e2827; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .menu li li {width: 100%; padding:5px 0; background:none;text-align:center;} .menu li li a { display:inline-block; text-align: center; } .menu li:hover ul, .menu li.sfHover ul { left: -10px; top: 66px; z-index: 999; } ul.menu li:hover li ul, ul.menu li.sfHover li ul { top: -999em; } .menu li li a:hover, .menu li li.sfHover > a {background-position: left 0;} .menu li li a:hover em, .menu li li.sfHover > a em {background-position: right 0;} .corner-1 { background:url(…/images/corner-1.png) no-repeat 0 0; display:inline-block; width:13px; height:6px; position:absolute; top:61px; left:55px; z-index:9999; display:none; } .menu li.sfHover .corner-1 {display:inline-block;} .corner-2 { background:url(…/images/corner-2.png) no-repeat 0 0; display:inline-block; width:7px; height:12px; position:absolute; top:16px; left:136px; z-index:99999; display:none; } .menu li li.sfHover .corner-2 {display:inline-block;} /******************************** submenu 2 **************************************/ ul.menu li li:hover ul, ul.menu li li.sfHover ul { left: 142px; top: 0px; z-index: 9999; } ul.menu li li:hover li ul, ul.menu li li.sfHover li ul { top: -999em; }


(manieKMP) #13

Najłatwiejszym obejściem w tej sytuacji będzie tym “dwuwierszowcom” zmniejszenie wartości przynajmniej górnego obramowania (padding).

Po swojej stronie zrobiłem to w ten sposób, że dla wewnętrznych em (tym em, które są w em ;)) elementów dwuwierszowych menu, dopisałem klasę “big” (może być inna nazwa…), a do css’a dopisałem .big {padding: 4px 8px 5px !important;} (u ciebie teoretycznie dopisek “!important” nie powinien być potrzebny, ale jak nie zatrybi to go wstaw).

Na przykładzie pierwszego:

  • Przed

    Pomagamy tym większym[/code]

    • Po

[code]Pomagamy tym większym
Css

.big {padding: 4px 8px 5px !important;}

A co do Twojego pomysłu z wyższym tłem dla “hover”, jest znacznie bardziej skomplikowany do wykonania, choćby ze względu na to, że te tło jest złożone z trzech grafik (lewa i prawa z zaokrąglemiem, oraz środkowa), a ono samo ma “zdolność” do dostosowanie się tylko do szerokości obiektu. Ogólnie trzeba byłoby stworzyć te grafiki na nowo, o większej wysokości i podopisywać więcej do kodu strony, na podobnej zasadzie jak w powyższym rozwiązaniu, tyle że wpisać trzeba byłoby trzy różne klasy w trzy miejsca dla jednego obiektu i powtórzyć je dla reszty (“li a” ma grafikę lewą, pierwsze “em” ma grafikę prawą, a w drugim/wewnętrznym “em” siedzi powtarzająca się grafika dla środka…).

PS. Jest jeszcze inne rozwiązanie, można by te wspomniane grafiki dla “hover” zastąpić/odtworzyć jako stylowanie css dla jednego elementu (byłoby bez podziału na trzy…) i bodajże podpięcie jego pod “li”, ale trzeba byłoby pozbyć się jeszcze samych grafik… :wink:


(Pkowal 007) #14

Zrobiłem tak jak napisałeś z tym obramowaniem. Teraz jest wystarczająco dobrze. Mogłoby być lepiej ale to już dużo więcej zabawy musiałbym poświęcić.

Może jak będę miał więcej czasu to dla własnego poćwiczenia spróbuję to ogarnąć. Ale teraz i tak jest zajebiście :slight_smile:

Dzięki wielkie!! Pomogłeś mi w 100%! Szacun =D> :slight_smile: