ஸ்கெட்ச் மற்றும் எஸ்.வி.ஜி உடன் ஐகான்களை உயிரூட்டுங்கள்

உள்ளடக்கம்

• படி 01
• படி 02
• படி 03
• படி 04
• படி 05
• படி 06
• படி 07
• படி 08
• படி 09
• படி 10
• படி 11
• படி 12
• படி 13
• படி 14
• படி 15
• படி 16
• படி 17
• படி 18
• படி 19
• படி 20

டிஜிட்டல் உலகம் பெருகிய முறையில் மாறும், எதிர்வினை மற்றும் அனிமேஷன் செய்யப்படுகிறது - ஒரு வலைப்பக்கத்தின் முழு தளவமைப்பிலிருந்து ஒரு பயன்பாட்டின் மிகச்சிறிய ஐகான் வரை. இந்த டுடோரியலில், ஒரு வலைத்தளத்தின் பதிவிறக்க பொத்தானுக்கான கோப்புகளின் தொகுப்பைக் குறிக்கும் ஐகானை உருவாக்க ஸ்கெட்சைப் பயன்படுத்த உள்ளோம். நாங்கள் எங்கள் ஐகானை ஒரு எஸ்.வி.ஜி ஆக ஏற்றுமதி செய்து CSS ஐப் பயன்படுத்தி உயிரூட்டுவோம்.

மிகவும் எளிமையான அனிமேஷன் ஐகானுக்கு கூட பல தொழில்நுட்பக் கருத்தாய்வு தேவைப்படுகிறது, எனவே இந்த டுடோரியலின் ஒவ்வொரு அடியும் உங்களை மிகவும் சிக்கலான திட்டங்களுக்கு தயார்படுத்த வடிவமைக்கப்பட்டுள்ளது. தொடர்ந்து செல்ல, வாசகர்களுக்கு ஸ்கெட்ச் எவ்வாறு பயன்படுத்துவது என்பது பற்றிய அடிப்படை புரிதல் இருக்க வேண்டும், அதே போல் கோட் பென், HTML மற்றும் CSS உருமாற்றங்கள் மற்றும் மாற்றங்கள். எஸ்.வி.ஜி உடன் முந்தைய அனுபவம் தேவையில்லை.

ஸ்கெட்சை ஏற்றுக்கொள்வதில் ஆர்வமுள்ள டெவலப்பர்கள் எப்படி இருக்கிறார்கள் என்பதன் மூலம் நான் வெடித்துச் சிதறினேன் - மேலும் திரை அடிப்படையிலான வடிவமைப்பு மற்றும் மேம்பாட்டிற்காக மென்பொருள் குறிப்பாக உருவாக்கப்பட்டுள்ளது என்பதைக் கருத்தில் கொள்வதில் அர்த்தமுள்ளது. அதன் எளிய UI மற்றும் பயன்படுத்த எளிதான கருவிகள் அதன் கணிசமான சக்தியை பேட்டைக்கு கீழ் காட்டிக் கொடுக்கின்றன.

ஸ்கெட்சில் உருவாக்கப்பட்ட அனைத்தும் திசையன் வடிவங்களைப் பயன்படுத்துவதால், வடிவமைப்புகளை எஸ்.வி.ஜி களாக ஏற்றுமதி செய்வதற்கான சரியான கருவி இது.

நீங்கள் எஸ்.வி.ஜி பயன்படுத்துவதை நிறுத்தி வைத்திருந்தால், இனி காத்திருக்க வேண்டாம். இந்த வடிவம் ராக்-திடமானது, உலாவிகளால் மிகவும் ஆதரிக்கப்படுகிறது, மற்றும் முற்றிலும் திசையன் அடிப்படையிலானது (கிராபிக்ஸ் எல்லையற்ற தீர்மானத்தை வழங்குகிறது). மேலும் என்னவென்றால், SVG இல் உள்ள ஒவ்வொரு அடுக்கையும் DOM இல் உள்ள எல்லாவற்றையும் போலவே CSS அல்லது ஜாவாஸ்கிரிப்ட் மூலம் கையாள முடியும். தீவிரமாக - நீங்கள் இன்னும் என்ன கேட்க முடியும்?

