Ogólnie ten efekt to nie wysuwanie, a zmiana położenia elementu przed i po najechaniu. Dochodzi do tego również jego wysokość na stronie. To może wpierw o pozycjach. Jeśli chcemy, żeby nasze coś jeździło za nami po stronie to dajemy "fixed", a jeśli ma być tylko gdzieś ukryte to pozycję relatywną bądź absolutną. Łatwe? Niekoniecznie? Ale to nie jest trudne. Wystarczy poznać podstawę tej zmiany. Dajmy na to, że chcemy, żeby ramka z tekstem wyjeżdżała nam z dołu po prawej. Musimy znać selektor, w tym wypadku ID widżetu, a będzie to #Text1. Wiemy, że okienko ma jeździć, czyli fixed. No to zbudujmy CSS najpierw dla elementu, który będzie "ukryty".
#Text1 {Teraz wam objaśnię co to jest po kolei:
position: fixed;
bottom: -500px;
right: 40px;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;}
Positon: fixed; - odpowiada, za unieruchomienie elementu na stronie względem okna przeglądarki.
Bottom: -500px; - jest to po prostu wysokość elementu na stronie. Jeśli jest ujemna, to logicznę, że wypchnie nam element poza okno przeglądarki.
Right: 40px; - Tu chodzi o położenie elementu względem boków monitora.
Z-index: 100; - służy do tego, aby daną rzecz wyciągnąć na wierzch strony.
Transition:all 1s; - i fragment kodu niżej odpowiadają za czas w jakim dany element ma poprócić na swoje miejsce.
Teraz zajmijmy się elementem po najechaniu na niego myszką.
#Text1:hover {Tutaj dodajemy ":hover", czyli nadajemy klasę po najechaniu. A zmienienie wartości w bottom powoduję jego zmianę. Cały myk polega na ustawieniu czasu, w której zały proces będzie zachodził. I proszę mamy ciekawy, ale bardzo prosty efekt, który może przyozdobić naszą stronę.
bottom: 0px;
right: 40px;
z-index: 100;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;}
Jeśli chcemy za to żeby element wyjeżdżał spod na przykład kolumny, ale nie jeździłza nami po stronie zmieniamy wyłącznie fixed na relative lub absolute. W ten sposób możemy "ukryć" tak na prawdę wszystko, przez pojedyncze elementy po całe kolumny.
Pozdrawiam, Raion
Dobra instrukcja. Skopiuję i powiem, ze to nasza :c
OdpowiedzUsuńHah :D Po co kopiować? Wrzuć ją do tych waszych "Zaczarowane coś tam" i walnij w podstronę. Będzie szybciej! :D I niedługo post z myślą o tobie. W sumie nawet dwa :D
UsuńPozdrawiam, Raion
Serio mogę? Jeszcze ktoś pomyśli, że naprawdę kradnę! :( A ja przecież tak dobrze się z tym kryje!
UsuńHm tak się zastanawiam co to za posty... na pewno to fajne menu w postach, ale co do drugiego, to nie mam pomysłu. Jakaś podpowiedz? ;)
Jasne, że możesz. Wystarczy, że wstawisz, to do kolumny do innych instrukcji i w podstronę. Dzięki temu moje instrukcje trafią do większej ilości ludzi. :D
UsuńTak, menu, w poście. I takie coś dł.... :D
...ugiego? Za mała podpowiedz. Dużo rzeczy takich jest :(
UsuńSpytam Avii, skoro dajesz nam swoje pozwolenie ;)
Wystarczy tych podpowiedzi :D
UsuńAvia, oby dobry człowiek xD
Kocham cię za to człowieku. Tyle czasu szukałam instrukcji na to i gdy straciłam nadzieję na jej odnalezienie, ty przychodzisz z pomocą :D
OdpowiedzUsuńDziękuję ^^
(miała ci też podziękować moja koleżanka, której dzięki temu naprawiłam szablon, ale znają ją mogę ci już teraz powiedzieć, że szybko to nie nastąpi :D )
hahahah :D Cieszę się, że instrukcja trafiona.
OdpowiedzUsuńWspaniały kod :) Dzięki za pomoc :) Mogę ?
OdpowiedzUsuńJeśli chcesz go użyć, to jasne. Po to jest!
UsuńJej, czytałam wiele instrukcji o wysuwanym menu (ogólnie o wysuwanych gadżetach), ale dopiero dzięki tej instrukcji to ogarnęłam (no dobra, skopiowałam i użyłam do szablonu, ale teraz mam jaśniej w głowie). Więc: wielkie dzięki! :)
OdpowiedzUsuńAch, no i monster *jeśli to się tego tyczy* :)
UsuńA ja będę beszczelna i ci nie podziękuję, bo mnie się to po prostu należy :P
OdpowiedzUsuń