அனிமேஷன் செய்யப்பட்ட பிளவு-திரை இறங்கும் பக்கத்தை உருவாக்குங்கள்

உள்ளடக்கம்

• 01. அமைக்கவும்
• 02. HTML ஐ முடிக்கவும்
• 03. சாஸ் மாறிகள் ஆராயுங்கள்
• 04. உடல் ஸ்டைலிங் சரிசெய்யவும்
• 05. பிரிவு தலைப்புகளை ஸ்டைல் ​​செய்யுங்கள்
• 06. சி.டி.ஏக்களை தனித்து நிற்கச் செய்யுங்கள்
• 07. கொள்கலன் பின்னணி மற்றும் திரைகளை அமைக்கவும்
• 08. பின்னணி படங்களைச் சேர்க்கவும்
• 09. மாற்றங்களைச் சேர்த்து, மிதவை விளைவுகளைச் சேர்க்கவும்
• 10. ஜாவாஸ்கிரிப்டுக்கு நகர்த்தவும்
• 11. ஒரு வகுப்பைச் சேர்த்து அகற்றவும்
• 12. அதை பதிலளிக்க வைக்கவும்

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

• இந்த டுடோரியலுக்கான பணிபுரியும் கோட் பென் பார்க்கவும்

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

01. அமைக்கவும்

நீங்கள் கோடெப்பனைப் பயன்படுத்துகிறீர்கள் என்றால், பேனா அமைப்புகளில் CSS ‘SCSS’ என அமைக்கப்பட்டிருப்பதை உறுதிசெய்க. அமைப்புகள் தாவலைக் கிளிக் செய்வதன் மூலம் இந்த மாற்றத்தை நீங்கள் செய்யலாம், ’CSS’ ஐத் தேர்ந்தெடுத்து, கீழ்தோன்றும் விருப்பங்களில் CSS Preprocessor ஐ SCSS ஆக மாற்றலாம்.

எங்கள் HTML இல் சேர்க்க ஆரம்பிக்கலாம். இரு பிரிவுகளுக்கும் ‘திரை’ வகுப்பைக் கொண்டு, ‘இடது’ எனப்படும் ஒரு பகுதியையும், ஒரு கொள்கலன் வகுப்பினுள் ‘வலது’ எனப்படும் ஒரு பகுதியையும் மடிக்கப் போகிறோம்.

div> பிரிவு> / பிரிவு> பிரிவு> / பிரிவு> / div>

02. HTML ஐ முடிக்கவும்

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

div> section> h1> ஆண்கள் ஃபேஷன் </ h1> பொத்தான்> a href = "#"> மேலும் அறிக </ a> / பொத்தான் / பிரிவு> பிரிவு> h1> மகளிர் ஃபேஷன் </ h1> பொத்தான்> ஒரு href = "#"> அறிக மேலும் </ a> / பொத்தான்> / பிரிவு>

03. சாஸ் மாறிகள் ஆராயுங்கள்

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

/ * * மாறிகள் * * / $ கொள்கலன்- BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0.7); $ இடது-பொத்தான்-மிதவை: rgba (94, 226, 247, 0.7); $ right-bgColor: rgba (227, 140, 219, 0.8); $ வலது-பொத்தான்-மிதவை: rgba (255, 140, 219, 0.7); $ மிதவை அகலம்: 75%; $ சிறிய அகலம்: 25%; $ animateSpeed: 1000ms;

04. உடல் ஸ்டைலிங் சரிசெய்யவும்

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

html, உடல் {திணிப்பு: 0; விளிம்பு: 0; font-family: ’Open Sans’, sans-serif; அகலம்: 100%; உயரம்: 100%; overflow-x: மறைக்கப்பட்ட; }

05. பிரிவு தலைப்புகளை ஸ்டைல் ​​செய்யுங்கள்

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