படி 01

ஸ்கெட்சை சுட்டு, 60px ஆல் 60px ஆர்ட்போர்டுடன் புதிய திட்டத்தை உருவாக்குவதன் மூலம் தொடங்கவும். இதில் நாம் உருவாக்கப் போகும் ஐகான் இருக்கும்.

படி 02

எங்கள் ஐகான் யாரோ பதிவிறக்குவதற்கான கோப்புகளின் தொகுப்பைக் குறிக்கிறது. இதில் மூன்று பொருள்கள் உள்ளன - இரண்டு புகைப்படங்கள் மற்றும் ஒரு ஆவணம், இவை அனைத்தும் செவ்வகங்களிலிருந்து அவற்றின் வடிவத்தைப் பெறுகின்றன. முதலில், ஆர் விசைப்பலகை குறுக்குவழியைப் பயன்படுத்தி ஒவ்வொரு பொருளுக்கும் செவ்வகங்களைச் செருகவும். பின்னர் வடிவங்களுக்கு வெள்ளை நிறம் மற்றும் 1px நீல எல்லை ஆகியவற்றைக் கொடுங்கள்.

எஸ்.வி.ஜியின் தற்போதைய பதிப்பு மையப்படுத்தப்பட்ட எல்லைகளை மட்டுமே ஆதரிக்கிறது (அல்லது அவை அழைக்கப்படும் ‘பக்கவாதம்’) என்பதால், எல்லைக்குள் அல்லது வெளியே வடிவத்திற்கு எதிராக மையமாக இருக்க வேண்டும். எதிர்காலத்தில், எஸ்.வி.ஜி 2 மூன்று எல்லை வகைகளையும் ஆதரிக்கும்.

படி 03

ஆவணத்தின் மூலையில் முக்கோண மடிப்பை உருவாக்க, அதே நீல விளிம்புடன் மற்றொரு செவ்வகத்தை (12px சதுரம்) செருகவும், ஆனால் நிரப்பு வண்ணம் இல்லை. பெரிய ஆவண செவ்வகத்தின் மேல்-வலது மூலையில் அதை நிலைநிறுத்திய பிறகு, திசையன் புள்ளிகளை வெளிப்படுத்த திருத்து பயன்முறையை உள்ளிடவும். மேல்-வலது திசையன் புள்ளியைக் கிளிக் செய்து, அதை நீக்க நீக்கு என்பதை அழுத்தவும்.

படி 04

பெரிய செவ்வகத்தில் இப்போது இதேபோன்ற செயலைச் செய்வோம். அந்த வடிவத்தைத் தேர்ந்தெடுத்து திருத்து பயன்முறையை உள்ளிடவும், பின்னர் இன்ஸ்பெக்டரில் ‘முழு சுற்று பிக்சல் விளிம்புகளுக்கு’ தேர்ந்தெடுக்கப்பட்டிருப்பதை உறுதிசெய்க. எல்லைக்கோடுகளில் கிளிக் செய்வதன் மூலம் வடிவத்தின் மேல் மற்றும் வலது பக்கங்களில் ஒரு திசையன் புள்ளியைச் சேர்க்கவும்.

எல்லா புள்ளிகளும் நேராக இருக்க வேண்டும் (பெஜியர் கைப்பிடிகள் கொண்ட வளைந்த விருப்பங்களில் ஒன்று அல்ல). இந்த புதிய புள்ளிகளை மேல்-வலது மூலையில் இருந்து 12px இல் வைக்கவும், எனவே அவை முக்கோண மடிப்புடன் வரிசையாக இருக்கும். மேல்-வலது மூலையில் உள்ள புள்ளியை நீக்கு.

படி 05

முக்கோண மடிப்பு வடிவத்தில் சொடுக்கவும், பின்னர் 45 டிகிரி கோண பக்கத்தை அகற்ற கத்தரிக்கோல் கருவியை (அடுக்கு> பாதைகள்> கத்தரிக்கோல்) பயன்படுத்தவும். கத்தரிக்கோல் கருவியைப் பற்றி மேலும் அறிய, இந்த கட்டுரையைப் பார்க்கவும்.

