ஜாவாஸ்கிரிப்ட் மூலம் தள்ளாடும் உரை விளைவை உருவாக்கவும்

உள்ளடக்கம்

• 1. அறிமுக உரையை உருவாக்கவும்
• 2. உரையை பிரிக்கவும்
• 3. வேகம் சேர்க்கவும்
• 4. செயலை அழைக்கவும்
• 5. நகர்த்து
• 6. இறுதி எழுத்துக்களைச் சேர்க்கவும்
• ஜெனரேட் லண்டனில் மேலும் அறிக

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

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

1. அறிமுக உரையை உருவாக்கவும்

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

ஸ்கிரிப்ட்> var ஆஃப்செட் 1 = 0; var ஆஃப்செட் 2 = 0; var ஆஃப்செட் 3 = 0; / ஸ்கிரிப்ட்>

2. உரையை பிரிக்கவும்

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

$ (“H1”). குண்டு வெடிப்பு ({டிலிமிட்டர்: “எழுத்து”}); செயல்பாடு அனிம் () {var $ spans = $ (“# top”). கண்டுபிடி (‘span’); $ spans.each (செயல்பாடு () {ஆஃப்செட் 1 + = 40;

3. வேகம் சேர்க்கவும்

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

$ (இது) .வெலோசிட்டி ({மொழிபெயர்ப்பு Y: -100, ஒளிபுகாநிலை: 1}, {தாமதம்: ஆஃப்செட் 1, காலம்: 800, எளிதாக்குதல்: “ஈஸிஆட்பேக்”}); }); }

4. செயலை அழைக்கவும்

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

anim (); setTimeout (செயல்பாடு () {var $ spans = $ (“# நடுத்தர”). கண்டுபிடி ('span'); $ spans.each (function () {offset2 + = 40; $ (இது) .வேலோசிட்டி ({மொழிபெயர்ப்பு Y: - 100, ஒளிபுகாநிலை: 0.8}, {

5. நகர்த்து

இரண்டாவது மஞ்சள் உரை சரியாக நகரும் வகையில் தாமதம், காலம் மற்றும் தளர்த்தல் அமைக்கப்பட்டுள்ளது. ஆரஞ்சு நிறத்தில் இருக்கும் கடைசி உரை அடுத்த ‘செட் டைமவுட்’ செயல்பாட்டில் கட்டுப்படுத்தப்படுகிறது.

தாமதம்: ஆஃப்செட் 2, காலம்: 800, எளிதாக்குதல்: “ஈஸிஆட்பேக்”}); }); }, 100); setTimeout (செயல்பாடு () {var $ spans = $ (“# கீழே”). கண்டுபிடி (‘span’);

6. இறுதி எழுத்துக்களைச் சேர்க்கவும்

இப்போது இறுதி கடிதங்கள் இடத்திற்கு நகர்த்தப்பட்டுள்ளன. இது பேட்ரிக் ஹெங்கின் தளத்தின் அதே விளைவை அளிக்கிறது, இது உரை நகரும் அடுக்குகளைக் கொண்டுள்ளது. பேட்ரிக் உண்மையில் உரையை நகர்த்த WebGL ஐப் பயன்படுத்துகிறார், ஆனால் இது DOM கூறுகளுடன் கூடிய எளிய வழியாகும்.

$ spans.each (செயல்பாடு () {ஆஃப்செட் 3 + = 40; $ (இது) .வேகம் ({மொழிபெயர்ப்பு Y: -100, ஒளிபுகாநிலை: 0.8}, {தாமதம்: ஆஃப்செட் 3, காலம்: 800, எளிதாக்குதல்: “ஈஸிஆட்பேக்”});} ); }, 150);

ஜெனரேட் லண்டனில் மேலும் அறிக

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

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

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

தவறவிடாதீர்கள், இப்போது உங்கள் டிக்கெட்டைப் பெறுங்கள்