#webdev #webdesign #frontend Uszanowanko! Wymyśliłem sobie ostatnio pewien specyficzny efekt scrollowania, ale zupełnie nie mam pomysłu jak wprowadzić go w życie. Myślę, że obrazek dość dobrze wyjaśnia o co mi chodzi. W skrócie: Pomarańczowa ramka to okno przeglądarki. Po rozpoczęciu scrollowania, niebieska sekcja zmniejsza swoją wysokość, aż do uzyskania wysokości potrzebnej do uformowania paska menu (np height: 100px). Po osiągnięciu tej wysokości, sekcja zaczyna zachowywać się jak przypięte (position:fixed) menu pod którym chowa się cała reszta contentu. Warunkiem koniecznym jest to, że chowający się content nie może "wyłazić" z powrotem ponad tym menu (całość jest odsunięta od górnej krawędzi przeglądarki na jakieś 80px), no i chcę zachować zaokrąglenie narożników. Jak coś nie jasno napisałem to mówcie, postaram się doprecyzować. Ma ktoś jakiś pomysł, jak można wykonać taki "bajer"?
@lukpep: Zajmuje się grafiką. Efekt przyszedł mi do głowy wczoraj podczas projektowania, a że frontendowiec jest na urlopie to pomyślałem, że czegoś się nauczę ;]
@kajtom dosyć popularne rozwiązanie, przy użyciu JQuery banalne do wykonania. Jednak aby płynnie i ładnie to wyglądało przy scrollowaniu myszką, przydaje się modyfikowanie scrolla, co często irytuje użytkownika
Uszanowanko! Wymyśliłem sobie ostatnio pewien specyficzny efekt scrollowania, ale zupełnie nie mam pomysłu jak wprowadzić go w życie. Myślę, że obrazek dość dobrze wyjaśnia o co mi chodzi.
W skrócie: Pomarańczowa ramka to okno przeglądarki. Po rozpoczęciu scrollowania, niebieska sekcja zmniejsza swoją wysokość, aż do uzyskania wysokości potrzebnej do uformowania paska menu (np height: 100px). Po osiągnięciu tej wysokości, sekcja zaczyna zachowywać się jak przypięte (position:fixed) menu pod którym chowa się cała reszta contentu. Warunkiem koniecznym jest to, że chowający się content nie może "wyłazić" z powrotem ponad tym menu (całość jest odsunięta od górnej krawędzi przeglądarki na jakieś 80px), no i chcę zachować zaokrąglenie narożników.
Jak coś nie jasno napisałem to mówcie, postaram się doprecyzować.
Ma ktoś jakiś pomysł, jak można wykonać taki "bajer"?
Generalnie javascript, jQuery, proste efekty .
Najprościej w jQuery, poczytaj o .css(), .animate(), maja dobra dokumentację
Wysokość paska na podstawie scrollowania, jakas mini zależność między jednym a drugim i pyknie :)
@Drakalen: szukałem, ale szczerze, to nawet nie wiem jak coś takiego nazwać
Dwie rzeczy do zapamiętania:
1. html to nie photoshop
2. lorem ipsul w "prawdziwym świecie" może zawierać treść wykraczającą poza narysowane granice
Edit, trzy:
3. żadnych cudacznych czcionek na stronach, a zwłaszcza czcionek kosztujących kilkanaście-kilkadziesiąt dolców