GoldenLine
Zaloguj się
Michał Wójcik

Michał Wójcik Front End Developer
- Freelancer

Temat: Animacja lśnienia boxu

Witam,

potrzebuje zrobic animacje lśnienia boxu (np złotego medalu, który lśni). Problem jest taki, że rozwiazązanie, które szukam musi pobierać minimalny zasób transferu i wydajności strony.

Powiedzmy, że mam na stronie liste osób (30 osób) i każdy z nich dostanie medal(div) który ma zawartość. I poprostu chce za pomocą css/jquery stworzyć animacje, która dodaje efektu i smaczku temu medalowi.

Znacie jakie rozwiązania? Co polecicie?
Link do wypowiedziLink
Sławomir Jach

Sławomir Jach Programista,
DreamLab

Temat: Animacja lśnienia boxu

Jeżeli bardzo zależy Ci wydajności rozwiązania, to najprościej jest użyć małego gifa.
Link do wypowiedziLink
Michał Wójcik

Michał Wójcik Front End Developer
- Freelancer

Temat: Animacja lśnienia boxu

Też o tym myślałem, ale gif odpada. Chciałem użyć tego efektu aby przechodził przez całego diva<na którym sa nagłówki, tekst itd>>

Jakieś inne pomysły?
Link do wypowiedziLink
Jerzy M.

Jerzy M. C#/JavaScript
Developer

Temat: Animacja lśnienia boxu

nigdy nie robiłem czegoś takiego, ale taki pomysł na szybko, który jednak będzie wymagał trochę zabawy z photoshopem czy innym gimpem :-)

nałożyć na siebie dwa divy, ten pod spodem niech będzie zawierał to co chcesz, ten nad niech ma background z 'lśnieniem' (alpha i te sprawy) i w skrypcie przesuwać tło w prawo.

Szczerze, to trochę zabawy z tym będzie i nie wiem jak będzie się to zachowywało w stosunku do innych elementów - bo samo nakładanie to jest zabawa z position:absolute,fixed czy czymś w ten deseń.

Oczywiście można poszukać strony która robi coś podobnego, chociaż większość pewnie jedzie na gifach i odpuszcza sobie lśnienie na tekstach - albo przygotuje gifa z tekstem.
Link do wypowiedziLink

konto usunięte

Temat: Animacja lśnienia boxu

Tu gość animuje box-shadow: http://tympanus.net/Tutorials/3DShadingWithBoxShadows/

Możesz też animować gradient lub zwykły background-image na pseudoelemencie przykrywającym Twojego diva (nowe wersje popularnych przeglądarek pozwalają już animować właściwości CSS pseudoelementów).
Link do wypowiedziLink
Michał Wójcik

Michał Wójcik Front End Developer
- Freelancer

Temat: Animacja lśnienia boxu

super link i pomysl -> chyba sie na niego zdecyduje -> wielkie dzieki.

jakies jeszcze inne pomysly?
Link do wypowiedziLink
Krzysztof Michalak

Krzysztof Michalak Front-end / Drupal

Temat: Animacja lśnienia boxu

http://jsfiddle.net/simurai/CGmCe/

taki sam efekt osiągniesz bez użycia keyframes.

Wystarczy js-em przesuwać obrazek w tle lub ukryty w divie który pełni funkcje maski. Animację tworzysz w dowolnym programie i później eksportujesz jako sekwencja obrazków lub atlas klatek. Najprościej to zrobić we Flash bo daje łatwość tworzenia animacji i narzędzia do eksportu.
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

jQuery - animacja




Wyślij zaproszenie do
Anuluj