CSS அனிமேஷன் வரம்பில் தேர்ச்சி பெறுதல்: துல்லியமான ஸ்க்ரோல்-சார்ந்த அனிமேஷன் எல்லைகள்

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

இப்போது வருகிறது CSS அனிமேஷன் வரம்பு, இது CSS ஸ்க்ரோல்-சார்ந்த அனிமேஷன்ஸ் தொகுதியில் ஒரு புரட்சிகரமான সংযোজন. இந்த அம்சம், ஒரு குறிப்பிட்ட ஸ்க்ரோல் டைம்லைனில் ஒரு அனிமேஷன் எப்போது தொடங்கி எப்போது முடிவடைய வேண்டும் என்பதற்கான துல்லியமான எல்லைகளை வரையறுக்க டெவலப்பர்களுக்கு அதிகாரம் அளிக்கிறது, அனைத்தும் நேரடியாக CSS-க்குள். இது உங்கள் வலை வடிவமைப்புகளுக்கு உயிர் கொடுப்பதற்கான ஒரு அறிவிப்பு, செயல்திறன் மிக்க மற்றும் நேர்த்தியான வழியாகும், இது முன்பு நேட்டிவ் CSS மூலம் மட்டும் சிரமமாகவோ அல்லது சாத்தியமற்றதாகவோ இருந்த ஸ்க்ரோல் விளைவுகள் மீது நுணுக்கமான கட்டுப்பாட்டை வழங்குகிறது.

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

ஸ்க்ரோல்-சார்ந்த அனிமேஷன்களின் அடிப்படைக் கருத்துக்களைப் புரிந்துகொள்ளுதல்

நாம் animation-range-ஐ ஆராய்வதற்கு முன், CSS ஸ்க்ரோல்-சார்ந்த அனிமேஷன்களின் பரந்த சூழலையும் அவை தீர்க்கும் சிக்கல்களையும் புரிந்துகொள்வது முக்கியம்.

ஸ்க்ரோல்-சார்ந்த அனிமேஷன்களின் பரிணாமம்

வரலாற்று ரீதியாக, இணையத்தில் ஸ்க்ரோல்-இணைக்கப்பட்ட விளைவுகளை அடைய கணிசமான அளவு ஜாவாஸ்கிரிப்ட் தேவைப்பட்டது. GSAP-இன் ScrollTrigger, ScrollMagic அல்லது தனிப்பயன் Intersection Observer செயலாக்கங்கள் போன்ற நூலகங்கள் டெவலப்பர்களுக்கு இன்றியமையாத கருவிகளாக மாறின. இந்த நூலகங்கள் மகத்தான நெகிழ்வுத்தன்மையை வழங்கினாலும், அவை சில சமரசங்களுடன் வந்தன:

• செயல்திறன்: ஜாவாஸ்கிரிப்ட் அடிப்படையிலான தீர்வுகள், குறிப்பாக ஸ்க்ரோல் செய்யும்போது அடிக்கடி நிலைகளை மீண்டும் கணக்கிடும் தீர்வுகள், சில நேரங்களில் ஜாங்க் அல்லது மென்மையற்ற அனிமேஷன்களுக்கு வழிவகுக்கும், குறிப்பாக குறைந்த திறன் கொண்ட சாதனங்கள் அல்லது சிக்கலான பக்கங்களில்.
• சிக்கலான தன்மை: இந்த நூலகங்களை ஒருங்கிணைத்து நிர்வகிப்பது கூடுதல் குறியீட்டு அடுக்குகளைச் சேர்த்தது, இது கற்றல் வளைவையும் பிழைகளுக்கான சாத்தியத்தையும் அதிகரித்தது.
• அறிவிப்பு மற்றும் கட்டளை: ஜாவாஸ்கிரிப்ட்டுக்கு பெரும்பாலும் ஒரு கட்டளை அணுகுமுறை தேவைப்படுகிறது ("அது நிகழும்போது இதைச் செய்"), அதேசமயம் CSS இயல்பாகவே ஒரு அறிவிப்பு பாணியை வழங்குகிறது ("இந்த உறுப்பு இந்த நிலைமைகளின் கீழ் இப்படி இருக்க வேண்டும்"). நேட்டிவ் CSS தீர்வுகள் பிந்தையவற்றுடன் சிறப்பாகப் பொருந்துகின்றன.

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

animation-timeline அறிமுகம்

CSS ஸ்க்ரோல்-சார்ந்த அனிமேஷன்களின் அடித்தளம் animation-timeline பண்பில் உள்ளது. ஒரு நிலையான நேர காலத்திற்கு பதிலாக, animation-timeline ஒரு குறிப்பிட்ட உறுப்பின் ஸ்க்ரோல் நிலையின் அடிப்படையில் ஒரு அனிமேஷனை முன்னேற அனுமதிக்கிறது. இது இரண்டு முதன்மை செயல்பாடுகளை ஏற்றுக்கொள்கிறது:

• scroll(): இந்த செயல்பாடு ஒரு ஸ்க்ரோல் முன்னேற்ற டைம்லைனை உருவாக்குகிறது. எந்த உறுப்பின் ஸ்க்ரோல் நிலை அனிமேஷனை இயக்க வேண்டும் என்பதை நீங்கள் குறிப்பிடலாம். எடுத்துக்காட்டாக, scroll(root) என்பது ஆவணத்தின் முக்கிய ஸ்க்ரோல் கொள்கலனைக் குறிக்கிறது, அதே நேரத்தில் scroll(self) என்பது உறுப்பு தானே ஸ்க்ரோல் செய்யக்கூடியதாக இருந்தால் அதைக் குறிக்கிறது. இந்த டைம்லைன் ஸ்க்ரோல் செய்யக்கூடிய பகுதியின் தொடக்கத்திலிருந்து (0%) இறுதி வரை (100%) முன்னேற்றத்தைக் கண்காணிக்கிறது.
• view(): இந்த செயல்பாடு ஒரு வியூ முன்னேற்ற டைம்லைனை உருவாக்குகிறது. முழு ஸ்க்ரோல் செய்யக்கூடிய வரம்பைக் கண்காணிக்கும் scroll() போலல்லாமல், view() அதன் ஸ்க்ரோல் கொள்கலனில் (பொதுவாக வியூபோர்ட்) ஒரு உறுப்பின் தெரிவுநிலையைக் கண்காணிக்கிறது. உறுப்பு உள்ளே நுழையும்போது, கடக்கும்போது மற்றும் வெளியேறும்போது அனிமேஷன் முன்னேறுகிறது. நீங்கள் axis (block அல்லது inline) மற்றும் target (எ.கா., cover, contain, entry, exit) ஆகியவற்றையும் குறிப்பிடலாம்.

