2 efekty na stronie Pana Mirosława

Question

Chodzi mi tutaj dokładnie o 2 efekty które są zastosowane na stronie: http://miroslawzelent.pl/

1 efekt: gdy wchodzimy na tą strone np. z urządzenia mobilnego, menu mamy w formie wysówanej w dół dopiero po kliknięciu ponieważ normalnie nie mieściło by nam się to na ekranie telefonu tak jak na monitorze komputera i końcowe zakładki by przeszły w 2 linijke, jak coś takiego zrobić ponieważ mam z tym problem i zabardzo nie wiem jak się za to zabrać.

 

2 efekt już mniej ważny lecz chciałbym jak go osiągnąć, z momentem scrolowania strony w dół poszczególne elementy dopiero po chwili nam "wieżdżają" na ekran super efekt i jestem ciekaw jak go osiągnąć.

 

Z góry dziękuje za odpowiedź

Pozdrawiam

Answer 1

1. Na stronie użyty jest Bootstrap. On ma funkcje, które mogą zrobić takie menu bez większego wysiłku.

Przykład:

http://getbootstrap.com/examples/navbar-fixed-top/

2. Do drugiego można użyć jQuery. Sprawdzamy czy element ma być widoczny na ekranie w danym momencie jeśli tak to go pokazujemy  z efektem slideUp oraz zmianą css opacity: z np 0 na 1.

Plugin do jQuery:

https://github.com/customd/jquery-visible

Przykład:

http://opensource.teamdf.com/visible/examples/demo-basic.html

Oraz jQueryUI:

może się przydać http://api.jquery.com/slideup/

oraz http://api.jquery.com/css/

Comments

Jeszcze przydała by się osoba, która by pokazała jak to zrobić od początku do końca, ale może sam się z tym uporam :)

Answer 2

ad. 2) biblioteka wow.js Ci pomoże

ad. 1) media queries i zmiana wyświetlania menu przy mniejszych rozdzielczościach. Pomysł jak to zrobić może Ci poddać Bootstrap

Answer 3

1. Możesz zapisać w css takie ustawienia, skorzysaj z  @media screen and (max-width: 980px)