படி 06

ஆவணத்தில் உரையின் வரிகளைக் குறிக்க பல 1px உயரமான செவ்வகங்களைச் செருகவும். இடது-நியாயப்படுத்தப்பட்ட உரையின் தோற்றத்தைப் பிரதிபலிக்க நான் மாறுபட்ட அகலங்களைப் பயன்படுத்தினேன்.

படி 07

இறுதி ஐகான் வடிவமைப்பில் ஒவ்வொரு பொருளுக்கும் அதைச் சுற்றி சில வெள்ளை இடம் இருப்பது எப்படி என்பதைக் கவனியுங்கள்? ஒவ்வொரு பொருளின் அடிப்படை வடிவத்திலும் நீல நிறத்திற்கு கீழே ஒரு தடிமனான வெள்ளை எல்லையைச் சேர்ப்பதன் மூலம் பொதுவாக நாம் அதை அடைய முடியும்.

இருப்பினும், எஸ்.வி.ஜி ஒரு அடுக்குக்கு ஒரு எல்லையை மட்டுமே ஆதரிக்கிறது (எஸ்.வி.ஜி 2 வரை), எனவே அதற்கு பதிலாக ஒவ்வொரு பொருளின் அடிப்படை வடிவத்தையும் நகலெடுப்போம், பின்னர் கீழே உள்ள பெரும்பாலான வடிவங்களின் எல்லையை 4 பி.எக்ஸ் வெள்ளைக்கு மாற்றுவோம். ஒவ்வொரு புகைப்பட அடுக்கையும் அதன் வெள்ளை பின்னணியுடன் தொகுக்கவும், மற்றும் அனைத்து ஆவண அடுக்குகளையும் ஒன்றாக தொகுக்கவும்.

படி 08

உங்கள் எல்லா அடுக்குகளுக்கும் தலைப்பு. இது உண்மையில் ஒரு முக்கியமான படியாகும், ஏனெனில் இது நாம் ஏற்றுமதி செய்யப் போகும் எஸ்.வி.ஜி. ஸ்கெட்ச் ஒவ்வொரு அடுக்கின் பெயரையும் ஒரு அடையாளத்தைக் கொடுக்கப் பயன்படுத்தும், எனவே ஒவ்வொரு அடுக்குக்கும் ஒரு தனித்துவமான பெயர் தேவைப்படுகிறது, மேலும் இடைவெளிகளுக்குப் பதிலாக ஹைபன்களைப் பயன்படுத்துகிறது (அல்லது ஒட்டகக் கேஸில்).

படி 09

உங்கள் விருப்பப்படி குழுக்களை வைத்து சுழற்றுங்கள். ஐகானின் தெளிவை மதிப்பிடுவதற்கு ஸ்கெட்சின் ‘ஷோ பிக்சல்கள்’ அம்சத்தை (ctrl + P) பயன்படுத்தவும். நாங்கள் அத்தகைய மெல்லிய எல்லைகளுடன் வடிவங்களை சுழற்றுவதால், அவை ஒருபோதும் பிக்சல் கட்டத்துடன் சரியாக ஒத்துப்போவதில்லை, ஆனால் இன்ஸ்பெக்டரில் உள்ள பொருத்துதல் மதிப்புகளுடன் பிடில் செய்ய விரும்புகிறேன், இதனால் சுழற்றப்பட்ட வடிவங்கள் முடிந்தவரை மிருதுவாக தோன்றும். முழு முழு எண்கள் அல்லது அரை பிக்சல் எக்ஸ் மற்றும் ஒய் மதிப்புகள் தொடங்க ஒரு சிறந்த இடம்.

படி 10

ஒரு மிதவை நிலையில் ஐகான் எவ்வாறு தோன்றும் என்பதை வடிவமைக்க, ஐகானின் ஆர்ட்போர்டை நகலெடுத்து பொருள்களை ஒழுங்குபடுத்துங்கள், இதனால் அவை ஒன்றோடு ஒன்று நெருக்கமாக இருக்கும் மற்றும் சற்று மாறுபட்ட சுழற்சிகளைக் கொண்டுள்ளன. ஒவ்வொரு பொருளின் சுழற்சி மதிப்புகளையும் இயல்பான (செயலற்ற) நிலை மற்றும் அதன் மிதவை நிலைக்கு எழுதுங்கள் - எங்களுக்கு அவை பின்னர் தேவைப்படும்.

