சுட்டி கட்டுப்படுத்தப்பட்ட இடமாறு பின்னணி விளைவை உருவாக்கவும்

உள்ளடக்கம்

• 01. HTML ஆவண கட்டமைப்பை வரையறுக்கவும்
• 02. HTML உள்ளடக்கத்தை அடையாளம் காணவும்
• 03. ஒரு CSS இடமாறு கொள்கலனை உருவாக்கவும்
• 04. CSS இடமாறு அடுக்குகளை அமைக்கவும்
• 05. CSS பின்னணி அடுக்குகளைப் பயன்படுத்தவும்
• 06. ஜாவாஸ்கிரிப்ட் லேயர் துவக்கத்தை செய்யவும்
• 07. ஜாவாஸ்கிரிப்ட் சுட்டி இயக்கத்தைக் கணக்கிடுங்கள்

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

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

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

01. HTML ஆவண கட்டமைப்பை வரையறுக்கவும்

முதல் படி HTML ஆவணத்தின் கட்டமைப்பை வரையறுப்பது. இது HTML கொள்கலனைக் கொண்டுள்ளது, இது ஆவணத்தை தலை மற்றும் உடலுக்கான பிரிவுகளைக் கொண்டிருப்பதாக விவரிக்கிறது. தலை பிரிவு வெளிப்புற ஜாவாஸ்கிரிப்ட் மற்றும் CSS கோப்புகளை இணைக்கும்போது, ​​படி 2 இல் பக்க உள்ளடக்க கூறுகளை வரையறுக்க உடல் பிரிவு பயன்படுத்தப்படுகிறது.

! DOCTYPE html> html> head> title> இடமாறு பின்னணி / தலைப்பு> இணைப்பு rel = "நடைதாள்" வகை = "உரை / css" href = "style.css" /> ஸ்கிரிப்ட் src = "code.js"> / script> / head> body> * * * STEP 2 இங்கே / உடல்> / html>

02. HTML உள்ளடக்கத்தை அடையாளம் காணவும்

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

h1> வணக்கம்! / h1> div data-parallax> div> / div> div> / div> div> / div> / div>

03. ஒரு CSS இடமாறு கொள்கலனை உருவாக்கவும்

என்ற புதிய கோப்பை உருவாக்கவும் style.css. இந்த கோப்பின் முதல் படி இயல்புநிலை உள்ளடக்க நிறத்தை வெள்ளை நிறமாகவும், இடமாறு பின்னணி கொள்கலனுக்கான அமைப்புகளையும் அமைக்கிறது. இடமாறு கொள்கலனில் நிலையான பொருத்துதல் பயன்படுத்தப்படுகிறது, அது உள்ளடக்க சுருள்களின் அதே நிலையில் இருக்க அனுமதிக்கிறது. இயல்புநிலை வண்ணம் பக்க வண்ணமாகப் பயன்படுத்தப்படுகிறது, எதிர்மறை z- குறியீட்டு பக்க உள்ளடக்கத்தின் கீழ் கொள்கலன் தோன்ற அனுமதிக்கிறது.

html, உடல் {நிறம்: #fff; } [தரவு-இடமாறு] {நிலை: சரி; அகலம்: 100vw; உயரம்: 100 வி.எச்; மேல்: 0; இடது: 0; z- குறியீட்டு: -1; பின்னணி-வண்ணம்: # 000; }

04. CSS இடமாறு அடுக்குகளை அமைக்கவும்

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

[data-parallax]> * {நிலை: முழுமையானது; அகலம்: 100vw; உயரம்: 100 வி.எச்; பின்னணி-மீண்டும்: மீண்டும்; பின்னணி அளவு: 20vw 20vw; }

05. CSS பின்னணி அடுக்குகளைப் பயன்படுத்தவும்

பட அடுக்குகள் ஒவ்வொன்றும் படி 4 இல் வரையறுக்கப்பட்ட நிலை மற்றும் அளவு அமைப்புகளைப் பகிர்ந்து கொள்ளும்போது, ​​ஒவ்வொரு அடுக்கும் ஒரு தனித்துவமான படத்தைப் பயன்படுத்துகிறது. இடமாறு கொள்கலனில் உள்ள ஒவ்வொரு தனிமத்தையும் குறிக்க nth-child selector பயன்படுத்தப்படுகிறது. பின்னணி-பட பண்புக்கூறு இரண்டு வரிகளை வரைய பயன்படுகிறது, இது ஓடுகையில் ஒரு கட்ட விளைவை உருவாக்குகிறது. கீழ் அடுக்குகள் இருண்ட வண்ணங்களைப் பயன்படுத்துகின்றன.

[data-parallax]> *: nth-child (1) {பின்னணி-படம்: நேரியல்-சாய்வு (வலமிருந்து, # 333 1px, வெளிப்படையான 1px), நேரியல்-சாய்வு (கீழே, # 333 1px, வெளிப்படையான 1px); data [தரவு-இடமாறு]> *: nth-child (2) {பின்னணி-படம்: நேரியல்-சாய்வு (வலமிருந்து, # 777 1px, வெளிப்படையான 1px), நேரியல்-சாய்வு (கீழே, # 777 1px, வெளிப்படையான 1px) ; data [தரவு-இடமாறு]> *: nth-child (3) {பின்னணி-பட நேரியல்-சாய்வு (வலமிருந்து, #fff, வெளிப்படையான 1px), நேரியல்-சாய்வு (கீழே, #fff 1px, வெளிப்படையான 1px); }

06. ஜாவாஸ்கிரிப்ட் லேயர் துவக்கத்தை செய்யவும்

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

window.addEventListener ("சுமை", செயல்பாடு () container var container = ஆவணம். வினவல் தேர்வுக்குழு ("[தரவு-இடமாறு]"); var childNodes = container.children; for (var n = 0; nchildNodes.length; n ++) {childNodes [n] .setAttribute ("தரவு-குறியீட்டு", n + 1);} * * * * படி 7 இங்கே});

07. ஜாவாஸ்கிரிப்ட் சுட்டி இயக்கத்தைக் கணக்கிடுங்கள்

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

container.addEventListener ("mousemove", செயல்பாடு (e) {var elms = this.children; for (var c = 0; celms.length; c ++) {var motion = parseInt (elms [c]. getAttribute ("தரவு-குறியீட்டு ")) / 10; var x = ((e.clientX) * இயக்கம்) +" px "; var y = ((e.clientY) * இயக்கம்) +" px "; எல்ம்ஸ் [c] .style.backgroundPosition = x + "" + y;}});

இந்த கட்டுரை முதலில் படைப்பு வலை வடிவமைப்பு இதழில் வெளியிடப்பட்டது வலை வடிவமைப்பாளர். வெளியீடு 290 ஐ இப்போது வாங்கவும்.