CSS3 એનિમેશનનો સારો ઉપયોગ કેવી રીતે કરવો: ટ્યુટોરીયલ, નમૂના કોડ્સ અને ઉદાહરણો

લેખ દ્વારા લખાયેલ:
  • વેબસાઇટ ડિઝાઇન
  • સુધારાશે: ઑગસ્ટ 28, 2013

જ્યારે અમે જેએસ અને jQuery નો ઉપયોગ કરીએ છીએ ત્યારે એનિમેશન પર અમારું સંપૂર્ણ નિયંત્રણ છે અને અમે કેટલીક અદ્ભુત અસરો બનાવી શકીએ છીએ, પરંતુ કિંમત ખૂબ ઊંચી છે. પ્રોસેસિંગ સમય, ક્રોસ-બ્રાઉઝર સુસંગતતા (ઉદાહરણ તરીકે, મોબાઇલ ડિવાઇસ, જેએસ માટે આવે છે ત્યારે તે તદ્દન અલગ હોય છે) અને કોડ જટિલતા એ પોઇન્ટ્સ છે જે એનિમેટેડ ઇન્ટરફેસો બનાવતી વખતે ધ્યાનમાં રાખવી જોઈએ.

તેથી, આજે આપણે જોશું કે CSS એનિમેશન અને ટ્રાંઝિશનનો ઉપયોગ કરીને જેએસ ટાળવું. અમે એકોર્ડિયન પેનલ્સ અને એનિમેટેડ ઉપ-મેનુઓ જેવા કેટલાક અદ્ભુત પગલાઓથી કેટલાક અદ્ભુત પ્રભાવો પર ચર્ચા કરીશું.

સીટ, તમે નોટપેડ અને એક વાસ્તવિક બ્રાઉઝર (IE સિવાય કંઈપણ) પકડી લો અને ચાલો પ્રારંભ કરીએ.

વૉર્મિંગ અપ