படி 11

நாங்கள் ஐகானை வடிவமைத்துள்ளோம், இப்போது அதை ஏற்றுமதிக்கு தயார்படுத்த வேண்டிய நேரம் வந்துவிட்டது. செயலற்ற மற்றும் ஹோவர் ஸ்டேட் ஆர்ட்போர்டுகள் இரண்டையும் நகலெடுப்பதன் மூலம் தொடங்கவும், பின்னர் ஒவ்வொரு குழுவையும் தேர்ந்தெடுத்து சுழற்சி மதிப்புகளை 0 டிகிரிக்கு மீட்டமைக்கவும். நாங்கள் எழுதிய மதிப்புகளைப் பயன்படுத்தி, அந்த சுழற்சிகளை CSS உடன் மீண்டும் உருவாக்க உள்ளோம்.

படி 12

இன்ஸ்பெக்டரில் உள்ள எக்ஸ் மற்றும் ஒய் மதிப்புகளைப் பார்க்கும்போது, ​​ஒவ்வொரு பொருளின் செயலற்ற மற்றும் ஹோவர் நிலை எக்ஸ், ஒய் நிலைகளுக்கு இடையிலான வேறுபாட்டைக் கணக்கிடுங்கள் (இரு மாநிலங்களுக்கிடையில் எக்ஸ் மற்றும் ஒய் திசைகளில் குழு எவ்வளவு தூரம் நகர்கிறது). அந்த எண்களை எழுதுங்கள்.

படி 13

0 டிகிரி சுழற்சி அடுக்குகளைக் கொண்ட இரண்டு ஆர்ட்போர்டுகளில், செயலற்ற நிலை ஆர்ட்போர்டை நகலெடுக்கவும். அடுக்குகள் பட்டியலில் உள்ள ஒவ்வொரு குழுவையும் தேர்ந்தெடுத்து அவற்றை குழுவாக்கவும். ஸ்கெட்ச் இயல்புநிலையை விட மிகவும் இலகுரக முறையில் எஸ்.வி.ஜி மார்க்அப்பைப் பயன்படுத்தி அந்தக் குழுக்களை மீண்டும் உருவாக்குவோம்.

படி 14

கேன்வாஸ் அல்லது அடுக்குகள் பட்டியலில் உள்ள ஆர்ட்போர்டின் தலைப்பைக் கிளிக் செய்து, இன்ஸ்பெக்டரின் கீழ்-வலது மூலையில் உள்ள ‘ஏற்றுமதி செய்யுங்கள்’ பொத்தானைக் கிளிக் செய்க. ’எஸ்.வி.ஜி’ என்பதைத் தேர்ந்தெடுத்து கோப்பை ஏற்றுமதி செய்யுங்கள்.

படி 15

இப்போது எங்கள் எஸ்.வி.ஜி கோப்பை சுத்தம் செய்ய வேண்டிய நேரம் வந்துவிட்டது. பேட்டைக்குக் கீழ், எஸ்.வி.ஜி HTML போன்ற மார்க்அப்பைப் பயன்படுத்துகிறது, எனவே எந்த வலை உருவாக்குநரும் வீட்டிலேயே சரியாக இருப்பார். நீங்கள் விரும்பும் குறியீடு எடிட்டரில் எஸ்.வி.ஜி திறக்கும்போது, ​​நிறைய வெளிப்புற மார்க்அப்பை நீங்கள் கவனிப்பீர்கள். ஸ்கெட்ச் கோப்பின் பக்கம் மற்றும் ஆர்ட்போர்டுடன் தொடர்புடைய ஜி> கொள்கலன்களை நான் அடிக்கடி அகற்றுவேன், நீண்ட தசம மதிப்புகளை நூறாவது இடத்திற்கு சுருக்கி, ஸ்கெட்சின் தனிப்பயன் பண்புகளை அகற்றுவேன்.

