Jak zrobić przejścia na stronie

Witam
Buduję swoje portfolio i jestem przy projekcie strony. Jako, że zajmuję się też grafiką gotową wizualizację już zrobiłam, jednak nie potrafię "napisać" przejść na stronie. Mam na myśli coś w stylu jak na ezebra https://www.ezebra.pl/ , na stronie startowej mamy zdjęcia, które po upływie kilku sekund przesuwają się w prawo lub po kliknięciu na strzałkę. Nie mam pomysłu, czy mogę liczyć na wskazówkę Drodzy Webmasterzy?
Pozdrawiam
EDIT: jeśli to istotne (a pewnie tak), po kliknięciu na zdjęcie wyświetlane aktualnie użytkownik będzie przenoszony do danej podstrony.

Najpierw się sama zastanów, co konkretnie chcesz uzyskać.
Jeśli chodzi o zdjęcie w tle - chociażby https://vegas.jaysalvat.com/
Jeśli o pasek z przesuwanymi elementami - poszukaj pod hasłem slidebar - chociażby coś w tym stylu: http://blog.compsoul.pl/liseblog/wydajny-i-szybki-slider-na-strone-internetowa/57.html

Chciałem też pokazać Ci konkretny fragment w podanej przez Ciebie jako wzór stronie, który odpowiada za animację slajdów, ale po zajrzeniu w kod stwierdzam, że jest on raczej brzydko napisany, więc dajmy sobie z tym spokój ;) Zamiast tego rzuć okiem na https://www.w3schools.com/howto/howto_js_slideshow.asp - masz tam dość prosto pokazane, jak się takie coś z przesuwanymi elementami robi. @lubietarty - jak przejrzysz ostatni podany przeze mnie link i będziesz miała problemy ze zrozumieniem, to śmiało pisz, pomożemy :)

Ja tam nie widzę żadnych efektów przejścia :/ Widzę stronę koszmarnie naćkaną wszelkim możliwym szpiegowsko-reklamowym syfem.

Tutaj ciekawe i proste przykłady kodu związanego z przejściami obrazków: http://css3.bradshawenterprises.com/cfimg/

Ja tam nie widzę żadnych efektów przejścia :/

Też nie widzę efektów przejścia, co najwyżej przeskoki spowodowane tym, że treść się nie wczytała jeszcze (a jak się wczyta, to wszystko przeskakuje). Ta strona nie wygląda dobrze i szczerze mówiąc jak kliknąłem w linka (zanim przeczytałem pierwszego posta) myślałem właśnie, że to twoja strona, którą chcesz poprawić, a nie coś na czym chcesz się wzorować.

Ale dobra, już widzę, jest faktycznie taki fading jak się kliknie w strzałkę.

To można osiągnąć przez animację opacity jednego obrazka z 1 do 0, i w międzyczasie animacja drugiego obrazka z 0 do 1.
poza tym google: CSS3 transitions, CSS3 animations itp.

Dobra, żeby nie było, że tylko marudzę:
http://webkod.pl/kurs-css/lekcje/dzial-1/efekt-przejscia-transition-css3

Jeśli to głównej nie robiłbym slidera, bo kilka obrazków fullHD będzie trochę ważyć, dałbym odnośnik z miniaturą do galerii i starczy, bardziej czytelne i każdy klika co chce zobaczyć.

Dziękuję. Nie wiedziałam, że tak szybko uzyskam pomoc :) Faktycznie, ezebra to nie jest strona w jakiej kontent chcę trafić, ani estetyka jaką mogłabym nazwać inspiracją, ale chodzi o sam element przejścia. Nie wiem nawet czy dobrze to nazwałam.

No to nie zastanawiaj się, jak to się fachowo nazywa, ale opisz jak najbardziej dokładnie, co chcesz uzyskać. Wspomniałaś też, że masz jakieś wizualizacje - możesz je tutaj wrzucić, na pewno ułatwi to nam zadanie :P

Chodzi o przejścia, u mnie klikając na "kuleczkę" zdjecia będą się przesuwały :) To zaraz pod logo i paskiem menu.

No to ponownie wrzucę link, który zamieściłem kilka postów wyżej - https://www.w3schools.com/howto/howto_js_slideshow.asp
Masz tam przesuwające się slajdy, masz strzałki, masz nawet "kuleczki" które po kliknięciu wyświetlają odpowiedni slajd :P
W podanym linku zdjęcia się nie przesuwają, ale przenikają. Dokładny sposób przenikania masz określony na samym końcu:

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

pobaw się tymi wartościami i dopasuj do swoich potrzeb.

lubietarty napisał(a):

Chodzi o przejścia, u mnie klikając na "kuleczkę" zdjecia będą się przesuwały :) To zaraz pod logo i paskiem menu.

Przesuwanie nie musi, niemniej może działać na tej samej zasadzie, co przenikanie (animacje CSS).

Dziękuję!

Jeśli chodzi o przesuwanie, wydaje się, że tutaj masz ładnie pokazane co i jak się robi: https://css-tricks.com/can-get-pretty-far-making-slider-just-html-css/

UPDATE: Polecam inne artykuły na tej stronie, jeśli (za)interesuje Cię temat CSS i animacji. Są tam różni autorzy (nie wszyscy mają taki sam styl pisania). Mnie zachęciła w niej m.in. przejrzystość oraz design.

Też fajna opcja, dzięki!