animation-timeline அனிமேஷனை எது இயக்குகிறது என்பதைக் கூறும்போது, அந்த ஸ்க்ரோல்-சார்ந்த டைம்லைனில் அனிமேஷன் எப்போது இயங்க வேண்டும் என்பதைக் குறிப்பிடவில்லை. இங்குதான் animation-range இன்றியமையாததாகிறது.

animation-range என்றால் என்ன?

அதன் மையத்தில், animation-range உங்கள் CSS அனிமேஷன் செயல்படுத்தப்பட வேண்டிய ஸ்க்ரோல் டைம்லைனின் குறிப்பிட்ட பகுதியை வரையறுக்க உங்களை அனுமதிக்கிறது. ஒரு ஸ்க்ரோல் டைம்லைனை 0% முதல் 100% வரையிலான ஒரு பாதையாகக் கருதுங்கள். animation-range இல்லாமல், ஒரு ஸ்க்ரோல் டைம்லைனுடன் இணைக்கப்பட்ட ஒரு அனிமேஷன் பொதுவாக அந்த டைம்லைனின் முழு 0-100% வரம்பிலும் இயங்கும்.

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

animation-range இந்தத் துல்லியமான கட்டுப்பாட்டை வழங்குகிறது. இது animation-timeline மற்றும் உங்கள் @keyframes வரையறைகளுடன் இணைந்து விளைவுகளை நுணுக்கமாக ஒருங்கிணைக்க உதவுகிறது. இது அடிப்படையில் ஒரு ஜோடி மதிப்புகள் – ஒரு தொடக்கப் புள்ளி மற்றும் ஒரு இறுதிப் புள்ளி – இது ஒரு குறிப்பிட்ட அனிமேஷனுக்கான ஸ்க்ரோல் டைம்லைனின் செயலில் உள்ள பகுதியை வரையறுக்கிறது.

இதை பாரம்பரிய நேர-அடிப்படையிலான அனிமேஷன்களில் உள்ள animation-duration உடன் ஒப்பிடுங்கள். animation-duration ஒரு அனிமேஷன் எவ்வளவு நேரம் எடுக்கும் என்பதை அமைக்கிறது. ஸ்க்ரோல்-சார்ந்த அனிமேஷன்களுடன், வரையறுக்கப்பட்ட animation-range-ஐக் கடக்க எவ்வளவு ஸ்க்ரோலிங் தேவைப்படுகிறது என்பதைப் பொறுத்து "கால அளவு" திறம்பட தீர்மானிக்கப்படுகிறது. ஸ்க்ரோல் வேகமாக இருந்தால், அனிமேஷன் அதன் வரம்பிற்குள் வேகமாக இயங்கும்.

animation-range பண்புகளை ஆழமாக ஆராய்தல்

animation-range பண்பு என்பது animation-range-start மற்றும் animation-range-end ஆகியவற்றின் சுருக்கமாகும். ஒவ்வொன்றையும் அதன் சக்திவாய்ந்த மதிப்பு வரிசைகளுடன் விரிவாக ஆராய்வோம்.

animation-range-start மற்றும் animation-range-end

இந்த பண்புகள் அதனுடன் தொடர்புடைய ஸ்க்ரோல் டைம்லைனில் அனிமேஷனின் செயலில் உள்ள வரம்பின் தொடக்க மற்றும் இறுதிப் புள்ளிகளை வரையறுக்கின்றன. அவற்றை தனித்தனியாக அல்லது animation-range சுருக்கத்தைப் பயன்படுத்தி இணைத்துக் குறிப்பிடலாம்.

• animation-range-start: அனிமேஷன் தொடங்க வேண்டிய ஸ்க்ரோல் டைம்லைனின் புள்ளியை வரையறுக்கிறது.
• animation-range-end: அனிமேஷன் முடிவடைய வேண்டிய ஸ்க்ரோல் டைம்லைனின் புள்ளியை வரையறுக்கிறது.

இந்த பண்புகளுக்கு வழங்கப்படும் மதிப்புகள் தேர்ந்தெடுக்கப்பட்ட animation-timeline-ஐப் பொறுத்தது. ஒரு scroll() டைம்லைனுக்கு, இது பொதுவாக கொள்கலனின் ஸ்க்ரோல் முன்னேற்றத்தைக் குறிக்கிறது. ஒரு view() டைம்லைனுக்கு, இது வியூபோர்ட்டில் இருந்து உறுப்பின் நுழைவு/வெளியேற்றத்தைக் குறிக்கிறது.

சுருக்கமான animation-range

சுருக்கமான பண்பு தொடக்க மற்றும் இறுதிப் புள்ளிகளை சுருக்கமாக அமைக்க உங்களை அனுமதிக்கிறது:

.element {\n  animation-range:  [  ];\n}

ஒரே ஒரு மதிப்பு வழங்கப்பட்டால், அது animation-range-start மற்றும் animation-range-end இரண்டையும் அதே மதிப்புக்கு அமைக்கிறது, அதாவது அனிமேஷன் அந்தப் புள்ளியில் உடனடியாக இயங்கும் (இருப்பினும் தொடர்ச்சியான அனிமேஷன்களுக்கு இது பொதுவாகப் பயன்படாது).

animation-range-க்கான ஏற்றுக்கொள்ளப்பட்ட மதிப்புகள்

இங்குதான் animation-range உண்மையிலேயே பிரகாசிக்கிறது, இது ஒரு செழிப்பான முக்கிய சொற்கள் மற்றும் துல்லியமான அளவீடுகளை வழங்குகிறது:

1. சதவீதங்கள் (எ.கா., 20%, 80%)

சதவீதங்கள் மொத்த ஸ்க்ரோல் டைம்லைனின் நீளத்தின் சதவீதமாக அனிமேஷனின் தொடக்க மற்றும் இறுதிப் புள்ளிகளை வரையறுக்கின்றன. இது குறிப்பாக scroll() டைம்லைன்களுக்கு உள்ளுணர்வாக இருக்கிறது.

• எடுத்துக்காட்டு: பயனர் ஒரு பக்கத்தின் நடுபகுதியைக் கடந்து ஸ்க்ரோல் செய்யும்போது ஒரு உறுப்பை மங்கலாகத் தோற்றுவிக்கும் அனிமேஷன்.

.fade-in-middle {\n  animation: fadeIn 1s linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 30% 70%; /* 30% ஸ்க்ரோலில் தொடங்குகிறது, 70% ஸ்க்ரோலில் முடிகிறது */\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}

இந்த எடுத்துக்காட்டில், ரூட் ஸ்க்ரோல் கொள்கலனின் ஸ்க்ரோல் நிலை அதன் மொத்த ஸ்க்ரோல் உயரத்தின் 30% மற்றும் 70% க்கு இடையில் இருக்கும்போது மட்டுமே fadeIn அனிமேஷன் இயங்கும். பயனர் வேகமாக ஸ்க்ரோல் செய்தால், அனிமேஷன் அந்த வரம்பிற்குள் வேகமாக நிறைவடையும்; மெதுவாக ஸ்க்ரோல் செய்தால், அது படிப்படியாக இயங்கும்.

