உள்ளடக்கம்
- 01. ரோல்ஓவர் உரை விளைவு
- 02. CSS ஐ உருவாக்கவும்
- 03. வார்த்தையை வைக்கவும்
- 04. மேலே மற்றும் மேல்
- 05. கீழே வட்டமிடுகிறது
- 06. மக்களுக்கு தானியங்கி
- 07. மாற்று வகுப்புகளைச் சேர்க்கவும்
ரோல்ஓவர் இணைப்புகள் பயனரின் கவனத்தை ஈர்ப்பதற்கான சிறந்த வழியாகும், குறிப்பாக அவை அசாதாரணமான அல்லது அசலான ஒன்றைச் செய்தால். நடுத்தரக் குழந்தை ஒரு பெரிய விளைவைக் கொண்டிருக்கிறது, எப்போதாவது வேறு இடங்களில் காணப்படுகிறது, இது ஒவ்வொரு எழுத்தையும் கைப்பற்றி அவற்றை அனிமேஷனுடன் பிரிக்கிறது, இது பார்வையாளர் வார்த்தையின் மீது வட்டமிடும்போது உதைக்கிறது. அனிமேஷன் சாண்ட்விச் பிராண்டின் விளையாட்டுத்தனமான தன்மையை வெளிப்படுத்த உதவுகிறது.
இந்த கட்டுரையில், உங்கள் தளத்தின் விளைவை எவ்வாறு மீண்டும் உருவாக்குவது என்பதை நாங்கள் உங்களுக்குக் காட்டுகிறோம். மேலும் உத்வேகத்திற்கு, சிறந்த CSS அனிமேஷன் எடுத்துக்காட்டுகளுக்கான எங்கள் வழிகாட்டியைப் பாருங்கள் (அவற்றை எவ்வாறு குறியீடாக்குவது என்பதற்கான வழிமுறைகளுடன்). சற்று வித்தியாசமாக, சிறந்த வலைத்தள உருவாக்குநரை முயற்சிக்கவும் அல்லது சிறந்த மேகக்கணி சேமிப்பகத்தை தேர்வு செய்யவும். உங்கள் தளத்தை நீங்கள் மிகவும் சிக்கலானதாக மாற்றினால், உங்கள் வலை ஹோஸ்டிங் சரியான இடத்தில் இருப்பதை உறுதிசெய்க.
01. ரோல்ஓவர் உரை விளைவு
நடுத்தர குழந்தை வலைத்தளத்தின் சிறந்த உரை விளைவுகளில் ஒன்று மெனுவில் உள்ள மாற்றம் செய்வதற்கான விளைவுகளுக்கு ஆகும், அங்கு எழுத்துக்கள் உரையில் பிரிக்கப்பட்டு சிறிது சுழலும். சில எளிய HTML குறிச்சொற்களைக் கொண்டு இதைத் தொடங்கவும்.
div> div> காலை உணவு / div> / div>
02. CSS ஐ உருவாக்கவும்
பின்வரும் சிஎஸ்எஸ் விதிகளைச் சேர்க்க தனி சிஎஸ்எஸ் கோப்பு அல்லது பாணி குறிச்சொற்களைப் பயன்படுத்தவும், உடலை உறுதி செய்வதன் மூலம் உலாவியின் முழு அளவை நிரப்பவும், ரேப்பர் முழு உயரத்தையும் எடுத்துக்கொள்ளவும்.
உடல் {அகலம்: 100%; உயரம்: 100%; விளிம்பு: 0; திணிப்பு: 0; }. ரேப்பர் {காட்சி: கட்டம்; உயரம்: 100%; }
03. வார்த்தையை வைக்கவும்
தி சொல் வகுப்பு கட்டத்தில் வார்த்தையை மையப்படுத்துகிறது. கொடுக்கப்பட்ட எந்த உரையும் சொல் வர்க்கம் இதைப் பயன்படுத்தலாம். தி மேலே வகுப்பு மற்ற எல்லா கடிதங்களுக்கும் பயன்படுத்தப்படும், இவை மேல்நோக்கி நகரும்.
.word {font-size: 3em; விளிம்பு: ஆட்டோ ஆட்டோ; } .word .up {display: inline-block; உருமாற்றம்: மொழிபெயர்ப்பு 3 டி (0px, 0px, 0px) சுழற்று (0deg); மாற்றம்: அனைத்து 0.5 களும் எளிதில் வெளியேறும்; }
04. மேலே மற்றும் மேல்
இப்போது தி கீழ் வர்க்கம் மிகவும் ஒத்த அமைப்புகளைப் பகிர்ந்து கொள்கிறது மேலே ஆனால் ஹோவர் இயக்கத்தை மேல்நோக்கி காட்டுகிறது மேலே உருண்டு. தோற்றத்தை மேம்படுத்த மேல்நோக்கி சிறிது சுழலும்.
.word .down {display: inline-block; உருமாற்றம்: மொழிபெயர்ப்பு 3 டி (0px, 0px, 0px) சுழற்று (0deg); மாற்றம்: அனைத்து 0.5 களும் எளிதில் வெளியேறும்; } .ச்சொல்: மிதவை .up {உருமாற்றம்: மொழிபெயர்ப்பு 3 டி (0px, -8px, 0px) சுழற்று (12deg); நிறம்: # 058b05}
05. கீழே வட்டமிடுகிறது
பயனர் உரையின் மீது வட்டமிடும்போது, கீழ் வகுப்பு உரையை கீழ்நோக்கி நகர்த்துகிறது. பின்னர் ஜாவாஸ்கிரிப்டில் உரை தனித்தனி இடைவெளிகளாக பிரிக்கப்படும், வகுப்புகள் மாற்று இடைவெளிகளில் தானாக சேர்க்கப்படும்.
.word: hover .down {உருமாற்றம்: மொழிபெயர்ப்பு 3 டி (0px, 8px, 0px) சுழற்று (-12deg); நிறம்: # 058b05; }
06. மக்களுக்கு தானியங்கி
ஒவ்வொரு கடிதத்தையும் வெவ்வேறு வகுப்புகளுடன் மாற்று இடைவெளிகளில் வைக்க வேண்டியது சற்று தொந்தரவாகும், எனவே தேர்வாளரிடம் வினவவும் ஒவ்வொரு கடிதத்தையும் எடுக்க ஜாவாஸ்கிரிப்ட் பெறுவதன் மூலம் செயல்முறையை தானியக்கமாக்குவோம். இங்கே தி str தற்போதைய கடிதத்தை உரை வழியாக சுழலும்போது மாறி பிடிக்கிறது.
script> var element = document.querySelectorAll (’.word’); for (var i = 0, l = element.length; i l; i ++) {var str = element [i] .textContent; கூறுகள் [i] .innerHTML = ’’;
07. மாற்று வகுப்புகளைச் சேர்க்கவும்
இப்போது மற்றொரு வளையமானது ஒவ்வொரு எழுத்தையும் அதன் சொந்த இடைவெளி உறுப்பில் வைத்து, சேர்க்கிறது மேலே அல்லது கீழ் இடைவெளிகளுக்கு வகுப்பு. உலாவியில் இதைப் பார்த்தால், ஒவ்வொரு கடிதத்தாலும் உரை மேல் மற்றும் கீழ் பிரிக்கப்பட்டிருப்பதைக் காண்பீர்கள், அதே நேரத்தில் சற்று சுழலும்.
நடுத்தர குழந்தை இணையதளத்தில் அதன் விளைவை நீங்கள் காணலாம்.
for (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); கூறுகள் [i] .appendChild (spn); spn.textContent = str [j]; pos = (j% 2) ஆகட்டும்? 'மேல் கீழ்'; spn.classList.add (pos); script} / ஸ்கிரிப்ட்>
இந்த கட்டுரை முதலில் படைப்பு வலை வடிவமைப்பு இதழில் வெளியிடப்பட்டது வலை வடிவமைப்பாளர்.வெளியீடு 286 அல்லது பதிவு.
