ЦСС технике за ефекат валовања материјала

Водич за различите технике за ефекат рипплела користећи ЦСС и ЈаваСцрипт

Недавно сам морао да применим ефекат риппле-а од дизајна материјала у веб апликацију. А онда сам схватио да немам појма како се то проводи. То ме је одвело на пут да проучим постојеће имплементације, па чак и да смислим потпуно нову технику која би вам могла бити од користи.

Какав је то ефекат варалице?

Чекајте, не знате ефекат таласа из Гоогле-овог Материјалног дизајна? Колико година живите у пећини?

Ефекат валовитости користи се када притиснете дугме. Дјелује на исти начин и за интеракције миша или додира.

Позиција коју кликнете или додирнете дугме назива се тачком контакта. Одатле се пукотина шаље померајући се према ван, губећи непрозирност како расте како би напунила цело дугме. Тада потпуно нестаје.

Динамика овог ефекта валовања слична је мрешању које добијете када додирнете течну површину или кад бацате камен у језеро.

Обоје које ћете наћи на вебу

Након неколико истраживања, пронашао сам две главне технике које се користе за примену валовитих ефеката на веб апликацијама.

Коришћење :: после псеудо-елемента

Помоћу ове технике псеудо-елемент :: након дугмета је стилизован као полупрозирни круг и анимиран је да расте и бледи. Дугме на контејнеру мора бити преливено: скривено тако да се круг никада не прелива изван површине дугмета и положај: релативно да би било лакше позиционирати круг унутар дугмета. Више детаља о овој техници можете прочитати у овом чланку Ионут Цолцериу-а.

Једна од сјајних ствари у вези ове технике је да је то чисто ЦСС решење за ефекат рипплеа. Међутим, ефекат варалице увек почиње од средине дугмета, уместо тачке контакта. То није најприроднија повратна информација.

Могло би се побољшати коришћењем ЈаваСцрипта за чување тачке контакта и коришћењем њега за постављање таласа. То је управо оно што је материал.ио урадио за своју компоненту веб риппле-а. Користи ЦСС променљиве за складиштење тачке контакта, а :: након псеудо-елемента користи ове променљиве за позиционирање.

Коришћење подређених елемената

У основи, ова техника користи исту стратегију као и пре. Али уместо псеудо-елемента, додаје се распон елемента унутар дугмета, који се затим може поставити преко ЈаваСцрипт-а. Ову технику у овом чланку описује Јхеи Томпкинс.

Најједноставнија имплементација креира распон за сваки клик на дугме и користи положај миша на догађају клика да промени положај распона. ЦСС анимација омогућава да распон расте и бледи док не постане потпуно транспарентан. Можемо одлучити да уклонимо распон из ДОМ-а након што анимација заврши, или је оставимо тамо испод тепиха - нико заиста неће приметити да прозирни распон виси около.

Пронашао сам другу варијацију овога, на којој је дечији елемент свг уместо распона, а свг је анимиран преко ЈаваСцрипт-а. Деннис Гаебел објашњава ову варијацију, али у суштини изгледа да је иста и можда допушта употребу сложених СВГ облика и ефеката.

Проблем са слањем уноса

Обе технике описане горе изгледају сјајно. Али то се догађа када сам их покушао примијенити на улазне елементе са типе = субмит:

Зашто не раде?

Улазни елемент је замењени елемент. Укратко, то значи да са тим елементима можете учинити врло мало, у односу на ДОМ и ЦСС. Точније, не могу имати подређене елементе, нити псеудо-елементе. Сада је јасно зашто ове технике не успевају.

Дакле, ако користите Материјал Дизајн, боље је да се држите подаље од [инпут = субмит] и да се држите елемената дугмета. Или само наставите да читате.

Додавање таласа за слање улаза

На веб апликацији на којој сам радио већ смо имали доста дугмета за слање. Промјена свих њих да постану другачији елемент захтијева пуно рада и висок ризик од пробијања табела стилова и ЈаваСцрипт логике. Тако да сам морао смислити како да додам таласе постојећим дугметима за слање.

Коришћење амбалаже

Брзо сам схватио да могу да умотавам дугме за слање унутар елемента инлине блока и користим инлине-блоцк елемент као површину валовитости. Ево кратког приказа:

Иако ми се ово рјешење свиђа због његове једноставности, ипак је захтијевало од мене да промијеним ознаку на превише мјеста. И знао сам да ће то бити крхко решење - нови програмери ће ући у пројекат и креирати дугмад за слање без да их правилно замотају у површину. Тако да сам наставио тражити друга решења за која није била потребна промена ДОМ-а.

Радијални градијенти

Синтакса радијалног градијента омогућава ми да контролирам и средину и величину градијента. Наравно, такође ми омогућава контролу боје градијента, укључујући и полупрозирне боје. И никад не преплави елемент на који се односи. Чини се да већ ради све што ми треба!

Не тако брзо ... недостаје једна ствар: својство позадинске слике није анимирано. Нисам могао да направим градијент да расте и бледи до прозирног користећи ЦСС анимације. Успео сам да га повећам анимирајући својство величине позадине, али то је било све што сам могао да учиним.

Покушао сам са још неколико ствари, као што је стварање бледећег круга као анимиране слике (користећи апнг формат), и применио је као позадинску слику. Али тада нисам могао да контролишем када се петља за слике покренула и завршила.

Коначно, решење са ЈаваСцрипт-ом

Оно што не можете у ЦСС-у, то можете учинити и у ЈаваСцрипт-у. Након што сам потрошио више времена него што сам спреман да признам да покушавам да постигнем овај ефекат радећи помоћу ЦСС анимација, једноставно сам одустао и одлучио сам да напишем анимацију на ЈаваСцрипт-у.

Започео сам са горњим решењем радијалног градијента и користио прозор.рекуестАниматионФраме да направим флуидну анимацију радијалног градијента, расте и бледи. Ево мог коначног решења:

Закључак

Дакле, могуће је имати ријалити ефекте на дугмиће за слање, само не само са ЦСС-ом.

Нисам могао да нађем ову технику документовану нигде на вебу, па је називам својом. Леонардова ријалити техника не захтева измене у ДОМ-у и ради за било који елемент јер се не ослања на псеудо-елементе или подређене елементе. Међутим, то није беспрекорно решење.

Прво, ту су перформансе. Анимацијом градијента са ЈаваСцрипт-ом губите доста оптимизација прегледача. Али, будући да се једино својство које се мења јесте позадинска слика, сумњао бих да се прегледачи не би морали поново надопуњавати, већ би само захтевали поновну примену стилова и преобликовање елемента. У пракси се управо то догађа и перформансе су заиста добре. Изузетак од те изјаве је Фирефок Мобиле, који из неког разлога не иде у корак са анимацијом. (уреди: анимација је углађена на модерним Фирефок Мобиле верзијама)

Друго, техника користи својство позадинске слике дугмета. Ако ваш дизајн захтева да на вашим тастерима буде примењена слика на позадини, ефекат ријалитија би то надјачао. Ако вам је та слика заиста потребна на вашем дизајну, онда би ЈаваСцрипт могао бити модификован да би нацртао радијални градијент на врху постојеће позадинске слике.

Треће, изгледа да то не функционише у програму Интернет Екплорер. Међутим, не видим ниједан разлог зашто то не би требало да ради са ИЕ10 и новијим верзијама. Можда је то зато што ИЕ користи другачију синтаксу за радијални-градијент. Али, кога брига за ИЕ данас? (уреди: ова метода функционише без проблема у Интернет Екплорер-у 11)