2. நீளங்கள் (எ.கா., 200px, 10em)

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

• எடுத்துக்காட்டு: கிடைமட்டமாக ஸ்க்ரோல் செய்யும் படத்தொகுப்பில் முதல் 500px ஸ்க்ரோலில் இயங்கும் ஒரு அனிமேஷன்.

.gallery-caption {\n  animation: slideCaption 1s linear forwards;\n  animation-timeline: scroll(self horizontal);\n  animation-range: 0px 500px;\n}\n\n@keyframes slideCaption {\n  from { transform: translateX(100px); opacity: 0; }\n  to { transform: translateX(0); opacity: 1; }\n}

3. view() டைம்லைன்களுக்கான முக்கிய சொற்கள்

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

• entry: உறுப்பின் ஸ்க்ரோல் போர்ட் எல்லை அதன் உள்ளடக்க தொகுதியின் entry புள்ளியைக் கடக்கும்போது அனிமேஷன் வரம்பு தொடங்குகிறது. இது பொதுவாக உறுப்பின் முதல் விளிம்பு வியூபோர்ட்டில் தோன்றத் தொடங்கும் போது நிகழ்கிறது.
• exit: உறுப்பின் ஸ்க்ரோல் போர்ட் எல்லை அதன் உள்ளடக்க தொகுதியின் exit புள்ளியைக் கடக்கும்போது அனிமேஷன் வரம்பு முடிகிறது. இது பொதுவாக உறுப்பின் கடைசி விளிம்பு வியூபோர்ட்டில் இருந்து மறையும் போது நிகழ்கிறது.
• cover: உறுப்பு அதன் ஸ்க்ரோல் கொள்கலன் அல்லது வியூபோர்ட்டை *மூடும்* முழு காலத்திலும் அனிமேஷன் இயங்கும். உறுப்பின் முன்னணி விளிம்பு ஸ்க்ரோல்போர்ட்டில் நுழையும்போது தொடங்கி அதன் பின்தொடரும் விளிம்பு வெளியேறும்போது முடிகிறது. இது பொதுவாக ஒரு உறுப்பு-காட்சியில்-இருக்கும் அனிமேஷனுக்கு இயல்புநிலை அல்லது மிகவும் உள்ளுணர்வு நடத்தை.
• contain: உறுப்பு அதன் ஸ்க்ரோல் கொள்கலன்/வியூபோர்ட்டுக்குள் *முழுமையாக அடங்கியிருக்கும்* போது அனிமேஷன் இயங்கும். உறுப்பு முழுமையாகத் தெரியும் போது தொடங்கி அதன் எந்தப் பகுதியும் வெளியேறத் தொடங்கும் போது முடிகிறது.
• start: entry-ஐப் போன்றது, ஆனால் குறிப்பாக உறுப்புடன் தொடர்புடைய ஸ்க்ரோல்போர்ட்டின் தொடக்க விளிம்பைக் குறிக்கிறது.
• end: exit-ஐப் போன்றது, ஆனால் குறிப்பாக உறுப்புடன் தொடர்புடைய ஸ்க்ரோல்போர்ட்டின் இறுதி விளிம்பைக் குறிக்கிறது.

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

• எடுத்துக்காட்டு: ஒரு ஸ்டிக்கி நேவிகேஷன் பார், ஹீரோ பகுதியைக் "கவர்" செய்யும்போது நிறம் மாறுகிறது.

