Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [css] Jak wykonać taką animację, link podany ze wzorem i pomieszany trochę kod
shpaque
post 14.10.2014, 13:13:51
Post #1





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


Witam serdecznie, chciałbym zrobić taki efekt jak na stronie http://www.makemepulse.com/

chodzi o te 3 boxy na pochylonym tle - po najechaniu robi się animacja tła (podmienia z matrixem) - jak to zrobić? bo ja coś namieszałem - u mnie jest tak:

  1. #cell1
  2. {
  3. transform: matrix(1, 0, 0, 1, 0, 0);
  4. visibility: hidden;
  5. width: 240px;
  6. height: 250px;
  7. overflow: hidden;
  8. background-position: center;
  9. }
  10. #cell1:hover
  11. {
  12. transform: matrix(0.95, 0, 0, 0.95, 0, 0);
  13. visibility: inherit;
  14. opacity: 1.0;
  15. width: 240px;
  16. height: 250px;
  17. overflow: hidden;
  18. background-position: center;
  19.  
  20. -webkit-transform: matrix, 1000ms ease 0ms;
  21. -moz-transform: matrix, 1000ms ease 0ms;
  22. -ms-transform: matrix, 1000ms ease 0ms;
  23. transform: matrix, 1000ms ease 0ms;
  24. }


a później w komórce:

  1. <div id='cell1' style='width:240px;height:250px;overflow:hidden;'>
  2. <img src='./images/kredyty.jpg" class='out' style='width:260px;height:270px;transform:matrix(1, 0, 0, 1, 0, 0);opacity:1;'>
  3. <img src='./images/kredyty-hover.jpg" class='hover' style='width:260px;height:270px;transform:matrix(1, 0, 0, 1, 0, 0);visibility:hidden;opacity:0;'>
  4. </div>


@edit

generalnie chodzi mi o taką ładną, płynną animację, żeby podmieniły się dwa obrazki, pomniejszyły / powiększyły w cell'u tak jak tam i pojawił jakiś tekst...
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 2.05.2025 - 05:35