CSS இல் 29 சிறந்த வடிவமைப்பு காலக்கெடு மற்றும் ஜாவாஸ்கிரிப்ட் உடன்

உருள் காலவரிசை

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

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

குறியீட்டு

ஸ்க்ரோலிங் மூலம் காலவரிசை

உருள் காலவரிசை

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

CSS இல் காலவரிசை

CSS காலவரிசை பண்புகள்

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

பொறுப்பு காலவரிசை ஸ்லைடர்

பொறுப்பு காலவரிசை ஸ்லைடர்

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

மேம்பட்ட காலவரிசை

மேம்பட்ட காலவரிசை

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

நிலையான தலைப்பு மற்றும் ஃப்ளெக்ஸ் பாக்ஸுடன் காலவரிசை

காலவரிசை சரி செய்யப்பட்டது

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

திட்ட காலவரிசை

திட்ட காலவரிசை

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

காலக்கெடு

காலக்கெடு

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

Hyperloop

Hyperloop

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

செங்குத்து காலவரிசை

செங்குத்து காலவரிசை

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

ஃப்ளெக்ஸ் பாக்ஸில் காலவரிசை

காலவரிசை நெகிழ்வுப்பெட்டி

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

டி.ஐ.வி.யில் காலவரிசை

காலவரிசை div

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

CSS மற்றும் HTML இல் காலவரிசை

CSS காலவரிசை

நீங்கள் வைக்கலாம் 400 × 300 அளவு படங்கள் இந்த காலவரிசையில் கோடுகளின் பச்சை நிறம் மற்றும் தேதிகள் மற்றும் நாட்களின் உரையால் வேறுபடுகிறது. இது எந்த அனிமேஷன்களையும் கொண்டிருக்கவில்லை மற்றும் எல்லா மட்டங்களிலும் அதன் எளிய வடிவமைப்பால் வகைப்படுத்தப்படுகிறது.

கருத்துகள் மற்றும் கருத்து காலவரிசை

காலவரிசை கருத்துகள்

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

HTML மற்றும் CSS இல் காலவரிசை காலை

பொறுப்பு காலவரிசை

அதற்கு பதிலளிக்க சரியான காலக்கெடு இது HTML, CSS ஆக வகைப்படுத்தப்படுகிறது மற்றும் மிகவும் எளிமையான ஆனால் மொபைல் காலவரிசையை வழங்கவும்.

காலவரிசை UI

காலக்கெடு

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

CSS இல் மட்டுமே காலவரிசை

CSS காலவரிசை

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

பொறுப்பு காலவரிசை வி 3

பொறுப்பு காலவரிசை வி 3

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

காலவரிசை வண்ணத்தில் அமைந்துள்ளது

கூடு

கிடைமட்ட காலவரிசைகளில் ஒன்று பட்டியலில் மிக உயர்ந்த காட்சி தரம். ஒவ்வொரு முறையும் நேர இடைவெளியில் ஒன்று அழுத்தும் போது ஒரு சிறந்த பயனர் அனுபவத்தை வழங்க மிகவும் நுட்பமான மற்றும் நன்கு வழங்கப்பட்ட அனிமேஷன்களுடன் நன்கு ஊடாடும் காலவரிசை. இது தயாரிக்கப்படுகிறது HTML CSS / Sass மற்றும் JavaScript / TypeScript (jquery.js).

பொறுப்பு வரலாறு காலவரிசை

பதிலளிக்கக்கூடிய கதை

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

குழு காலவரிசை

காலவரிசை குழு

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

கிடைமட்ட CSS மற்றும் HTML காலவரிசை

கிடைமட்ட பொறாமை

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

காலவரிசை CSS, HTML மற்றும் slick.js 

வெளிர் காலவரிசை

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

காலவரிசை வரிசை வி 1

காலவரிசை வரிசை

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

கிடைமட்ட காலவரிசை HTML CSS

காலவரிசை எச்.ஆர்

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

காலவரிசை கோடிஹவுஸ்

காலவரிசை கோடிஹவுஸ்

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

கிடைமட்ட காலவரிசை

கிடைமட்ட காலவரிசை

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

பெயரிடப்படாத காலவரிசை

பெயரிடப்படாத காலவரிசை

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

காலவரிசை

காலவரிசை

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

மற்றொரு கிடைமட்ட காலவரிசை

மற்றொரு காலவரிசை

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

தவறவிடாதே CSS மற்றும் HTML இல் மெனுக்களின் மற்றொரு தொடர்.


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

கருத்து தெரிவிப்பதில் முதலில் இருங்கள்

உங்கள் கருத்தை தெரிவிக்கவும்

உங்கள் மின்னஞ்சல் முகவரி வெளியிடப்பட்ட முடியாது.

*

*

  1. தரவுக்கு பொறுப்பு: மிகுவல் ஏஞ்சல் கேடன்
  2. தரவின் நோக்கம்: கட்டுப்பாட்டு ஸ்பேம், கருத்து மேலாண்மை.
  3. சட்டபூர்வமாக்கல்: உங்கள் ஒப்புதல்
  4. தரவின் தொடர்பு: சட்டபூர்வமான கடமையால் தவிர மூன்றாம் தரப்பினருக்கு தரவு தெரிவிக்கப்படாது.
  5. தரவு சேமிப்பு: ஆக்சென்டஸ் நெட்வொர்க்குகள் (EU) வழங்கிய தரவுத்தளம்
  6. உரிமைகள்: எந்த நேரத்திலும் உங்கள் தகவல்களை நீங்கள் கட்டுப்படுத்தலாம், மீட்டெடுக்கலாம் மற்றும் நீக்கலாம்.