.hero-section {\n  height: 500px;\n  /* ... மற்ற ஸ்டைல்கள் ... */\n}\n\n.sticky-nav {\n  position: sticky;\n  top: 0;\n  animation: navColorChange 1s linear forwards;\n  animation-timeline: view(); /* ஸ்க்ரோல்போர்ட்டில் அதன் சொந்த வியூவைப் பொறுத்தது */\n  animation-range: cover;\n}\n\n@keyframes navColorChange {\n  0% { background-color: transparent; color: white; }\n  100% { background-color: #333; color: gold; }\n}

இந்தச் சூழலில், .sticky-nav உறுப்பு (அல்லது அதன் view() டைம்லைன் இணைக்கப்பட்டுள்ள உறுப்பு) வியூபோர்ட்டை மறைக்கும்போது, navColorChange அனிமேஷன் முன்னேறுகிறது.

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

.image-wrapper {\n  animation: scaleOnView 1s linear forwards;\n  animation-timeline: view();\n  animation-range: entry 20% cover 80%; /* உறுப்பின் 20% தெரியும் போது தொடங்கி, உறுப்பின் 80% வியூவை மறைக்கும் வரை இயங்கும் */\n}\n\n@keyframes scaleOnView {\n  0% { transform: scale(1); }\n  50% { transform: scale(1.05); } /* தோராயமாக மையத்தில் இருக்கும்போது அதிகபட்ச அளவு */\n  100% { transform: scale(1); }\n}

இது animation-range எப்படி view() டைம்லைனின் பகுதிகளை ஒரு @keyframes அனிமேஷனின் வெவ்வேறு நிலைகளுடன் இணைக்க முடியும் என்பதை விளக்குகிறது.

4. normal (இயல்புநிலை)

normal என்ற முக்கிய சொல் animation-range-இன் இயல்புநிலை மதிப்பாகும். இது தேர்ந்தெடுக்கப்பட்ட ஸ்க்ரோல் டைம்லைனின் முழு நீளத்திலும் (0% முதல் 100% வரை) அனிமேஷன் இயங்க வேண்டும் என்பதைக் குறிக்கிறது.

இது பெரும்பாலும் பொருத்தமானதாக இருந்தாலும், normal சிக்கலான விளைவுகளுக்குத் தேவையான துல்லியமான நேரத்தை வழங்காது, அதனால்தான் animation-range மேலும் நுணுக்கமான கட்டுப்பாட்டை வழங்குகிறது.

நடைமுறைப் பயன்பாடுகள் மற்றும் பயன்பாட்டு வழக்குகள்

animation-range-இன் சக்தி, அதிநவீன, ஊடாடும் ஸ்க்ரோல் விளைவுகளை குறைந்த முயற்சியிலும் அதிகபட்ச செயல்திறனிலும் உயிர்ப்பிக்கும் திறனில் உள்ளது. உலக அளவில், இ-காமர்ஸ் தளங்கள் முதல் கல்வி தளங்கள் வரை பயனர் அனுபவத்தை மேம்படுத்தக்கூடிய சில கட்டாய பயன்பாட்டு வழக்குகளை ஆராய்வோம்.

பாராலாக்ஸ் ஸ்க்ரோலிங் விளைவுகள்

பாராலாக்ஸ், பின்னணி உள்ளடக்கம் முன்புற உள்ளடக்கத்தை விட ভিন্ন வேகத்தில் நகரும்போது, ஒரு ஆழத்தின் மாயையை உருவாக்குகிறது. பாரம்பரியமாக, இது ஜாவாஸ்கிரிப்ட்டுக்கு ஒரு முதன்மை தேர்வாக இருந்தது. animation-range உடன், இது மிகவும் எளிமையாகிறது.

ஒரு பயண வலைத்தளம் இடங்களைக் காண்பிப்பதாகக் கற்பனை செய்து பாருங்கள். ஒரு பயனர் ஸ்க்ரோல் செய்யும்போது, ஒரு நகரக் காட்சியின் பின்னணிப் படம் மெதுவாக நகரலாம், அதே நேரத்தில் உரை அல்லது பொத்தான்கள் போன்ற முன்புற கூறுகள் சாதாரண வேகத்தில் நகரும். ஒரு scroll(root) டைம்லைனை வரையறுத்து, ஒரு வரையறுக்கப்பட்ட animation-range உடன் transform: translateY() அனிமேஷனைப் பயன்படுத்துவதன் மூலம், சிக்கலான கணக்கீடுகள் இல்லாமல் மென்மையான பாராலாக்ஸை அடையலாம்.

.parallax-background {\n  animation: moveBackground var(--parallax-speed) linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 0% 100%; /* அல்லது ஒரு குறிப்பிட்ட பகுதி வரம்பு */\n}\n\n@keyframes moveBackground {\n  from { transform: translateY(0); }\n  to { transform: translateY(-100px); } /* முழு ஸ்க்ரோலிலும் 100px மேலே நகர்கிறது */\n}

animation-range பாராலாக்ஸ் விளைவு ஆவணத்தின் ஒட்டுமொத்த ஸ்க்ரோலுடன் ஒத்திசைக்கப்படுவதை உறுதிசெய்கிறது, இது ஒரு திரவ மற்றும் ஆழ்ந்த அனுபவத்தை வழங்குகிறது.

உறுப்பு வெளிப்படுத்தும் அனிமேஷன்கள்

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

ஒரு ஆன்லைன் பாடநெறி தளத்தைக் கருத்தில் கொள்ளுங்கள்: ஒரு பயனர் ஒரு பாடத்தின் வழியாக ஸ்க்ரோல் செய்யும்போது, ஒவ்வொரு புதிய பகுதி தலைப்பு அல்லது படம் அழகாக மங்கி, பார்வையில் சரியலாம். animation-timeline: view() உடன் animation-range: entry 0% cover 50%-ஐப் பயன்படுத்தி, ஒரு உறுப்பு வியூபோர்ட்டில் நுழைந்து அதன் நடுப்புள்ளியை அடையும்போது, முழுமையாக ஒளிபுகாவிலிருந்து முழுமையாக ஒளிபுகா வரை மங்குவதை நீங்கள் ஆணையிடலாம்.

.reveal-item {\n  opacity: 0;\n  transform: translateY(50px);\n  animation: revealItem 1s linear forwards;\n  animation-timeline: view();\n  animation-range: entry 10% cover 50%; /* 10% தெரியும் போது தொடங்கி, 50% தெரியும் போது முடிகிறது */\n}\n\n@keyframes revealItem {\n  to { opacity: 1; transform: translateY(0); }\n}

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

முன்னேற்ற குறிகாட்டிகள்

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

பக்கத்தின் மேலே ஒரு மெல்லிய பட்டியை உருவாக்கி, அதன் அகலத்தை ஆவணத்தின் ஸ்க்ரோல் முன்னேற்றத்துடன் இணைக்கலாம். animation-timeline: scroll(root) மற்றும் animation-range: 0% 100% உடன், பயனர் பக்கத்தின் மேலிருந்து கீழாக ஸ்க்ரோல் செய்யும்போது பட்டையின் அகலம் 0% முதல் 100% வரை விரிவடையும்.

.progress-bar {\n  position: fixed;\n  top: 0; left: 0;\n  height: 5px;\n  background-color: #007bff;\n  width: 0%; /* ஆரம்ப நிலை */\n  animation: fillProgress 1s linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 0% 100%;\n  z-index: 1000;\n}\n\n@keyframes fillProgress {\n  to { width: 100%; }\n}

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

சிக்கலான பல-நிலை அனிமேஷன்கள்

animation-range உண்மையில் சிக்கலான வரிசைகளை ஒருங்கிணைக்கும்போது பிரகாசிக்கிறது, அங்கு வெவ்வேறு அனிமேஷன்கள் ஒரு ஒற்றை ஸ்க்ரோல் டைம்லைனின் குறிப்பிட்ட, ஒன்றோடொன்று பொருந்தாத பிரிவுகளில் இயங்க வேண்டும்.

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

• மைல்கல் 1: ஒரு கிராஃபிக் சுழன்று விரிவடைகிறது (animation-range: 10% 20%)
• மைல்கல் 2: ஒரு டைம்லைன் உறுப்பு பக்கத்திலிருந்து சரியுகிறது (animation-range: 30% 40%)
• மைல்கல் 3: ஒரு மேற்கோள் குமிழி தோன்றுகிறது (animation-range: 50% 60%)

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

.milestone-1-graphic {\n  animation: rotateExpand 1s linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 10% 20%;\n}\n.milestone-2-timeline {\n  animation: slideIn 1s linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 30% 40%;\n}\n/* ... மற்றும் பல ... */\n

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

ஊடாடும் கதைசொல்லல்

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

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

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

உங்கள் ஸ்க்ரோல்-சார்ந்த அனிமேஷன்களை அமைத்தல்

animation-range உடன் CSS ஸ்க்ரோல்-சார்ந்த அனிமேஷன்களை செயல்படுத்துவது சில முக்கிய படிகளை உள்ளடக்கியது. அத்தியாவசிய கூறுகளைப் பார்ப்போம்.

scroll() மற்றும் view() டைம்லைன்கள் மீண்டும் பார்க்கப்பட்டது

உங்கள் முதல் முடிவு, உங்கள் அனிமேஷனை எந்த ஸ்க்ரோல் டைம்லைனுடன் பிணைப்பது என்பதுதான்:

• scroll(): இது ஒட்டுமொத்த ஆவண ஸ்க்ரோல் அல்லது ஒரு குறிப்பிட்ட கொள்கலனின் ஸ்க்ரோலுக்கு பதிலளிக்கும் அனிமேஷன்களுக்கு ஏற்றது.
• தொடரியல்: scroll([ || ]?)
  எடுத்துக்காட்டாக, முக்கிய ஆவண ஸ்க்ரோலுக்கு scroll(root), உறுப்பின் சொந்த ஸ்க்ரோல் கொள்கலனுக்கு scroll(self), அல்லது ஒரு தனிப்பயன் உறுப்பின் செங்குத்து ஸ்க்ரோலுக்கு scroll(my-element-id y).
• view(): இது அதன் ஸ்க்ரோல் கொள்கலனில் (பொதுவாக வியூபோர்ட்) ஒரு உறுப்பின் தெரிவுநிலையால் தூண்டப்படும் அனிமேஷன்களுக்கு சிறந்தது.
• தொடரியல்: view([ || ]?)
  எடுத்துக்காட்டாக, இயல்புநிலை வியூபோர்ட் டைம்லைனுக்கு view(), அல்லது பிளாக்-அச்சு தெரிவுநிலையுடன் இணைக்கப்பட்ட அனிமேஷன்களுக்கு view(block). நீங்கள் பெற்றோர்/மூதாதையரில் view-timeline-name-ஐப் பயன்படுத்தி ஒரு வியூ-டைம்லைனுக்கு பெயரிடலாம்.

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

@keyframes உடன் அனிமேஷனை வரையறுத்தல்

உங்கள் அனிமேஷனின் காட்சி மாற்றங்கள் நிலையான @keyframes விதிகளைப் பயன்படுத்தி வரையறுக்கப்படுகின்றன. இந்த கீஃப்ரேம்கள் ஸ்க்ரோல் டைம்லைனுக்கு எப்படிப் பொருந்துகின்றன என்பதுதான் வேறுபாடு.

ஒரு அனிமேஷன் ஒரு ஸ்க்ரோல் டைம்லைனுடன் இணைக்கப்படும்போது, @keyframes-இல் உள்ள சதவீதங்கள் (0% முதல் 100% வரை) இனி நேரத்தைக் குறிக்காது. அதற்கு பதிலாக, அவை குறிப்பிட்ட animation-range வழியாக முன்னேற்றத்தைக் குறிக்கின்றன. உங்கள் animation-range 20% 80% ஆக இருந்தால், உங்கள் @keyframes-இல் 0% என்பது ஸ்க்ரோல் டைம்லைனின் 20%-க்கும், உங்கள் @keyframes-இல் 100% என்பது ஸ்க்ரோல் டைம்லைனின் 80%-க்கும் ஒத்துள்ளது.

இது ஒரு சக்திவாய்ந்த கருத்தியல் மாற்றம்: உங்கள் கீஃப்ரேம்கள் அனிமேஷனின் முழு வரிசையையும் வரையறுக்கின்றன, மேலும் animation-range அந்த வரிசையை ஒரு குறிப்பிட்ட ஸ்க்ரோல் பிரிவில் வெட்டி வரைபடமாக்குகிறது.

animation-timeline மற்றும் animation-range-ஐப் பயன்படுத்துதல்

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

HTML கட்டமைப்பு:

\n  \n  
Hello World
\n  \n

CSS ஸ்டைலிங்:

.animated-element {\n  height: 200px;\n  width: 200px;\n  background-color: lightblue;\n  margin: 500px auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 1.5em;\n  border-radius: 10px;\n  box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n\n  /* ஸ்க்ரோல்-சார்ந்த அனிமேஷனுக்கான முக்கிய பண்புகள் */\n  animation: scaleOnView 1s linear forwards;\n  animation-timeline: view(); /* இந்த உறுப்பு பார்வையில் நுழையும்/வெளியேறும்போது அனிமேஷன் முன்னேறுகிறது */\n  animation-range: entry 20% cover 80%; /* உறுப்பின் 20% தெரியும் போது தொடங்கி, அதன் 80% வியூவை மறைக்கும் வரை அனிமேஷன் இயங்கும் */\n}\n\n@keyframes scaleOnView {\n  0% { transform: scale(0.8); opacity: 0; }\n  50% { transform: scale(1.1); opacity: 1; } /* செயலில் உள்ள வரம்பில் பாதியளவு இருக்கும்போது உச்ச அளவு மற்றும் ஒளிபுகாநிலை */\n  100% { transform: scale(0.9); opacity: 1; }\n}

இந்த எடுத்துக்காட்டில்:

• animation-timeline: view() அனிமேஷன் வியூபோர்ட்டில் .animated-element-இன் தெரிவுநிலையால் இயக்கப்படுவதை உறுதி செய்கிறது.
• animation-range: entry 20% cover 80% அனிமேஷனின் செயலில் உள்ள மண்டலத்தை வரையறுக்கிறது: இது உறுப்பு வியூபோர்ட்டில் 20% இருக்கும்போது (அதன் முன்னணி விளிம்பிலிருந்து) தொடங்கி, உறுப்பின் 80% வியூபோர்ட்டை மறைக்கும் வரை (அதன் முன்னணி விளிம்பிலிருந்து) இயங்கும்.
• @keyframes scaleOnView மாற்றத்தை வரையறுக்கிறது. கீஃப்ரேம்களின் 0% வியூ டைம்லைனின் entry 20%-க்கும், கீஃப்ரேம்களின் 50% entry 20% முதல் cover 80% வரம்பின் நடுப்புள்ளிக்கும், 100% cover 80%-க்கும் பொருந்துகிறது.
• animation-duration: 1s மற்றும் animation-fill-mode: forwards இன்னும் பொருத்தமானவை. கால அளவு ஒரு "வேகப் பெருக்கி"யாக செயல்படுகிறது; ஒரு நீண்ட கால அளவு ஒரு குறிப்பிட்ட ஸ்க்ரோல் தூரத்திற்கு அதன் வரம்பிற்குள் அனிமேஷன் மெதுவாகத் தோன்றும். forwards அனிமேஷனின் இறுதி நிலை நீடிப்பதை உறுதி செய்கிறது.

இந்த அமைப்பு ஸ்க்ரோல்-அடிப்படையிலான அனிமேஷன்களை முற்றிலும் CSS-இல் கட்டுப்படுத்த நம்பமுடியாத சக்திவாய்ந்த மற்றும் உள்ளுணர்வு வழியை வழங்குகிறது.

மேம்பட்ட நுட்பங்கள் மற்றும் பரிசீலனைகள்

அடிப்படைகளுக்கு அப்பால், animation-range மற்ற CSS அனிமேஷன் பண்புகளுடன் தடையின்றி ஒருங்கிணைக்கிறது மற்றும் செயல்திறன் மற்றும் பொருந்தக்கூடிய தன்மைக்கு கவனம் தேவை.

animation-range-ஐ animation-duration மற்றும் animation-fill-mode உடன் இணைத்தல்

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

• ஒரு நீண்ட animation-duration என்பது கொடுக்கப்பட்ட animation-range-இல் அனிமேஷன் மெதுவாக இயங்குவது போல் தோன்றும்.
• ஒரு குறுகிய animation-duration என்பது கொடுக்கப்பட்ட animation-range-இல் அனிமேஷன் வேகமாக இயங்குவது போல் தோன்றும்.

animation-fill-mode-ம் முக்கியமானதாக உள்ளது. செயலில் உள்ள animation-range கடந்து சென்றவுடன் அனிமேஷனின் இறுதி நிலை நீடிப்பதை உறுதி செய்ய forwards பொதுவாகப் பயன்படுத்தப்படுகிறது. அது இல்லாமல், பயனர் வரையறுக்கப்பட்ட வரம்பிற்கு வெளியே ஸ்க்ரோல் செய்தவுடன் உறுப்பு அதன் அசல் நிலைக்குத் திரும்பக்கூடும்.

உதாரணமாக, ஒரு உறுப்பு வியூபோர்ட்டில் நுழைந்த பிறகு மங்கலாகவே இருக்க வேண்டுமென்றால், animation-fill-mode: forwards அவசியம்.

ஒரு உறுப்பில் பல அனிமேஷன்களைக் கையாளுதல்

ஒரு ஒற்றை உறுப்புக்கு பல ஸ்க்ரோல்-சார்ந்த அனிமேஷன்களை நீங்கள் பயன்படுத்தலாம். இது animation-name, animation-timeline, மற்றும் animation-range (மற்றும் பிற அனிமேஷன் பண்புகள்) ஆகியவற்றிற்கு கமாவால் பிரிக்கப்பட்ட மதிப்புகளின் பட்டியலை வழங்குவதன் மூலம் அடையப்படுகிறது.

எடுத்துக்காட்டாக, ஒரு உறுப்பு பார்வையில் நுழையும்போது ஒரே நேரத்தில் மங்கலாகத் தோன்றி, பார்வையை மறைக்கும்போது சுழலலாம்:

.multi-animated-item {\n  animation-name: fadeIn, rotateItem;\n  animation-duration: 1s, 2s;\n  animation-timeline: view(), view();\n  animation-range: entry 0% cover 50%, cover;\n  animation-fill-mode: forwards, forwards;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes rotateItem {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}

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

செயல்திறன் தாக்கங்கள்

CSS ஸ்க்ரோல்-சார்ந்த அனிமேஷன்களின் முதன்மை நன்மைகளில் ஒன்று, animation-range உட்பட, அவற்றின் உள்ளார்ந்த செயல்திறன் நன்மைகள். ஸ்க்ரோல்-இணைப்பு தர்க்கத்தை ஜாவாஸ்கிரிப்ட்டில் இருந்து உலாவியின் ரெண்டரிங் இயந்திரத்திற்கு மாற்றுவதன் மூலம்:

• பிரதான த்ரெட் ஆஃப்லோடிங்: அனிமேஷன்கள் கம்போசிட்டர் த்ரெட்டில் இயங்க முடியும், இது மற்ற பணிகளுக்காக பிரதான ஜாவாஸ்கிரிப்ட் த்ரெட்டை விடுவிக்கிறது, இது மென்மையான ஊடாடல்களுக்கு வழிவகுக்கிறது.
• உகந்த ரெண்டரிங்: உலாவிகள் CSS அனிமேஷன்கள் மற்றும் மாற்றங்களுக்கு மிகவும் உகந்தவை, பெரும்பாலும் GPU முடுக்கத்தைப் பயன்படுத்துகின்றன.
• குறைக்கப்பட்ட ஜாங்க்: ஸ்க்ரோல் நிகழ்வுகளுக்கு ஜாவாஸ்கிரிப்ட்டைச் சார்ந்து இருப்பது குறைவாக இருப்பதால், ஸ்க்ரோல் நிகழ்வு கேட்பவர்கள் அதிக சுமையுடன் இருக்கும்போது ஏற்படக்கூடிய "ஜாங்க்" (திணறல் அல்லது துண்டிக்கப்படுதல்) கணிசமாகக் குறையும்.

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

உலாவி இணக்கத்தன்மை

2023-இன் பிற்பகுதி / 2024-இன் முற்பகுதியில், CSS ஸ்க்ரோல்-சார்ந்த அனிமேஷன்கள் (animation-timeline மற்றும் animation-range உட்பட) முதன்மையாக குரோமியம் அடிப்படையிலான உலாவிகளில் (குரோம், எட்ஜ், ஓபரா, பிரேவ், முதலியன) ஆதரிக்கப்படுகின்றன.

தற்போதைய நிலை:

• Chrome: முழுமையாக ஆதரிக்கப்படுகிறது (Chrome 115 முதல்)
• Edge: முழுமையாக ஆதரிக்கப்படுகிறது
• Firefox: வளர்ச்சியில் / கொடிகளின் பின்னால்
• Safari: வளர்ச்சியில் / கொடிகளின் பின்னால்

காப்பு உத்திகள்:

• அம்ச வினவல்கள் (@supports): ஸ்க்ரோல்-சார்ந்த அனிமேஷன்களை ஆதரிக்கப்படும்போது மட்டும் பயன்படுத்த @supports (animation-timeline: scroll())-ஐப் பயன்படுத்தவும். ஆதரிக்கப்படாத உலாவிகளுக்கு எளிமையான, அனிமேஷன் செய்யப்படாத அல்லது ஜாவாஸ்கிரிப்ட் அடிப்படையிலான காப்பை வழங்கவும்.
• முற்போக்கான மேம்பாடு: இந்த மேம்பட்ட அனிமேஷன்கள் இல்லாவிட்டாலும் உங்கள் உள்ளடக்கம் முழுமையாக அணுகக்கூடியதாகவும் புரியக்கூடியதாகவும் இருக்குமாறு வடிவமைக்கவும். அனிமேஷன்கள் பயனர் அனுபவத்தை மேம்படுத்த வேண்டுமே தவிர, அதற்கு முக்கியமானதாக இருக்கக்கூடாது.

வலைத் தரங்களின் விரைவான பரிணாம வளர்ச்சியைக் கருத்தில் கொண்டு, எதிர்காலத்தில் பரந்த உலாவி ஆதரவை எதிர்பார்க்கலாம். Can I Use... போன்ற வளங்களைக் கண்காணிப்பது சமீபத்திய இணக்கத்தன்மை தகவல்களுக்குப் பரிந்துரைக்கப்படுகிறது.

ஸ்க்ரோல்-சார்ந்த அனிமேஷன்களைப் பிழைத்திருத்தம் செய்தல்

இந்த அனிமேஷன்களைப் பிழைத்திருத்தம் செய்வது ஒரு புதிய அனுபவமாக இருக்கலாம். நவீன உலாவி டெவலப்பர் கருவிகள், குறிப்பாக குரோமியத்தில், சிறந்த ஆதரவை வழங்க विकसितமாகி வருகின்றன:

• அனிமேஷன்கள் தாவல்: குரோம் டெவ்டூல்ஸில், "Animations" தாவல் விலைமதிப்பற்றது. இது அனைத்து செயலில் உள்ள அனிமேஷன்களையும் காட்டுகிறது, அவற்றை இடைநிறுத்தவும், மீண்டும் இயக்கவும், மற்றும் ஸ்க்ரப் செய்யவும் உங்களை அனுமதிக்கிறது. ஸ்க்ரோல்-சார்ந்த அனிமேஷன்களுக்கு, இது பெரும்பாலும் ஸ்க்ரோல் டைம்லைன் மற்றும் செயலில் உள்ள வரம்பின் ஒரு காட்சிப் பிரதிநிதித்துவத்தை வழங்குகிறது.
• கூறுகள் பேனல்: "Elements" பேனலில் உள்ள உறுப்பை ஆய்வு செய்து, "Styles" தாவலைப் பார்ப்பது பயன்படுத்தப்பட்ட animation-timeline மற்றும் animation-range பண்புகளைக் காண்பிக்கும்.
• ஸ்க்ரோல்-டைம்லைன் மேலடுக்கு: சில உலாவிகள் ஸ்க்ரோல் டைம்லைனை நேரடியாகப் பக்கத்தில் காட்சிப்படுத்த ஒரு சோதனை மேலடுக்கை வழங்குகின்றன, இது ஸ்க்ரோல் நிலை அனிமேஷன் முன்னேற்றத்துடன் எப்படிப் பொருந்துகிறது என்பதைப் புரிந்துகொள்ள உதவுகிறது.

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

உலகளாவிய செயலாக்கத்திற்கான சிறந்த நடைமுறைகள்

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

அணுகல்தன்மை பரிசீலனைகள்

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

• prefers-reduced-motion மீடியா வினவல்: பயனர் விருப்பங்களை மதிக்கவும். தங்கள் இயக்க முறைமை அமைப்புகளில் "இயக்கத்தைக் குறை" என்பதை இயக்கியுள்ள பயனர்களுக்கு, உங்கள் அனிமேஷன்கள் கணிசமாகக் குறைக்கப்பட வேண்டும் அல்லது முழுமையாக அகற்றப்பட வேண்டும்.

@media (prefers-reduced-motion) {\n  .animated-element {\n    animation: none !important; /* அனிமேஷன்களை முடக்கு */\n    transform: none !important; /* மாற்றங்களை மீட்டமை */\n    opacity: 1 !important; /* தெரிவுநிலையை உறுதி செய் */\n  }\n}

இது ஸ்க்ரோல்-சார்ந்தவை உட்பட அனைத்து அனிமேஷன்களுக்கும் ஒரு முக்கியமான அணுகல்தன்மை சிறந்த நடைமுறையாகும்.

• அதிகப்படியான இயக்கத்தைத் தவிர்க்கவும்: இயக்கப்பட்டிருந்தாலும் கூட, கவனச்சிதறல் அல்லது சங்கடத்தை ஏற்படுத்தக்கூடிய அதிர்ச்சியூட்டும், வேகமான அல்லது பெரிய அளவிலான இயக்கங்களைத் தவிர்க்கவும். நுட்பமான அனிமேஷன்கள் பெரும்பாலும் மிகவும் பயனுள்ளதாக இருக்கும்.
• படிக்கக்கூடிய தன்மையை உறுதிப்படுத்தவும்: அனிமேஷன் முழுவதும் உரை மற்றும் முக்கியமான உள்ளடக்கம் படிக்கக்கூடியதாக இருப்பதை உறுதிப்படுத்தவும். உரையை படிக்க முடியாததாக மாற்றும் அல்லது மினுமினுப்பை ஏற்படுத்தும் வகையில் அனிமேட் செய்வதைத் தவிர்க்கவும்.

பதிலளிக்கக்கூடிய வடிவமைப்பு

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

• வியூபோர்ட் அடிப்படையிலான மதிப்புகள்: கீஃப்ரேம்களுக்குள் மாற்றங்கள் அல்லது நிலைப்படுத்தலுக்கு சதவீதங்கள், vw, vh போன்ற சார்பு அலகுகளைப் பயன்படுத்துவது அனிமேஷன்கள் அழகாக அளவிட உதவும்.
• அனிமேஷன் வரம்பிற்கான மீடியா வினவல்கள்: திரை அளவைப் பொறுத்து நீங்கள் வெவ்வேறு animation-range மதிப்புகள் அல்லது முற்றிலும் வேறுபட்ட அனிமேஷன்களை விரும்பலாம். உதாரணமாக, ஒரு சிக்கலான ஸ்க்ரோல்-சார்ந்த கதை, திரை இடம் மற்றும் செயல்திறன் மிகவும் கட்டுப்படுத்தப்பட்ட மொபைல் சாதனங்களுக்கு எளிமைப்படுத்தப்படலாம்.
• சாதனங்களில் சோதனை: செயல்திறன் தடைகள் அல்லது தளவமைப்பு சிக்கல்களைப் பிடிக்க உங்கள் ஸ்க்ரோல்-சார்ந்த அனிமேஷன்களை எப்போதும் உண்மையான சாதனங்களில் அல்லது டெவ்டூல்ஸில் வலுவான சாதன எமுலேஷனைப் பயன்படுத்தி சோதிக்கவும்.

முற்போக்கான மேம்பாடு

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

இதன் பொருள், ஜாவாஸ்கிரிப்ட் அல்லது மேம்பட்ட CSS அனிமேஷன்கள் ஏற்றப்படாவிட்டாலும் உள்ளடக்கம் சொற்பொருள் ரீதியாக சரியாகவும், பார்வைக்கு கவர்ச்சியாகவும் இருக்கும் வகையில் உங்கள் HTML மற்றும் CSS-ஐ கட்டமைப்பதாகும்.

செயல்திறன் மேம்படுத்தல்

நேட்டிவ் CSS அனிமேஷன்கள் செயல்திறன் மிக்கவை என்றாலும், தவறான தேர்வுகள் இன்னும் சிக்கல்களுக்கு வழிவகுக்கும்:

• transform மற்றும் opacity-ஐ அனிமேட் செய்யவும்: இந்த பண்புகள் அனிமேஷனுக்கு ஏற்றவை, ஏனெனில் அவை பெரும்பாலும் கம்போசிட்டரால் கையாளப்படலாம், தளவமைப்பு மற்றும் பெயிண்ட் வேலையைத் தவிர்க்கலாம். width, height, margin, padding, top, left, right, bottom போன்ற பண்புகளை அனிமேட் செய்வதைத் தவிர்க்கவும், ஏனெனில் இவை விலையுயர்ந்த தளவமைப்பு மறு கணக்கீடுகளைத் தூண்டலாம்.
• சிக்கலான விளைவுகளைக் கட்டுப்படுத்தவும்: கவர்ச்சியாக இருந்தாலும், ஒரே நேரத்தில் பல உறுப்புகளில் பல, மிகவும் சிக்கலான ஸ்க்ரோல்-சார்ந்த அனிமேஷன்களைப் பயன்படுத்துவதைத் தவிர்க்கவும். காட்சி செழுமைக்கும் செயல்திறனுக்கும் இடையே ஒரு சமநிலையைக் கண்டறியவும்.
• வன்பொருள் முடுக்கத்தைப் பயன்படுத்தவும்: transform: translateZ(0) போன்ற பண்புகள் (நவீன உலாவிகள் மற்றும் transform அனிமேஷன்களுடன் இப்போது வெளிப்படையாகத் தேவையில்லை என்றாலும்) சில சமயங்களில் உறுப்புகளை அவற்றின் சொந்த கலப்பு அடுக்குகளுக்குத் தள்ள உதவலாம், இது செயல்திறனை மேலும் அதிகரிக்கிறது.

நிஜ உலக எடுத்துக்காட்டுகள் மற்றும் உத்வேகங்கள்

உங்கள் புரிதலை மேலும் வலுப்படுத்தவும், உங்கள் அடுத்த திட்டத்திற்கு உத்வேகம் அளிக்கவும், animation-range-இன் சில நிஜ உலகப் பயன்பாடுகளைக் கருத்தில் கொள்வோம்:

• கார்ப்பரேட் ஆண்டு அறிக்கைகள்: ஒரு ஊடாடும் ஆண்டு அறிக்கையை கற்பனை செய்து பாருங்கள், அங்கு நிதி விளக்கப்படங்கள் பார்வையில் அனிமேட் ஆகின்றன, முக்கிய செயல்திறன் குறிகாட்டிகள் (KPIs) கணக்கிடப்படுகின்றன, மற்றும் பயனர் ஆவணத்தின் வழியாக ஸ்க்ரோல் செய்யும்போது நிறுவனத்தின் மைல்கற்கள் நுட்பமான காட்சி குறிப்புகளுடன் முன்னிலைப்படுத்தப்படுகின்றன. ஒவ்வொரு பகுதிக்கும் அதன் சொந்த குறிப்பிட்ட animation-range இருக்கலாம், இது ஒரு வழிகாட்டப்பட்ட வாசிப்பு அனுபவத்தை உருவாக்குகிறது.
• தயாரிப்பு காட்சிகள் (இ-காமர்ஸ்): ஒரு புதிய கேஜெட்டிற்கான தயாரிப்பு விவரப் பக்கத்தில், பயனர் ஸ்க்ரோல் செய்யும்போது முக்கிய தயாரிப்புப் படம் மெதுவாகச் சுழலலாம் அல்லது பெரிதாகலாம், அம்சங்களை அடுக்கு வாரியாக வெளிப்படுத்தலாம். துணைப் படங்களின் விளக்கங்கள் தெரியும் போது அவை வரிசையாகத் தோன்றலாம். இது ஒரு நிலையான பக்கத்தை ஒரு ஆற்றல்மிக்க ஆய்வாக மாற்றுகிறது.
• கல்வி உள்ளடக்க தளங்கள்: சிக்கலான அறிவியல் கருத்துக்கள் அல்லது வரலாற்று காலவரிசைகளுக்கு, ஸ்க்ரோல்-சார்ந்த அனிமேஷன்கள் செயல்முறைகளை விளக்க முடியும். ஒரு வரைபடம் தன்னைத் தானே துண்டு துண்டாக உருவாக்கலாம், அல்லது ஒரு வரலாற்று வரைபடம் துருப்பு இயக்கங்களைக் காட்டும் அனிமேஷனைக் காட்டலாம், அனைத்தும் பயனரின் ஸ்க்ரோல் ஆழத்துடன் ஒத்திசைக்கப்படும். இது புரிதலையும் தக்கவைப்பையும் எளிதாக்குகிறது.
• நிகழ்வு வலைத்தளங்கள்: ஒரு விழா வலைத்தளம் "வரிசை வெளியீடு" அம்சத்தைக் கொண்டிருக்கலாம், அங்கு கலைஞர் புகைப்படங்கள் மற்றும் பெயர்கள் அவற்றின் பகுதி முக்கியத்துவம் பெறும்போது மட்டுமே பார்வையில் அனிமேட் ஆகும். ஒரு அட்டவணைப் பகுதி பயனர் கடந்ததும் தற்போதைய நேர இடத்தைக் குறிக்க ஒரு நுட்பமான பின்னணி மாற்றத்தைக் காட்டலாம்.
• கலை போர்ட்ஃபோலியோக்கள்: கலைஞர்கள் தங்கள் படைப்புகளுக்கு தனித்துவமான காட்சிகளை உருவாக்க animation-range-ஐப் பயன்படுத்தலாம், அங்கு ஒவ்வொரு பகுதியும் அதன் பாணிக்கு ஏற்ப ஒரு தனிப்பயன் அனிமேஷனுடன் வெளியிடப்படுகிறது, இது ஒரு மறக்கமுடியாத மற்றும் கலைநயமிக்க உலாவல் அனுபவத்தை உருவாக்குகிறது.

இந்த எடுத்துக்காட்டுகள் animation-range-இன் பல்துறை மற்றும் வெளிப்பாட்டு சக்தியை முன்னிலைப்படுத்துகின்றன. ஸ்க்ரோல் எப்படி கதையை இயக்க முடியும் மற்றும் உள்ளடக்கத்தை வெளிப்படுத்த முடியும் என்பதைப் பற்றி ஆக்கப்பூர்வமாக சிந்திப்பதன் மூலம், டெவலப்பர்கள் ஒரு நெரிசலான ஆன்லைன் நிலப்பரப்பில் தனித்து நிற்கும் உண்மையிலேயே தனித்துவமான மற்றும் ஈர்க்கக்கூடிய டிஜிட்டல் அனுபவங்களை உருவாக்க முடியும்.

முடிவுரை

CSS அனிமேஷன் வரம்பு, animation-timeline உடன் சேர்ந்து, நேட்டிவ் வலை அனிமேஷன் திறன்களில் ஒரு குறிப்பிடத்தக்க முன்னேற்றத்தைக் குறிக்கிறது. இது முன்-இறுதி டெவலப்பர்களுக்கு ஸ்க்ரோல்-சார்ந்த விளைவுகள் மீது முன்னோடியில்லாத அளவிலான அறிவிப்புக் கட்டுப்பாட்டை வழங்குகிறது, அதிநவீன ஊடாடல்களை சிக்கலான ஜாவாஸ்கிரிப்ட் நூலகங்களின் களத்திலிருந்து தூய CSS-இன் அதிக செயல்திறன் மிக்க மற்றும் பராமரிக்கக்கூடிய களத்திற்கு நகர்த்துகிறது.

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

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

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