அனைத்து எஸ்.வி.ஜி மார்க்அப்பையும் ஒரு கோட் பென்னில் HTML ஆக நகலெடுக்க / ஒட்டுமாறு நான் பரிந்துரைக்கிறேன், எனவே முடிவு மாறாது என்பதை உறுதிப்படுத்திக் கொள்ளும்போது மிதமிஞ்சிய பண்புகளையும் கூறுகளையும் நீக்கலாம். மார்க்அப்பை நீங்கள் எவ்வளவு சுத்தம் செய்கிறீர்கள் என்பது உங்களுடையது, ஆனால் நீங்கள் எவ்வளவு அதிகமாகச் செய்கிறீர்களோ, அவ்வளவு எளிதாகப் படிக்க முடியும், மேலும் கோப்பு அளவு சிறியதாக இருக்கும்.

படி 16

இப்போது நீங்கள் ஒவ்வொரு பொருளுக்கும் (புகைப்படம் -1, புகைப்படம் -2, ஆவணம்) பொருத்தமான கூறுகளை g>… / g> குறிச்சொற்களைக் கொண்டு மடக்குவதன் மூலம் மீண்டும் உருவாக்குவோம், நீங்கள் div>… / div> HTML இல். ஒவ்வொரு குழுவிற்கும் ஒரு வகுப்பை ஒதுக்குங்கள், எடுத்துக்காட்டாக: g>.

படி 17

போதுமான தயாரிப்பு வேலை; ஐகானை உயிர்ப்பிக்கும் நேரம் இது! CSS இல் ஒரு அறிவிப்பை உருவாக்க ஒவ்வொரு குழுவிற்கும் நீங்கள் ஒதுக்கிய வகுப்புகளைப் பயன்படுத்தவும். நீங்கள் எழுதிய செயலற்ற நிலை சுழற்சி மதிப்புகளைக் குறிப்பிடுவது, ஒவ்வொரு குழுவிலும் உருமாற்றத்தைப் பயன்படுத்தி மீண்டும் உருவாக்குதல்: சுழற்று (__ டிகிரி) மற்றும் உருமாற்றம்-தோற்றம்: மைய மையம்;.

பொதுவாக மாற்றம் மற்றும் மாற்றம் பண்புகளுக்கு விற்பனையாளர் முன்னொட்டுகள் தேவைப்படுகின்றன, ஆனால் கோடெபனில் விளையாடும்போது, ​​பேனாவின் அமைப்புகள் மூலம் அணுகக்கூடிய தானியங்கி விற்பனையாளர் முன்னொட்டு விருப்பங்களில் ஒன்றை நீங்கள் சாய்ந்து கொள்ளலாம்.

குறிப்பு: ஃபயர்பாக்ஸ் எஸ்.வி.ஜி உறுப்புகளில் உருமாறும்-மூல சொத்தை ஆதரிக்காது, எனவே சுழற்சிகள் எப்போதும் உறுப்பின் மேல்-இடது மூலையில் சுற்றி வருகின்றன. சுழற்சி மாற்றங்கள் இல்லாமல் வேறுபட்ட அனிமேஷனை வடிவமைப்பதை நீங்கள் கருத்தில் கொள்ளலாம், குறிப்பாக பயர்பாக்ஸுக்கு.

படி 18

ஒவ்வொரு பொருளின் அறிவிப்பிற்கும் ஒரு மாறுதல் சொத்தைச் சேர்க்கவும் (எடுத்துக்காட்டாக: மாற்றம்: அனைத்தும் .4 கள் எளிதானது;). ஹோவர் மீது ஸ்டைலிங் மாற்றும்போது பொருள்களை உயிரூட்ட இது அனுமதிக்கிறது.

படி 19

இப்போது ஒவ்வொரு பொருளுக்கும் அதன் மிதவை நிலையில் CSS அறிவிப்புகளை உருவாக்குவோம். இந்த ஐகானை ஒரு பெரிய பொத்தானில் சேர்க்கிறீர்கள் என்றால் - நான் கோடெபன் எடுத்துக்காட்டில் இருப்பதைப் போல - ஐகானைக் காட்டிலும் பொத்தானுடன் ஹோவர் போலி-தேர்வாளர் இணைக்கப்பட வேண்டும்.

