உள்ளடக்கம்
- 01. உங்கள் பக்கத்தின் உடல் குறிச்சொல்லில் குறியீட்டைச் சேர்க்கவும்
- 02. காட்சியை வடிவமைத்தல்
- 03. தடுமாற்றத்தைக் காண்பித்தல்
- 04. எல்லாவற்றையும் பிடி
- 05. தடுமாற்றம் இயங்குகிறது
- 06. இயல்புநிலைக்குத் திரும்பு
- நியூயார்க்கை உருவாக்குவதற்கான டிக்கெட்டை இப்போது பெறுங்கள்
கவனத்தை ஈர்ப்பதற்கான ஒரு சிறந்த வழி - அதைப் பிடித்துக் கொள்ளுங்கள் - உங்கள் திறமைகளை வெளிப்படுத்தும் வலைத்தள தளவமைப்பை உருவாக்குவது (ஒழுக்கமான வலைத்தள உருவாக்குநர் உருவாக்க உதவலாம்). உக்ரைன் வலை நிறுவனமான விண்டேஜின் தளம் இதற்கு ஒரு சிறந்த எடுத்துக்காட்டு, கண்ணாடித் துகள்களிலிருந்து கட்டப்பட்ட ஒரு துடிக்கும் லோகோவின் கண்களைக் கவரும் கலவையும், மிதவை செயல்படுத்தும் ஒரு அழகான பிட் தடுமாற்றமும் கொண்ட அதன் வி.ஆர் வடிவமைப்பு இலாகாவிற்கு உங்களை இழுக்கிறது.
- வலை அனிமேஷன்: குறியீடு தேவையில்லை
மிகக்குறைவாகப் பயன்படுத்தப்படும் ஒரு எளிய தடுமாற்ற விளைவு உங்கள் தளத்திற்கு ஒரு சிறிய கூடுதல் காட்சி ஆர்வத்தைத் தரக்கூடும், மேலும் இது செயல்படுத்துவது வியக்கத்தக்க எளிதானது. அதை எப்படி செய்வது என்பது இங்கே.
ஒரு சிக்கலான வலைத்தளத்தை மனதில் வைத்திருக்கிறீர்களா? உங்கள் வலை ஹோஸ்டிங் பணி என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். உங்கள் வடிவமைப்பு கோப்புகளை மேகக்கணி சேமிப்பகத்தில் பாதுகாப்பாக வைக்கவும்.
கோப்புகளைப் பதிவிறக்கவும் இந்த டுடோரியலுக்கு.
01. உங்கள் பக்கத்தின் உடல் குறிச்சொல்லில் குறியீட்டைச் சேர்க்கவும்
ஒரு எளிய தடுமாற்ற விளைவை உருவாக்குவது பல வழிகளில் செய்யப்படலாம். உரையின் மேல் அனிமேஷன் செய்யப்பட்ட GIF ஐ வைத்திருப்பதன் மூலம் இங்கே இதைச் செய்யப் போகிறோம், அவை காட்சிக்கு இயக்கப்படும் மற்றும் அணைக்கப்படும். முதலில், இந்த குறியீட்டை உங்கள் பக்கத்தின் உடல் குறிச்சொல்லில் சேர்க்கவும்.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. காட்சியை வடிவமைத்தல்
உள்ளடக்கம் பணி எழுத்துக்கள் எனப்படும் Google எழுத்துருக்களிலிருந்து ஒரு குறிப்பிட்ட தட்டச்சுப்பொறியைப் பயன்படுத்தும். அங்கிருந்து இணைப்பைப் பிடித்து உங்கள் தலைப் பிரிவில் வைக்கவும்; பாணி குறிச்சொற்கள் அல்லது தனி CSS கோப்பில் CSS ஐச் சேர்க்கவும். பக்கம் வெள்ளை உரையுடன் கருப்பு நிறமாகவும், வைத்திருப்பவர் உரைக்காக வடிவமைக்கப்பட்டுள்ளது.
உடல் {பின்னணி: # 000; font-family: ’Work Sans’, sans-serif; நிறம்: #fff; } # ஹோல்டர் {எழுத்துரு-அளவு: 6em; அகலம்: 500px; உயரம்: 300px; விளிம்பு: 0 ஆட்டோ; நிலை: உறவினர்; }
03. தடுமாற்றத்தைக் காண்பித்தல்
தடுமாற்ற விளைவு ஒரு பின்னணி படமாக இருக்கும், அது நேரடியாக உரையின் மேல் வைக்கப்படும். இங்கே முக்கியமான பகுதி என்னவென்றால், ஒளிபுகாநிலையை பூஜ்ஜியமாகக் குறைப்பதன் மூலம் இது கண்ணுக்கு தெரியாததாக மாற்றப்படுகிறது, இதனால் பயனர் உரையுடன் தொடர்பு கொள்ளும் வரை அது காண்பிக்கப்படாது.
#glitch {நிலை: முழுமையானது; மேல்: 0; இடது: 0; z- குறியீட்டு: 10; அகலம்: 100%; உயரம்: 100%; பின்னணி: url (glitch.gif); ஒளிபுகாநிலை: 0; }
04. எல்லாவற்றையும் பிடி
உடல் பிரிவின் முடிவில் ஸ்கிரிப்ட் குறிச்சொற்களைச் சேர்த்து, ஆவணத்தில் உள்ள ‘தடுமாற்றம்’ பிரிவுக்கு தற்காலிக சேமிப்பில் குறிப்பை உருவாக்கவும். பின்னர் ‘ஓவர்’ என்ற மாறி தவறானதாக அமைக்கப்படுகிறது. பயனர் உரையின் மீது நகரும்போது இது இயக்கப்படும் மற்றும் அணைக்கப்படும்.
var gl = document.getElementById ("தடுமாற்றம்"); var over = பொய்;
05. தடுமாற்றம் இயங்குகிறது
சுட்டி உரையின் மீது நகரும்போது தடுமாற்ற செயல்பாடு அழைக்கப்படுகிறது. தடுமாற்றம் இயங்கவில்லை என்றால், தடுமாற்றம் தெரிவுசெய்யப்பட்டு, ஒன்றரை விநாடிகளுக்குப் பிறகு அது அணைக்கப்படும்.இதை நீங்கள் பரிசோதிக்கலாம் மற்றும் சீரற்ற எண்ணைப் பயன்படுத்தி அதை கணிக்க முடியாததாக மாற்றலாம்.
செயல்பாடு தடுமாற்றம் () {if (over == false) {gl.style.opacity = "1"; setTimeout (செயல்பாடு () {இயல்பான ();}, 1500); }}
06. இயல்புநிலைக்குத் திரும்பு
தடுமாற்ற விளைவு பயனருக்கு மிகவும் எரிச்சலூட்டும் என்பதால் தொடர்ந்து இருக்கக்கூடாது, ஆனால் ஒரு ஊடாடும் உறுப்பு என அது நன்றாக வேலை செய்கிறது. இங்கே, குறியீடு ஒளிபுகாநிலையை பூஜ்ஜியத்திற்கு மீட்டமைக்கிறது, இதனால் அது உரையின் மேற்புறத்தில் தெரியாது.
செயல்பாடு இயல்பானது () {gl.style.opacity = "0"; }
நியூயார்க்கை உருவாக்குவதற்கான டிக்கெட்டை இப்போது பெறுங்கள்
மூன்று நாள் வலை வடிவமைப்பு நிகழ்வு ஜெனரேட் நியூயார்க் மீண்டும் வந்துள்ளது. 25-27 ஏப்ரல் 2018 க்கு இடையில் நடைபெறுகிறது, தலைப்பு பேச்சாளர்களில் சூப்பர் ஃப்ரெண்ட்லியின் டான் மால், வலை அனிமேஷன் ஆலோசகர் வால் ஹெட், முழு அடுக்கு ஜாவாஸ்கிரிப்ட் டெவலப்பர் வெஸ் போஸ் மற்றும் பலர் உள்ளனர். ஒரு முழு நாள் பட்டறைகள் மற்றும் மதிப்புமிக்க நெட்வொர்க்கிங் வாய்ப்புகளும் உள்ளன - அதைத் தவறவிடாதீர்கள். உங்கள் உருவாக்க டிக்கெட்டை இப்போது பெறுங்கள்.
இந்த கட்டுரை முதலில் படைப்பு வலை வடிவமைப்பு இதழின் வலை வடிவமைப்பாளரின் 270 இதழில் வெளியிடப்பட்டது. வெளியீடு 270 ஐ இங்கே வாங்கவும் அல்லது வலை வடிவமைப்பாளருக்கு இங்கே குழுசேரவும்.
