સ્ત્રોત: ઓનલાઈન પ્રોગ્રામ
ત્યાં ઘણા પ્રોગ્રામ્સ છે જ્યાં તમે સંપાદિત કરી શકો છો, મોન્ટેજ બનાવી શકો છો અથવા બનાવી શકો છો એનિમેશન, દર વખતે ત્યાં ઘણા સોફ્ટવેર છે જે આ પ્રકારના ઇન્ટરેક્ટિવ પ્રોજેક્ટ્સ ઉમેરે છે. આ પોસ્ટમાં અમે તમને માત્ર એનિમેશનની દુનિયા સાથે પરિચય કરાવવાના નથી, પરંતુ અમે તમને એક નવા મિત્ર સાથે પણ પરિચય કરાવવા જઈ રહ્યા છીએ.
જેમ તમે સારી રીતે જાણો છો, કમ્પ્યુટર વિશ્વ વેબ પૃષ્ઠો અથવા ઑનલાઇન મીડિયાના વિકાસ માટે આદેશો અને ઉપયોગી સાધનોથી ભરેલું છે, જે હાલમાં સહઅસ્તિત્વ ધરાવે છે. અમારી સાથે રહો અને આ નવા ટ્યુટોરીયલમાં કોમ્પ્યુટીંગ અને ઇન્ટરેક્ટીવીટી સાથે તમારું સ્તર વધારવાની બીજી રીત શોધો.
એનિમેશન શું છે?
સ્ત્રોત: બધા રમનારાઓ
અમે ઇચ્છીએ છીએ કે તમે ટ્યુટોરીયલમાં સંપૂર્ણ રીતે પ્રવેશ કરો, પરંતુ આ માટે, એનિમેશનની દુનિયામાં અથવા ગ્રાફિક ડિઝાઇનની દુનિયામાં પ્રવેશ કરવો જરૂરી છે. ઇન્ટરેક્ટિવ ડિઝાઇન.
એનિમેશન પણ ઑડિયોવિઝ્યુઅલ વિશ્વનો એક ભાગ છે, વાસ્તવમાં તેઓ કંઈ જ નહીં હોય અથવા કારણ કે તેમાં ઑડિયો અને મૂવિંગ ઇમેજ રજૂ કરવામાં આવે. આ કારણોસર, જ્યારે આપણે "એનિમેશન" ની વાત કરીએ છીએ, ત્યારે આપણે "કાર્ટૂન" તરીકે પ્રખ્યાત છે તેનો ઉલ્લેખ કરીએ છીએ.
ઉપર સારાંશ આપ્યા મુજબ, એનિમેશન કંઈકને હલનચલન આપવાની ક્ષમતામાંથી ઉદ્ભવે છે, આ કિસ્સામાં કાર્ટૂન. પરંતુ આ બધી હિલચાલ કેવી રીતે પ્રાપ્ત થાય છે? સારું, કોઈ શંકા વિના, તે આપણે જેને કહીએ છીએ તેમાંથી ઉદ્ભવે છે, રેખાંકનો અથવા ફોટોગ્રાફ્સનો ક્રમ કે એક પછી એક સળંગ આદેશ આપીને, તેઓ આપણી નજર સમક્ષ એક વિશ્વસનીય ચળવળ પેદા કરવાનું મેનેજ કરે છે, જે પોતાની જાતને ઉછીના આપે છે અને દ્રશ્ય ભ્રમની રમતમાં પ્રવેશ કરે છે.
અગાઉ, પ્રથમ એનિમેશન કાગળની શીટ્સ પર ડિઝાઇન કરવામાં આવ્યાં હતાં, તેમાંના દરેકમાં, એનિમેટેડ પાત્રને પગલાઓ સાથે દોરવામાં આવતું હતું, અને એકવાર શીટના અંત સુધી પહોંચ્યા પછી, તે ગતિની અસર પ્રાપ્ત કરવા માટે એક પછી એક ઝડપથી પસાર કરવામાં આવી હતી. ચિત્ર.
એનિમેશન પ્રકારો
એનિમેશનના વિવિધ પ્રકારો છે:
કાર્ટૂન અથવા પરંપરાગત એનિમેશન
આ શૈલીમાં આગેવાન ફ્રેમને ફ્રેમ દ્વારા ચળવળ આપવાનો સમાવેશ થાય છે. શરૂઆતમાં, જ્યારે પર્યાપ્ત ઑડિયોવિઝ્યુઅલ માધ્યમો નહોતા, ત્યારે તે દરેક ફ્રેમના ચિત્રકામ અને પેઇન્ટિંગ દ્વારા હાથ ધરવામાં આવ્યા હતા (એનિમેશનની પૃષ્ઠભૂમિ, સ્ટેજ અથવા પૃષ્ઠભૂમિ સહિત), પછીથી ફિલ્મ ટેપ તરીકે આપણે જાણીએ છીએ તેના પર ફિલ્માંકન કરવા માટે.
ગતિ બંધ
સ્ટોપ મોશન એક એનિમેશન તકનીક છે જેને કાર્ટૂન સાથે કોઈ લેવાદેવા નથી. તદુપરાંત, તેનો મુખ્ય ઉદ્દેશ્ય વસ્તુઓની હલનચલનનું અનુકરણ કરવાનો છે જે વાસ્તવમાં તદ્દન સ્થિર હોય છે અને તેને બે તબક્કામાં વિભાજિત કરવામાં આવે છે: માટીનું એનિમેશન અથવા ક્લેમોશન અને કઠોર પદાર્થોનું એનિમેશન.
પિક્સેલેશન
પિક્સેલેશન એ એક તકનીક છે જે સ્ટોપ મોશનમાંથી આવે છે અને તેમાં એવી વસ્તુઓ સાથે કામ કરવાનો સમાવેશ થાય છે જે ન તો ઢીંગલી છે કે ન તો મોડેલ, પરંતુ સામાન્ય વસ્તુઓ અથવા લોકો. ઑબ્જેક્ટ્સ ઘણી વખત ફોટોગ્રાફ કરવામાં આવે છે અને દરેક ફ્રેમ સાથે સહેજ શિફ્ટ થાય છે.
રોટોસ્કોપી
તેમાં અન્ય ડ્રોઇંગનું સીધું ચિત્ર શામેલ છે, જેમ કે અન્ય ડ્રોઇંગ પર અથવા વાસ્તવિક વ્યક્તિના ચિત્રનું ટ્રેસીંગ. તેને મોકૅપનો પુરોગામી ગણવામાં આવે છે, એટલે કે મોશન કેપ્ચર જેનો ઉપયોગ સિનેમાની દુનિયામાં ડિજિટલ પાત્રોને ફરીથી બનાવવા માટે થાય છે.
કટઆઉટ્સ દ્વારા એનિમેશન અથવા કટ આઉટ એનિમેશન
તે એક તકનીક છે જેમાં કટીંગ આકૃતિઓનો સમાવેશ થાય છે, આ આંકડાઓ કાગળ પર અથવા ફોટોગ્રાફ્સમાં રજૂ કરી શકાય છે. પાત્રોની બોડી કટઆઉટના આધારે બનાવવામાં આવી છે અને ચળવળ અને એનિમેશન કથિત કટઆઉટના રિપ્લેસમેન્ટથી ઉદ્ભવે છે.
3ડી એનિમેશન
3D એનિમેશન એડિટર પ્રોગ્રામમાંથી ઉદ્દભવે છે, જે સિમ્યુલેશન અને એનિમેશનને હાથ ધરવા દે છે. આ બે વેરિઅન્ટમાં સારી લાઇટિંગ, કેમેરા મૂવમેન્ટ અને સ્પેશિયલ ઇફેક્ટ્સ સંપર્કમાં આવે છે.
હાલમાં અન્ય તકનીકો પણ છે જેમ કે: કાચ પરનું ચિત્ર, રેતીનું એનિમેશન, ગુજાની સ્ક્રીન અને સેલ્યુલોઇડ પરનું ચિત્ર.
CSS શું છે?
સ્ત્રોત: વેબ ડિઝાઇન રોઝારિયો સેશન સ્ટુડિયો
હવે જ્યારે તમે એનિમેશનની દુનિયા વિશે થોડું વધુ જાણો છો, ત્યારે હવે અમે તમને CSS સંક્ષિપ્ત શબ્દોની દુનિયા સાથે પરિચય કરાવવાનો સમય છે.
એક્રોનિયમ સીએસએસ, "કાસ્કેડીંગ સ્ટાઇલ શીટ્સ" નો સંદર્ભ લો. તે એક એવી ભાષાથી બનેલી છે જેનો ઉપયોગ ડિઝાઇન સેક્ટરમાં અને વેબ પેજની રજૂઆતમાં થાય છે, વધુ સારી રીતે, તે ટૂલ્સ અને આદેશોની શ્રેણી છે જે વેબ પેજને પ્રસ્તુત કરવા માટે જવાબદાર છે કારણ કે આપણે તેને પ્રથમ વખત જોઈ રહ્યા છીએ. એકવાર તે પહેલેથી જ બનાવવામાં આવે છે. સાધન સાથે મળીને કામ કરે છે HTML (પૃષ્ઠોની મૂળ સામગ્રીમાંથી ગોઠવાયેલ).
તેનું નામ તેમાં રહેલા પાંદડાઓની સંખ્યા દ્વારા નક્કી કરવામાં આવે છે અને તેમાંથી એક અન્ય લોકો પાસેથી મિલકતો અથવા લાક્ષણિકતાઓ વારસામાં મેળવે છે. એટલે કે, તમે એક સરળ બ્લોગ નમૂના સાથે કામ કરી શકો છો, પરંતુ જ્યારે તમે કોઈ સાઇટના દેખાવને કસ્ટમાઇઝ કરવા માંગતા હોવ ત્યારે તમારે CSS અમલમાં મૂકવાની જરૂર પડશે જે એક સારા CMS સાથે તમને તમારી સામગ્રીની પહોંચ વધારવામાં મદદ કરશે.
CSS શેના માટે છે?
CSS વડે, તમે તમારું પૃષ્ઠ ગોઠવી શકો છો, એટલે કે, તમે તમારા વેબ પૃષ્ઠને કહી શકો છો કે તમે બધી માહિતી કેવી રીતે શોધવા માંગો છો જેથી દર્શક તે જ સમયે હેન્ડલ કરવામાં સરળ અને ઉપયોગી બને. અહીં કેટલાક ઘટકોના તમામ આદેશો દાખલ કરો જે વેબ પૃષ્ઠની શૈલી અથવા ડિઝાઇનનો ભાગ છે, ઉદાહરણ તરીકે, ફોન્ટ, રંગો, કદ વગેરે.
સામાન્ય રીતે, જેથી તમે વધુ સારી રીતે સમજી શકો કે આ ટૂલ શું છે, ડિજિટલ માર્કેટિંગ નિષ્ણાતો આ વિશે સૌ પ્રથમ સમજે છે કારણ કે તેઓ જ તેને હેન્ડલ કરે છે.
CSS માં એનિમેટ કરો
સારું, હવે તમે એનિમેશન અને CSS ની દુનિયા વિશે થોડું જાણો છો. હવે ટ્યુટોરીયલ શરૂ કરવાનો સમય છે.
CSS એનિમેશન તમને એક CSS શૈલી અને બીજી વચ્ચેના સંક્રમણને એનિમેટ કરવાની મંજૂરી આપે છે. આ એનિમેશનમાં બે ઘટકોનો સમાવેશ થાય છે: a શૈલી જે CSS એનિમેશન અને સમૂહનું વર્ણન કરે છે ફ્રેમ્સ જે તેની પ્રારંભિક અને અંતિમ સ્થિતિ તેમજ તેમાં સંભવિત મધ્યવર્તી બિંદુઓ દર્શાવે છે.
આમાંના દરેક એનિમેશનના ફાયદાઓની શ્રેણી છે:
- તેનો ઉપયોગ સરળ એનિમેશન માટે ખૂબ જ સરળ છે, તમે જાવાસ્ક્રિપ્ટની જાણકારી વિના પણ કરી શકો છો.
- ઓછી શક્તિવાળા કમ્પ્યુટર પર પણ એનિમેશન યોગ્ય રીતે પ્રદર્શિત થાય છે.
- બ્રાઉઝર દ્વારા નિયંત્રિત હોવાથી, તે તેના પ્રદર્શન અને કાર્યક્ષમતાને ઑપ્ટિમાઇઝ કરવાની મંજૂરી આપે છે, આમ આવર્તન ઘટાડે છે અને ટેબ્સને એવી રીતે એક્ઝિક્યુટ કરે છે કે તે દૃશ્યમાન ન હોય.
એનિમેશન સેટિંગ્સ
એનિમેશન શરૂ કરવા માટે, સૌ પ્રથમ આપણે તેને રૂપરેખાંકિત કરવું પડશે. આ કરવા માટે, અમે મિલકત પર જઈશું એનિમેશન અને તેના પેટા ગુણધર્મો. આ ટૂલ અમને એનિમેશનની લય અને અવધિ બંનેને ગોઠવવા દેશે અને તેનો ક્રમ પણ નહીં.
પેટા-ગુણધર્મો છે:
એનિમેશન - વિલંબ
તત્વ લોડ થાય તે ક્ષણ અને એનિમેશન ક્રમની શરૂઆત વચ્ચેનો વિલંબ સમય.
એનિમેશન - દિશા
સૂચવે છે કે શું એનિમેશન ક્રમના અંતે સ્ટાર્ટ ફ્રેમ પર પાછું જવું જોઈએ અથવા જ્યારે તે અંત સુધી પહોંચે ત્યારે શરૂઆતથી શરૂ થવું જોઈએ કે કેમ.
એનિમેશન - અવધિ
એનિમેશન તેના ચક્રને પૂર્ણ કરવામાં કેટલો સમય લે છે તે દર્શાવે છે (સમયગાળો)
એનિમેશન - પુનરાવર્તન - ગણતરી
તે કેટલી વખત પુનરાવર્તિત થાય છે. અમે સૂચવી શકીએ છીએ અનંત અનિશ્ચિત સમય માટે એનિમેશનનું પુનરાવર્તન કરવું.
એનિમેશન - નામ
તેનો ઉપયોગ દરેક એનિમેશન ફ્રેમનું વર્ણન કરતા નામનો ઉલ્લેખ કરવા માટે થાય છે.
એનિમેશન - પ્લે - સ્ટેટ
તમને એનિમેશન સિક્વન્સને થોભાવવા અને ફરી શરૂ કરવામાં સમર્થ થવા દે છે.
એનિમેશન - સમય - કાર્ય
તે એનિમેશનની લય સૂચવે છે, એટલે કે, એનિમેશન ફ્રેમ્સ કેવી રીતે બતાવવામાં આવે છે, આ માટે, પ્રવેગક વણાંકો સ્થાપિત થાય છે.
એનિમેશન - ભરો - મોડ
એનિમેશન સમાપ્ત થયા પછી ગુણધર્મોમાં કયા મૂલ્યો હશે તે સ્પષ્ટ કરે છે.
ફ્રેમ્સ સાથે ક્રમ સેટ કરો
એકવાર આપણે સમય, નામકરણ વગેરે ગોઠવી લીધા પછી. અમારા એનિમેશનને એક દેખાવ અથવા અનુભવ આપવાનો સમય છે.
આ કરવા માટે, અમે બે નવી ફ્રેમ સ્થાપિત કરીશું અને નિયમનો ઉપયોગ કરીશું @કીફ્રેમ્સ. આ સાથે, દરેક ફ્રેમ વર્ણવે છે કે એનિમેશન ક્રમ દરમિયાન દરેક તત્વ કેવી રીતે જોવા મળે છે.
સૂચવવા માટે સમય અને લય, ફ્રેમ વાપરે છે ટકાવારી અને સાથે થી અને થીઆનો આભાર, અમે સૂચવી શકીએ છીએ કે શરૂઆત ક્યારે 0% સાથે થાય છે અને અંત ક્યારે 100% સાથે થાય છે.
ફ્રેમ અને ટેક્સ્ટ એનિમેશન
વધુ ફ્રેમ્સ ઉમેરવા અને તેમને ટેક્સ્ટ સાથે એનિમેટ કરવા માટે, તમારે હેડર ફોન્ટના મોટા કદને લાગુ કરવાની જરૂર છે જેથી હેડર ચોક્કસ સમય માટે આગળ વધે તેમ વધે અને પછી તેના મૂળ કદમાં ઘટાડો થાય. આ માટે અમે નીચેનો કોડ સ્થાપિત કરવા જઈ રહ્યા છીએ:
75% ફોન્ટ - કદ: 300%; માર્ગ્ન - ડાબે: 25%; પહોળાઈ: 150%;
આ કોડ સાથે, અમે બ્રાઉઝરને સૂચન કરીએ છીએ કે ક્રમના 75%માં, હેડરમાં 25% નું ડાબું માર્જિન અને 200% ની પહોળાઈ સાથે 150%નું કદ છે.
એનિમેશન પુનરાવર્તન
એનિમેશન રિપીટ કરવા માટે, નીચેની પ્રોપર્ટીનો ઉપયોગ કરવો જરૂરી છે એનિમેશન - પુનરાવર્તન - ગણતરી અને આપણે તેને કેટલી વાર પુનરાવર્તિત કરવા માંગીએ છીએ તે દર્શાવવું જોઈએ. આપણે પણ ઉપયોગ કરી શકીએ છીએ અનંત જેથી તે હંમેશા પુનરાવર્તિત થાય.
નિષ્કર્ષ
તમે જોયું તેમ, CSS માં તમે એનિમેટેડ પ્રોજેક્ટ્સ બનાવી શકો છો અને અમે તમને આપેલા પગલાંને અનુસરીને તમે તેને દાખલ કરી શકો છો. જો તમે તમારી જાતને પૂછપરછ અને જાણ કરવાનું ચાલુ રાખશો, તો તમને ખબર પડશે કે અમારી પાસે ઘણા બધા વિકલ્પો ઉપલબ્ધ છે.
શું તમે પહેલેથી હિંમત કરી છે?