CSS એનિમેશનનો ઉપયોગ કરીને અમારી પાસે કેટલાક ફાયદા છે (અને અમારા જીવનમાંના બધા ફાયદા). જો તમારે તે તમારા બોસ અથવા ક્લાયન્ટને વેચવાની જરૂર હોય, તો તમારે આ ધ્યાનમાં રાખવું જોઈએ:

  • તેઓ સંભવિતપણે ઝડપી છે, કારણ કે તેઓ હાર્ડવેર પ્રવેગકનો ઉપયોગ કરી શકે છે (HTML5 અમલીકરણો તરીકે)
  • તેઓ મોબાઇલ ઉપકરણોમાં બહેતર પ્રદર્શન કરશે અને ટચ ઇવેન્ટ્સને ટ્રૅક કરવા માટે ચોક્કસ કોડની જરૂર પડશે નહીં
  • જેએસને બ્રાઉઝર દ્વારા અર્થઘટન કરવાની જરૂર છે અને બ્રાઉઝરને તોડવાની શક્યતાઓ ઘણી મોટી છે. તેથી જ્યારે CSS નિષ્ફળ જાય છે, ત્યારે તે ચૂપચાપમાં નિષ્ફળ જાય છે જ્યારે JS સંપૂર્ણ પૃષ્ઠને તોડી શકે છે
  • તેમની પાસે એકદમ સારો બ્રાઉઝર સપોર્ટ છે (આ સાઇટ તમને વિશિષ્ટ આંકડાને ચકાસવામાં સહાય કરશે: http://caniuse.com/#search )

CSS3 એનિમેશનનાં ઉદાહરણો

અમે આ પોસ્ટના માંસ પર પ્રારંભ કરતા પહેલા, ચાલો શુદ્ધ સીએસએસમાં બનેલા કેટલાક સુંદર એનિમેશન જોઈએ.

શુદ્ધ સીએસએસ ટ્વિટર નિષ્ફળ વ્હેલ

એનિમેટેડ નિષ્ફળ વ્હેલ

સ્ટીવન ડેનિસ દ્વારા બનાવવામાં, ક્રિયામાં આ જુઓ.

શુદ્ધ સીએસએસ સ્ક્રોલિંગ કોક કરી શકો છો
CSS 3 એનિમેશન ઉદાહરણો: સ્ક્રોલિંગ કોક કેન

રોમન કોર્ટેસ દ્વારા બનાવવામાં, ક્રિયામાં આ જુઓ.

શુદ્ધ સીએસએસ વૉકિંગ મેન

CSS 3 એનિમેશન ઉદાહરણો: વૉકિંગ મેન

એન્ડ્રુ હોઅર દ્વારા બનાવવામાં, ક્રિયામાં આ જુઓ.

તમારા હાથ ડર્ટી મેળવો

ચાલો કોડ શરૂ કરીએ. એનિમેશનને ટ્રિગર કરવા માટે અમે CSS સ્યુડો વર્ગોનો ઘણો ઉપયોગ કરીશું. પ્રમાણિક બનવા માટે, ઘણા વિકાસકર્તાઓ તમને જેએસનો ઉપયોગ એનિમેશનને સક્રિય અને નિષ્ક્રિય કરવા માટે ભલામણ કરે છે, પરંતુ અહીં અમે સરળ રસ્તો જોઈશું:

# ટેસ્ટ {પૃષ્ઠભૂમિ: લાલ; } # ટેસ્ટ: હોવર {પૃષ્ઠભૂમિ: લીલો; } # ટેસ્ટ: સક્રિય {પૃષ્ઠભૂમિ: વાદળી; } # ટાઇટ: લક્ષ્ય {પૃષ્ઠભૂમિ: કાળો; }

અમારી પાસે અન્ય કેટલાક સ્યુડો-ક્લાસનો ઉપયોગ કરવા માટે છે, પરંતુ તમને આ વિચાર મળ્યો છે! તો અહીં શું થાય છે જો તમે # ટેસ્ટ ઘટકને ક્લિક કરો (તે એક લિંક છે એમ માનવું):

  • સામાન્ય સ્થિતિ: પૃષ્ઠભૂમિ લાલ હશે
  • હૉવર: જ્યારે માઉસ તત્વ ક્ષેત્રમાં પ્રવેશ કરશે ત્યારે તેની પાસે ગ્રીન પૃષ્ઠભૂમિ હશે
  • સક્રિય: જ્યારે તમે તેના પર કર્સરને ક્લિક કરો છો અને જ્યારે માઉસ બટન દબાવવામાં આવે છે ત્યારે પૃષ્ઠભૂમિ રંગ વાદળી હશે
  • લક્ષ્યાંક: જ્યારે વર્તમાન પૃષ્ઠમાં URL માં #test હોય ત્યારે આ ઘટક કાળો હશે

આમાંના દરેકનો ઉપયોગ CSS એનિમેશન માટે થઈ શકે છે, ઉદાહરણ તરીકે તમે આ કોડ સાથે લક્ષ્ય સ્યુડો ઘટકનો ઉપયોગ કરવા માટે CSS એનિમેશનને સક્રિય અને નિષ્ક્રિય કરવા માટે 2 લિંક્સ બનાવી શકો છો:

<a href='#test'> સક્રિય </a> <a href='#'> નિષ્ક્રિય કરો </a>

સીએસએસ સંક્રમણો

CSS સંક્રમણ પ્રારંભિકથી અંત સુધી રાજ્યમાં સરળતાથી બદલાશે. તેથી તમે "ટ્રાંઝિશન" પ્રોપર્ટીનો ઉપયોગ કરીને મુખ્ય પસંદગીકારમાં સમય અને પ્રત્યેક પ્રોપર્ટીને પ્રભાવિત કરશો અને એનિમેશન કેવી રીતે હોવું જોઈએ તે વિશે વ્યાખ્યાયિત કરશો. ચાલો એક ઉદાહરણ જોઈએ.

.test {/ * સંક્રમણ-મિલકત અવધિ સમય-ફંક્શન, * / રંગ: વાદળી; સંક્રમણ: રંગ 2, ફૉન્ટ-કદ 2 સરળતા-આઉટ; } .ટેસ્ટ: હોવર {રંગ: લાલ; } .test: સક્રિય {ફોન્ટ કદ: 200%; }

જ્યારે તમે .test ઘટકને હોવર કરો છો ત્યારે તે ધીમે ધીમે રંગને વાદળીથી લાલ રંગમાં બદલશે (શું સરસ પેલેટ, હહ?). જ્યારે તમે તત્વ પર ક્લિક કરો છો, ત્યારે ફોન્ટ કદ ધીમે ધીમે ડિફોલ્ટ ફોન્ટ કદના 200% સુધી વધશે.

અમારી પાસે "ટ્રાંઝિશન ટાઇમિંગ" પ્રોપર્ટી પણ છે, જે સરળતા તરીકે સેટ છે, કે કેવી રીતે એનિમેશન માટે "સમય" ઉપલબ્ધ થશે. અહીં શક્ય કિંમતો છે:

  • લીનિયર: શરૂઆતથી અંત સુધી જ ગતિ
  • સરળતા: ધીમું પ્રારંભ
  • સરળતા: ધીમું અંત
  • સરળતા: ધીમી શરૂઆત, મધ્યમાં ઝડપી, પછી ધીમું અંત
  • ઇન-ઇન-આઉટ: ધીમું પ્રારંભ, ધીમું અંત
  • ઘન-બેઝિયર (એ, બી, સી, ડી): કસ્ટમ ઝડપ

ક્યુબિક બેઝિયર ફંક્શન 4 નંબર્સ સાથે કસ્ટમ ઍનિમેશન બનાવશે જે 0 થી 1 સુધી બદલાય છે, જે એનિમેશન સ્પીડ X અવધિ માટેના ગાણિતિક વળાંકને રજૂ કરે છે.

બહેતર બ્રાઉઝર સુસંગતતા માટે તમારે ઑપેરા, ફાયરફોક્સ અને વેબકિટ માટે વિક્રેતા ઉપસર્ગોનો ઉપયોગ આના જેવી ધ્યાનમાં લેવા જોઈએ:

DIV {પહોળાઈ: 400PX; -ઓ-સંક્રમણ: પહોળાઈ 2s; -મોઝ-સંક્રમણ: પહોળાઈ 2s; -વેબિટ-સંક્રમણ: પહોળાઈ 2; સંક્રમણ: પહોળાઈ 2s; }

ઉપરાંત, તમે બ્રાઉઝર પહોળાઈ (મોબાઇલ ઉપકરણો, ટેબ્લેટ્સ) ના આધારે વિવિધ સંક્રમણોને વ્યાખ્યાયિત કરવા માટે મીડિયા ક્વેરીઝનો ઉપયોગ કરી શકો છો. આ એક સરળ ઉદાહરણ છે:

શરીર {ફોન્ટ કદ: 1em; } @ મિડિયા સ્ક્રીન અને (મહત્તમ-પહોળાઈ: 800PX) {બોડી {ફૉન્ટ-કદ: 0.8em; }} @ મિડિયા સ્ક્રીન અને (મહત્તમ-પહોળાઈ: 400PX) {શરીર {ફૉન્ટ-કદ: 0.7em; }}

જ્યારે તમે બ્રાઉઝર પહોળાઈને વધારો છો ત્યારે અહીં ફોન્ટ કદ અચાનક બદલાઈ જશે. આ કોડ તે થતાં અટકાવશે, વધુ સરળ સંક્રમણ આપી રહ્યું છે:

શરીર {-એ-સંક્રમણ: ફોન્ટ કદ .5s રેખીય; -મોઝ-સંક્રમણ: ફોન્ટ કદ .5s રેખીય; -વેબિટ-સંક્રમણ: ફોન્ટ કદ .5s રેખીય; સંક્રમણ: ફોન્ટ કદ .5s રેખીય; }

જો તમે પહોળાઈ, રંગ, ગાદી, મેનુ પ્રદર્શન બદલવા માંગતા હો, તો તમે આનો ઉપયોગ પણ કરી શકો છો જો તમારી પાસે પોર્ટ્રેટ / લેન્ડસ્કેપ માટે જુદા જુદા ડિસ્પ્લે અથવા કદ હોય.

સીએસએસ એનિમેશન - ધ રીઅલ ફન પ્રારંભ થાય છે

એનિમેશન સિંગલ સિલેક્ટરમાં વ્યાખ્યાયિત સંક્રમણોનો ક્રમ છે. CSS એનિમેશનને વ્યાખ્યાયિત કરવા માટે તમારે 2 પગલાંને અનુસરવાની જરૂર પડશે.

@ કીફ્રેમ નિયમનો ઉપયોગ એનિમેશન પગલાંઓની શ્રેણીને વ્યાખ્યાયિત કરવા માટે થાય છે, અને તે એક અનન્ય નામ અને શૈલીઓ દ્વારા વ્યાખ્યાયિત કરવામાં આવ્યું છે જે આ એનિમેશન કેવી રીતે કાર્ય કરે છે તેનું વર્ણન કરે છે. હંમેશની જેમ અમને આ વિક્રેતા ઉપસર્ગોની જરૂર પડશે, જેમ કે:

/ * દરેક વિક્રેતા માટે સમાન કોડ * / @ -o-keyframe મારી-એનિમેશન {... @ -moz-keyframe મારી-એનિમેશન {... @ -webkit-keyframe મારી-એનિમેશન {... / * એનિમેશન નામ * / @ કીફ્રેમ મારા-એનિમેશન {/ * ફ્રેમ પસંદગીકાર * / 0% {/ * ફ્રેમ શૈલી * / ડાબે: 0PX; ટોચ: 0PX; } 25% {ડાબે: 200PX; ટોચ: 0PX; } 50% {ડાબે: 200PX; ટોચ: 200PX; } 75% {ડાબે: 0PX; ટોચ: 200PX; } 100% {ડાબે: 0PX; ટોચ: 0PX; }}

તેથી, દરેક શૈલીને ફ્રેમ / ટાઇમફ્રેમ (ફ્લેશ એનિમેશનમાંથી તે ફ્રેમ્સ જેવી) દ્વારા ટકાવારી અને શૈલીઓ કે જે ત્યાં લાગુ થવી જોઈએ તે રીતે વ્યાખ્યાયિત કરવામાં આવી છે. આ કીફ્રેમ, ઉદાહરણ તરીકે, કહે છે કે તત્વ ડાબી તરફ, પછી ઉપર, પછી જમણે, પછી નીચે જશે.

તમે 1 પગલાને અનુસર્યા પછી અને તમારું કીફ્રેમ બનાવ્યું પછી તમે ખરેખર તેને તત્વ પર લાગુ કરી શકો છો. પછી આપણે ખૂબ જ સમાન તર્કનો ઉપયોગ કરીશું જેમ આપણે CSS સંક્રમણ સાથે કર્યું છે, તે તફાવત એ છે કે હવે અમારું "સંક્રમણ" એ ખૂબ જટિલ એનિમેશન છે.

તેને લાગુ કરવા માટે અમે એનિમેશન પ્રોપર્ટીનો ઉપયોગ કરીશું અને તેમાં 7 સબ-પ્રોપર્ટીઝ હશે:

  • નામ: તે અનન્ય ઓળખકર્તા
  • અવધિ: 0% થી 100% સુધી તે કેટલો સમય લેશે
  • સમય-કાર્ય: સંક્રમણ સમય ફંક્શન જેટલું જ
  • વિલંબ: 0% પ્રારંભ કરવા માટે કેટલો સમય લાગશે
  • ઉલ્લાસ-ગણતરી: અમારી પાસે કેટલી પુનરાવર્તન હશે (અનંત લૂપ માટે "અનંત")
  • દિશા: સામાન્ય અથવા વૈકલ્પિક (રિવર્સ)
  • પ્લે-સ્ટેટ: જો એનિમેશન ચાલી રહ્યું છે અથવા થોભાવ્યું છે

આ અમારા એનિમેશનને #test ઘટક પર લાગુ કરશે જ્યારે તે પૃષ્ઠનું લક્ષ્ય હશે:

#test: લક્ષ્ય {/ * એનિમેશન-નામ | અવધિ | સમય-કાર્ય | વિલંબ | પુનરાવર્તન-ગણતરી | દિશા | પ્લે-સ્ટેટ * / એનિમેશન: મારી-એનિમેશન 10s રેખીય 0 અનંત સામાન્ય ચાલી રહ્યું છે; }

આ ધ્યાનમાં રાખીને આપણે કેટલાક અદ્ભુત ઉદાહરણો બનાવી શકીએ છીએ.

ફક્ત સીએસએસ એકોર્ડિયન

અમે CSS એનિમેશનનો ઉપયોગ કરીને સંકેલી શકાય તેવા પેનલ્સ બનાવીશું. અહીં મૂળભૂત HTML માળખું છે:

<div class = "accordion"> <a href="#tab1"> ટૅબ 1 </a> <div id = "tab1"> <p> ટેક્સ્ટ 1 </ p> </ div> <a href = "# tab2 "> ટૅબ 2 </a> <div id =" tab2 "> <p> ટેક્સ્ટ 2 </ p> </ div> <a href="#tab3"> ટૅબ 3 </a> <div id =" tab3 "> <p> ટેક્સ્ટ 3 </ p> </ div> </ div>

આ ફક્ત પેનલ્સ અને લિંક બનાવશે જે તેમાંથી દરેકને ટ્રિગર કરશે. અને અહીં તે છે જ્યાં જાદુ થાય છે:

/ * એકોર્ડિયન * / .accordion div {/ * ની અંદરના કોઈપણ ભાગને ડિફૉલ્ટ રૂપે છુપાવેલ છે * / ઊંચાઈ: 0; ઓવરફ્લો: છુપાયેલ; / * કાળો જાદુ * / સંક્રમણ: ઊંચાઈ 1s; } / * જ્યારે ઉલ્લેખિત વિભાગ એ લક્ષ્ય * / .accordion div છે: લક્ષ્ય {/ * ઊંચાઈ: ઓટો કાર્ય કરશે નહીં, પરંતુ આ સારું કાર્ય કરશે * / ઊંચાઈ: 80px; }

ખૂબ સરળ, હૂ? અને તમે આખું જીવન આ માટે JS નો ઉપયોગ કરીને વિતાવ્યા છે? :)

સબમેનસ સાથે માત્ર સીએસએસ સીએસએસ

અને આ એક વધુ સરળ એપ્લિકેશન છે. તમારી પાસે ચોક્કસપણે તમારી સાઇટમાં નેવિગેશન મેનૂ છે, અને ઘણી વખત ત્યાં અમને કેટલાક સબમેનસનો ઉપયોગ કરવાની જરૂર છે. વસ્તુઓ બતાવવા અને છુપાવી આપવાનો શ્રેષ્ઠ રસ્તો jQuery નો ઉપયોગ કરી રહ્યું છે, બરાબર ને? સારું, તમે આ કોડની ચકાસણી કર્યા પછી ફરી વિચારો:

<nav> <ul> <li> <a href='#item1'> આઇટમ 1 </a> <div> <ul> <li> <a href='#item11'> આઇટમ 1.1 </a> </ li> <li> <a href='#item12'> વસ્તુ 1.2 </a> </ li> </ ul> </ div> </ li> <li> <a href='#item2'> આઇટમ 2 </a> <div> <ul> <li> <a href='#item21'> આઇટમ 2.1 </a> </ li> <li> <a href='#item22'> આઇટમ 2.2 </a> </ li> </ ul> </ div> </ li> </ ul> </ nav>

અને જાદુગરીની શરૂઆત અહીંથી થાય છે:

એક {/ * ફક્ત કડીઓને વધુ સારું બનાવવું * / પ્રદર્શન: બ્લોક; ગાદી: 4px; } એનએવી {ટેક્સ્ટ-એલાઇન: કેન્દ્ર; } / * કોઈપણ મેનૂ (મુખ્ય એક સહિત) * / એનએવી ઉલ {પ્રદર્શન: ઇનલાઇન-બ્લોક; સૂચિ-શૈલી: કંઈ નહીં; } એનએવી> ઉલ> li {/ * આડું વસ્તુઓ (વર્ટિકલ પણ સારું કામ કરશે) * / ફ્લોટ: ડાબે; } નેવિ li div {/ * કોઈપણ પેટા-મેનૂ * / ઊંચાઇ પતન: 0; ઓવરફ્લો: છુપાયેલ; / * હોઉદિની લાગણીઓ * / સંક્રમણ: ઊંચાઈ 1s; } નેવી લી: હોવર> div {height: 56px; }

ઉપર સમિંગ

આ ચોક્કસપણે માત્ર પ્રારંભિક માર્ગદર્શિકા છે. ત્યાં ઘણી વધુ ઠંડી અસરો છે જે ફક્ત સીએસએસ એનિમેશનનો ઉપયોગ કરીને કરી શકાય છે અને ઘણી બધી વસ્તુઓ આવવાની બાકી છે.

તેથી, તમે આ પહેલા ઉપયોગ કર્યો છે? શું તમે CSS એનિમેશન માટે બીજી સારી એપ્લિકેશન વિશે વિચારી શકો છો? ટિપ્પણીઓનો ઉપયોગ કરીને તમારા વિચારો શેર કરો!

રોચેસ્ટર ઓલિવિરા વિશે

હું ઇટાજુબા (એમજી), બ્રાઝિલથી વેબ ડિઝાઇનર અને ઉદ્યોગસાહસિક છું. હું અસ્પષ્ટ મુદ્દાઓ વિશે લખવા અને કેટલીક સરસ સામગ્રી કરવા વિશે લખું છું.

જોડાવા:

n »¯