Како играти Анимирани ГИФ-ови онЦлицк

Анимирани ГИФ је популаран начин визуализације концепта дизајна (ево примјера како смо то учинили за ефекте пост текста створене помоћу ЦСС-а) или показати кратки видео клип. Али ако их има превише на истој страници, то ће одступати од вашег корисничког фокуса. За странице које приказују много ГИФ-ова, ово су лоше вијести.

Раствор: служе корисницима са статичном сликом и дозвољавају покретање анимираног ГИФ-а само када корисник кликне. У овом кратком туториалу ћемо вам показати како да урадите управо то.

• Виев Демо
• Довнлоад Соурце

Почетак

Почните са припремом фасцикли и датотека пројекта које укључују: ХТМЛ датотеку, јКуери, и на крају ЈаваСцрипт датотеку гдје ћемо написати наш код. Можете да повежете јКуери са ЦДН-ом или да преузмете копију и повежете је са директоријумом пројекта. Оставио бих стилове и ЦСС вашој машти. Најбитнији део је ХТМЛ маркуп:

Обратите пажњу на додатне дата-алт атрибут у имг елемент. Ово је место где чувамо ГИФ, уместо статичне слике коју у почетку служимо. Можете додати још слика и додати наслов за сваку од њих фигцаптион елемент.

Након тога, написаћемо ЈаваСцрипт који ће донети магију. Идеја је да служе ГИФ слици када корисник кликне на слику.

ЈаваСцрипт

Прво, креирамо функцију која ће дохватити ГИФ путању слике коју смо ставили у дата-алт аттрибуте. Прелазимо кроз сваку слику и користимо јКуери .дата () метод за то:

 вар гетГиф = фунцтион () вар гиф = []; $ ('имг'). (функција () вар дата = $ (тхис) .дата ('алт'); гиф.пусх (дата);); ретурн гиф;  вар гиф = гетГиф ();

Покренули смо функцију и сачували излаз у варијабли гиф, као горе. Тхе гиф променљива сад садржи путању ГИФ-а са слика на страници.

Имаге Пре-лоадинг

Сада имамо проблем са учитавањем: ГИФ још није учитан, постоји шанса да анимирани ГИФ неће играти одмах (будући да би претраживачу требало неколико секунди да у потпуности учита ГИФ). Ово кашњење би се осетило када би величина ГИФ слике била велика.

Морамо претходно учитати или учитати ГИФ-ове истовремено док се страница учитава.

 // Унапред учитајте све ГИФ. вар имаге = []; $ .еацх (гиф, фунцтион (индек) имаге [индек] = нев Имаге (); имаге [индек] .срц = гиф [индек];);

Сада, отворите ДевТоолс и идите према Мрежа (или Ресурси) таб. Приметићете да су ГИФ-ови већ учитани иако су сачувани у дата-алт аттрибуте. У наставку је наведен сав код који требате.

Последњи део кода је где ми све везујемо фигура елемент који облаже слику са клик догађај.

Код ће заменити извор слике између срц атрибут где се служи статична слика и дата-алт атрибут у којем почетно послужујемо ГИФ слику.

Код ће се такође вратити на статичну слику када корисник кликне други пут, “стоппинг” анимација.

 $ ('фигуре'). он ('клик', функција () вар $ тхис = $ (тхис), $ индек = $ тхис.индек (), $ имг = $ тхис.цхилдрен ('имг'), $ имгСрц = $ имг.аттр ('срц'), $ имгАлт = $ имг.аттр ('дата-алт'), $ имгЕкт = $ имгАлт.сплит ('.'); иф ($ имгЕкт [1] === 'гиф') $ имг.аттр ('срц', $ имг.дата ('алт')). аттр ('дата-алт', $ имгСрц); елсе $ имг.аттр ('срц', $ имгАлт) .аттр ('дата-алт', $ имг.дата ('алт')););

И то је то. Можете полирати страницу са стиловима, на пример, можете додати дугме за репродукцију које прекрива слику да би се означило да је “плаиабле” или анимирани ГИФ.

Погледајте демо и преузмите извор овде.

• Виев Демо
• Довнлоад Соурце