Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: płynna zmiana koloru tła DIV'a
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
michat34
witam w internecie było troche o tym, znaczy jest, ale wszystko wymaga instalowania jakichs dodatkowych pluginów etc. chciałbym uzyskac w mozliwie JAK NAJPROSTSZY SPOSOB taki efekt jak chociazby tu: http://pornel.net/ (w przyciskach O AUTORZE, KONTAKT itd.).
czy moglibyscie mi podac jakies sposoby na łatwe wykonanie takiego efektu?
nie wiem czy to mozliwe, ale myslalem nad zrobieniem czegos takiego ze dam obrazke na obrazku i do zdarzenia mouseover dodam efekt FadeOut ktory usuwałby ten drugi obrazek tworzac złudzenie przejscia.. dałoby tak rade?
Szymciosek
http://css3.bradshawenterprises.com/cfimg/

Coś takiego ?

Ogólnie szukaj np CSS OPACITY ANIMATION
zegarek84
Cytat(Szymciosek @ 10.10.2012, 22:41:39 ) *
Ogólnie szukaj np CSS OPACITY ANIMATION

miałem podać coś podobnego ;p - ale szukać ma pod hasłem CSS TRANSITION ;P

na mozilli jest krótki opis: https://developer.mozilla.org/en-US/docs/CS...CSS_transitions

jeśli masz bardziej skomplikowane buttony to w JS klonujesz ten drugi, pozycjonujesz na pierwszy lub pod pierwszy (zależy w którą stronę zrobisz ;p) i albo tego z góry z opacity 0 na 100 albo tego z góry z opacity na 0, jeśli będziesz miał ustawione w css transition to animacja sama się wykona i nie będziesz musiał niczym się przejmować... więc ogólnie przy bardziej skomplikowanych elementach gdzie element w elemencie możesz odpowiednio wypozycjonować i chyba fadeOut w jQ zmienia opacity ale w animacji - optymalniej będzie zmienić od razu a resztą niech się zajmie przeglądarka...

tu masz małą funkcję z LESS na każdą przeglądarkę która to może obsługiwać:
Kod
.transition (@trans: all 0.7s ease-in-out){
    -webkit-transition: @trans;
    -moz-transition: @trans;
    -o-transition: @trans;
    -ms-transition: @trans;        
    transition: @trans;
}

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.