நீங்கள் ஐகானை சுயாதீனமாக உருவாக்கினால்,: எஸ்.வி.ஜி ஐகானுடன் இணைக்கவும். உங்கள் அறிவிப்பு இதுபோன்றதாக இருக்க வேண்டும்: .attachments- button: hover .document-icon {} அல்லது .attachments-icon: hover .document-icon {}.

படி 20

மந்திரம் நடக்கும் போது இதுதான். பொருள்கள் அவற்றின் மிதவை நிலையில் எவ்வளவு நகரும் மற்றும் சுழல்கின்றன என்பதற்கு நீங்கள் எழுதிய மதிப்புகளைக் குறிப்பிடுவது, செயலற்ற நிலைகளுடன் நாங்கள் முன்பு செய்ததைப் போல CSS உருமாற்றங்களைப் பயன்படுத்துபவர்களை மீண்டும் உருவாக்குங்கள். உருமாறும் சொத்து பல செயல்பாடுகளை (இடத்தால் பிரிக்கப்பட்ட) ஏற்றுக்கொள்ள முடியும், எனவே குழுக்களை நகர்த்த மொழிபெயர்ப்பை (x, y) பயன்படுத்துவோம், அவற்றை சுழற்ற (_deg) சுழற்றுவோம். நீங்கள் CSS ஐ எழுதும்போது சில முக்கியமான விஷயங்கள் உள்ளன.

முதலில், உங்கள் X மற்றும் Y மதிப்புகளுக்குப் பிறகு px ஐ எழுத மறக்காதீர்கள். இரண்டாவதாக, உருமாற்ற செயல்பாடுகளின் வரிசை முடிவைப் பாதிக்கும் - இங்கே மொழிபெயர்ப்பது சுழலும் முன் வர வேண்டும். மூன்றாவதாக, ஒவ்வொரு குழுவின் எக்ஸ் மற்றும் ஒய் நிலைகளில் உள்ள வேறுபாடுகள் (நீங்கள் எழுதியது) மொழிபெயர்ப்பு செயல்பாட்டைப் பயன்படுத்தும் போது நேர்மறை அல்லது எதிர்மறையாக மாற வேண்டியிருக்கலாம். எதிர்மறை எக்ஸ் மதிப்புகள் அதை இடதுபுறமாக நகர்த்தும், மேலும் எதிர்மறை Y மதிப்புகள் அதை மேலே நகர்த்தும். கடைசியாக, நீங்கள் எழுதிய சுழற்சி மதிப்புகளை மாற்றியமைக்க வேண்டும் - சிஎஸ்எஸ் உருமாற்றங்களைப் பயன்படுத்தும் போது ஸ்கெட்சில் எதிர்மறை சுழற்சி மதிப்புகள் நேர்மறையாகின்றன, மேலும் நேர்மாறாகவும்.

உருமாற்ற மதிப்புகளை மாற்றியமைத்த பிறகு, முடித்துவிட்டீர்கள்! உங்கள் வலைத்தளத்தின் பார்வையாளர்களை மகிழ்விக்க ஐகான் தயாராக உள்ளது.

சொற்கள்: பீட்டர் நோவெல்

பயன்பாடுகள், வலைத்தளங்கள், புத்தகங்கள், பிராண்ட் அடையாளங்கள் மற்றும் பலவற்றை பீட்டர் நோவெல் வடிவமைக்கிறார். அவர் சான் பிரான்சிஸ்கோவில் வசிக்கிறார். இந்த கட்டுரை முதலில் நிகர இதழின் 270 இதழில் வெளிவந்தது.

இதை விரும்பினீர்களா? இவற்றைப் படியுங்கள்!

• எஸ்.வி.ஜி பயன்படுத்துவதற்கான உதவிக்குறிப்புகள்
• டூடுல் கலையின் சிறந்த எடுத்துக்காட்டுகள்
• புத்திசாலித்தனமான வேர்ட்பிரஸ் பயிற்சி தேர்வு