h1 {எழுத்துரு-அளவு: 5rem; நிறம்: #fff; நிலை: முழுமையான; இடது: 50%; மேல்: 20%; உருமாற்றம்: மொழிபெயர்ப்பு எக்ஸ் (-50%); வெள்ளை இடம்: இப்பொழுது; font-family: ’Playfair Display’, serif; }

06. சி.டி.ஏக்களை தனித்து நிற்கச் செய்யுங்கள்

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

.பட்டன் {காட்சி: தொகுதி; நிலை: முழுமையான; இடது: 50%; மேல்: 50%; உயரம்: 2.6rem; திணிப்பு-மேல்: 1.2rem; அகலம்: 15rem; உரை-சீரமை: மையம்; நிறம்: வெள்ளை; எல்லை: 3px திட #fff; எல்லை-ஆரம்: 4px; எழுத்துரு எடை: 600; உரை-மாற்றம்: பெரிய எழுத்து; உரை-அலங்காரம்: எதுவுமில்லை; உருமாற்றம்: மொழிபெயர்ப்பு எக்ஸ் (-50%); மாற்றம்: அனைத்தும் .2 கள்;

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

.screen.left .பட்டன்: மிதவை {பின்னணி-வண்ணம்: $ இடது-பொத்தான்-மிதவை; எல்லை-வண்ணம்: $ இடது-பொத்தான்-மிதவை; } .screen.right .பட்டன்: மிதவை {பின்னணி-வண்ணம்: $ வலது-பொத்தான்-மிதவை; எல்லை-வண்ணம்: $ வலது-பொத்தான்-மிதவை;

07. கொள்கலன் பின்னணி மற்றும் திரைகளை அமைக்கவும்

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

.கண்டெய்னர் {நிலை: உறவினர்; அகலம்: 100%; உயரம்: 100%; பின்னணி: $ கொள்கலன்- BgColor; . திரை {நிலை: முழுமையானது; அகலம்: 50%; உயரம்: 100%; வழிதல் மறைத்து; }}

08. பின்னணி படங்களைச் சேர்க்கவும்

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

.screen.left {இடது: 0; பின்னணி: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) மைய மையம் மீண்டும் மீண்டும் இல்லை; பின்னணி அளவு: கவர்; &: முன் {நிலை: முழுமையானது; உள்ளடக்கம்: ""; அகலம்: 100%; உயரம்: 100%; பின்னணி: $ left-bgColor; }}

பக்கத்தின் வலது புறம் imgbb ஐப் பயன்படுத்தி பின்னணி படத்தைக் காண்பிக்கும், மேலும் பின்னணி நிறத்தை இளஞ்சிவப்பு நிறமாக அமைப்போம். மீண்டும், பின்னணி அளவை அமைத்துள்ளோம் கவர். இது முழு உறுப்பு முழுவதையும் மறைக்க அனுமதிக்கும், இது எங்கள் விஷயத்தில் உள்ளது . திரை வர்க்கம்.

.screen.right {வலது: 0; பின்னணி: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) மைய மையம் மீண்டும் மீண்டும் இல்லை; பின்னணி அளவு: கவர்; &: முன் {நிலை: முழுமையானது; உள்ளடக்கம்: ""; அகலம்: 100%; உயரம்: 100%; பின்னணி: $ right-bgColor; }}

09. மாற்றங்களைச் சேர்த்து, மிதவை விளைவுகளைச் சேர்க்கவும்

இரண்டு திரைகளிலும் எங்கள் மிதவை விளைவுக்கான அனிமேஷன் வேகம் எங்கள் மாறியின் மதிப்பைக் கொண்ட ஒரு மாற்றத்தால் கட்டுப்படுத்தப்படும் $ animateSpeed, இது 1000ms (ஒரு வினாடி). அனிமேஷனுக்கு சில தளர்த்தல்களை வழங்குவதன் மூலம் முடிப்போம், இது எங்களுக்கு எளிதான அனிமேஷனை வழங்க உதவும்.

.screen.left, .screen.right, .screen.right: முன், .screen.left: முன் {மாற்றத்திற்கு: $ animateSpeed ​​all-in-out; }

நாங்கள் இப்போது நடக்க விரும்புவது என்னவென்றால், நீங்கள் இடது திரையில் வட்டமிடும் போது, ​​ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி அந்த பிரிவில் ஒரு வகுப்பு சேர்க்கப்படும் (இது நாங்கள் அடுத்த கட்டத்தில் எழுதுவோம்). இந்த வகுப்பு சேர்க்கப்படும்போது, ​​அந்தத் திரை நாம் குறிப்பிட்ட மாறியின் அகலத்திற்கு நீட்டிக்கும் - இது 75% ஆக இருக்கும், பின்னர் வலது புறம் சிறிய அகல மாறிக்கு (25%) அமைக்கப்படும்.

.ஹவர்-இடது. இடது {அகலம்: $ மிதவை-அகலம்; } .ஹவர்-இடது. வலது {அகலம்: $ சிறிய அகலம்; } .ஹவர்-இடது. வலது: முன் {z- குறியீட்டு: 2; }

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

.hover-right .right {width: $ hover-width; } .ஹவர்-வலது. இடது {அகலம்: $ சிறிய அகலம்; } .ஹவர்-வலது. இடது: முன் {z- குறியீட்டு: 2; }

10. ஜாவாஸ்கிரிப்டுக்கு நகர்த்தவும்

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

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

const doc = ஆவணம்;

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

const right = doc.querySelector (". வலது"); const left = doc.querySelector (". இடது"); const container = doc.querySelector (". கொள்கலன்");

பயன்படுத்தி இடது கடைசி கட்டத்தில் நாங்கள் அறிவித்த நிலையான மாறி, இப்போது ஒரு நிகழ்வு கேட்பவரை அதில் சேர்க்கலாம். இந்த நிகழ்வு இருக்கும் mouseenter நிகழ்வு மற்றும் ஒரு திரும்பப்பெறுதல் செயல்பாட்டைப் பயன்படுத்துவதற்குப் பதிலாக, மற்றொரு ES6 அம்சத்தைப் பயன்படுத்துவோம் அம்பு செயல்பாடுகள் ’(() =>).

// ஹோவர் இடதுபுறத்தில் கொள்கலன் உறுப்புக்கு ஒரு வகுப்பைச் சேர்க்கிறது .addEventListener ("mouseenter", () => {container.classList.add ("மிதவை-இடது");});

11. ஒரு வகுப்பைச் சேர்த்து அகற்றவும்

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

// ஹோவர் இடதுபுறத்தில் சேர்க்கப்பட்ட வகுப்பை நீக்குகிறது .addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});

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

right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});

12. அதை பதிலளிக்க வைக்கவும்

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

@ மீடியா (அதிகபட்ச அகலம்: 800px) {h1 {எழுத்துரு-அளவு: 2rem; } .பட்டன் {அகலம்: 12rem; }

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

@ மீடியா (அதிகபட்ச உயரம்: 700px) {.பட்டன் {மேல்: 70%; }}

உங்கள் பக்கங்களைச் சேமிக்க வேண்டுமா? அவற்றை PDF களாக ஏற்றுமதி செய்து பாதுகாப்பான மேகக்கணி சேமிப்பகத்தில் சேமிக்கவும்.

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

இந்த கட்டுரை முதலில் நிகர இதழில் வெளியிடப்பட்டது வெளியீடு 305. இப்போது குழுசேரவும்.