Aceasta tehnica Eu folosesc cu imagini în blog-ul lor. Atunci când utilizatorul se mută miniatura orice înregistrare crește lin. Sunt de acord, nu destul de rău și arată frumos.
Și acest lucru se face numai cu ajutorul CSS3, și destul de ușor. Acum, vă voi spune cum să o facă.
Cum funcționează puteți vedea în demo, și am un blog pe pagina principală.
În primul rând trebuie să ne pregătim elementele de limbaj HTML nu complicat pentru imaginile noastre, în acest caz, trebuie să fim 3.
Dupa cum se poate observa că toate imaginile au clasa de imagine la care noi, de fapt, va stabili parametrii.
Dar aspectul de stiluri:
Am creat o dimensiune a blocului implicit de 380 de 250 pixeli. Acest bloc trebuie să fie aceeași dimensiune ca imaginea (în acest caz, 380-250). Prin urmare, dacă aveți imaginea va fi mai mare sau mai mică, dimensiunea blocului .image face aceeași dimensiune ca și imaginea.
Și asigurați-vă că pentru a pune regula overflow: ascuns; Este necesar să se asigure că imaginea noastră nu a mers dincolo de domeniul de aplicare al blocului cu creșterea.
Acum cerut reguli pentru imaginile în sine:
Animația se face prin parametrul de tranziție și transforma în CSS3. Pe întreaga animație ne petrecem o secundă. Dacă doriți ca imaginea să crească rapid, să scadă această valoare.
In imagine, demo-ul este crescut de 1,1 ori. Dacă pui o valoare de 2, imaginea va fi dublată, și așa mai departe.
Asta e tot, oameni buni. Așa cum a promis, lecția este foarte simplu. Sper să vă placă acest efect simplu pentru imagini. Pe curând.