வைத்திருப்பதன் மூலம் திரையின் முழு அகலத்தையும் எடுக்கும் வலைத்தளங்கள், விற்பனைக்கான தயாரிப்புகளின் முழு மாதிரியையும் அல்லது கோடைகாலத்தில் நாங்கள் வழங்கக்கூடிய பயணங்களையும் காண்பிக்க சில கூறுகளை ஒருங்கிணைக்க முடியும் என்பதைக் காண்கிறோம். கொணர்வி அல்லது ஸ்லைடர்கள் எங்கள் தயாரிப்புகளை பார்வைக்கு மிகவும் ஈர்க்கும் வகையில் காண்பிக்க அனுமதிக்கும் வலை உறுப்புகளில் ஒன்றாகும்.
தி CSS இல் இலவச ஸ்லைடர்கள், ஸ்க்ரோலர்கள் அல்லது கொணர்வி நீங்கள் கீழே காண்பீர்கள், எங்கள் பட்ஜெட்டை ஏற்றுக்கொள்வதற்கு முன்பு வாடிக்கையாளரை நாங்கள் காண்பிக்கப் போகிற எல்லா வகையான குறிக்கோள்களுக்கும் ஒரு நல்ல திறனை உருவாக்குங்கள். இது கிடைமட்ட மற்றும் செங்குத்து வடிவத்தில் ஜாவாஸ்கிரிப்டைக் கொண்ட HTML மற்றும் CSS இல் உள்ள ஸ்லைடர்களின் தொகுப்பாகும். அதைச் செய்வோம், எனவே அவற்றை விரைவாக செயல்படுத்த குறியீட்டை அணுகலாம்.
கிடைமட்ட கொணர்வி
இந்த கொணர்வி a அழகான பிரகாசமான அனிமேஷன் இந்த ஸ்லைடரில் நாங்கள் நிறுவப் போகும் சுயவிவரங்களின் புகைப்படங்கள் மற்றும் ஐகான்களை பெரிதாக்க, நாங்கள் ஒரு திரை வரைவதைப் போல. வலையில் நாங்கள் விற்கும் தயாரிப்புகளில் மிகவும் திருப்தி அடைந்த பயனர்களிடமிருந்து வரும் சான்றுகளுக்கான சரியான கொணர்வி இது.
பொறுப்பு எல்லையற்ற கொணர்வி
இந்த ஸ்லைடர் சில நேரங்களில் காணக்கூடிய விளம்பரம் போன்றது பக்கங்களில் உள்ள கால்பந்து மைதானங்களில் மற்றும் கிடைமட்டமாக உருட்டும் வெவ்வேறு விளம்பரங்களைக் காண்பிக்கும். பிராண்ட் கூட்டாளர்களையும் பிற வகை சின்னங்களையும் காட்ட வேண்டிய இறங்கும் பக்கங்களுக்கு இது சிறந்தது.
கொணர்வி எதிர்வினை
இந்த சுருள் அதன் React.js ஐ குறிக்கிறது. தொடர்ச்சியான அனிமேஷனில் ஒரு படத்திலிருந்து இன்னொரு படத்திற்குச் செல்லும்போது விகிதாசார அளவில் படங்களைக் காண்பிப்பதற்கு இது தன்னைக் கொடுக்கிறது. இந்த மிகவும் எளிமையான CSS ஐப் பற்றி இன்னும் கொஞ்சம் சொல்லலாம், ஆனால் அதை வலையில் எவ்வாறு சரியாக நிலைநிறுத்துவது என்று எங்களுக்குத் தெரிந்தால் அது மிகவும் பயனுள்ளதாக இருக்கும்.
மென்மையான 3D ஸ்லைடர்
HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட் ஆகியவற்றால் ஆன இந்த 3D கொணர்வி அதன் மென்மையை வெளிப்படுத்துகிறது சிறந்த காட்சி விளைவைக் கொண்ட ஒரு துள்ளல் அனிமேஷன். ஒவ்வொரு அட்டையையும் அடையாளம் காணும் தொடர்ச்சியான கூறுகள், ஒரு வேலை மற்றும் கண்கவர் கொணர்வி ஆகியவற்றை உங்கள் இணையதளத்தில் இணைக்க.
தானியங்கி எல்லையற்ற கொணர்வி
ஒரு ஸ்லைடர், அதன் சொந்த பெயர் எச்சரிப்பது போல, தானாகவே காட்டப்படும் பயனர் தொடர்பு கொள்ளாமல் அவருடன் எந்த நேரத்திலும். இந்த வேலைநிறுத்த கொணர்வி உருவாக்கும் வெவ்வேறு படங்கள் மாயமாக மங்கிப்போகும் மாற்றம் காரணமாக தோன்றும்.
கொணர்வி ஹோவர்
ஹோவர் உறுப்புடன் இது ஸ்லைடர் இடமிருந்து வலமாக நகர்கிறது, அல்லது நேர்மாறாக, மவுஸ் சுட்டிக்காட்டி அதன் மீது விடும்போது. இந்த பட ஸ்லைடரை உருவாக்கக்கூடிய வெவ்வேறு புகைப்படங்களுக்கு இடையில் செல்ல ஒரு மென்மையான மாற்றம்.
மொபைல் கொணர்வி
மேலும் கொணர்வி பொருள் வடிவமைப்பு என்று அழைக்கப்படுகிறது, மற்றும் அனைத்து வகையான அட்டைகளுடன் தற்போதைய போக்குடன், CSS / HTML இல் அதிக எண்ணிக்கையிலான மற்றொரு கட்டுரையை இங்கே காணலாம், கூகிள் வெளியிட்ட வடிவமைப்பு மொழியால் ஆனதால், மற்றவர்களிடமிருந்து தன்னைத் தூர விலக்குகிறது. அட்டைகளில் நீண்ட நேரம் அழுத்துவதன் மூலம் வெவ்வேறு அட்டைகளை நகர்த்தலாம்.
Instagram ஊட்ட கொணர்வி
இந்த சிறப்பம்சமாக ஸ்லைடரின் பின்னால் உள்ள யோசனையை நீங்கள் செயலிழக்க செய்யலாம் பெரிதாக்கக்கூடிய படங்களின் ஒரு துண்டு மூலம் அவற்றில் ஒன்றைக் கிளிக் செய்வதன் மூலம். ஒரு குறிப்பிட்ட வகை வலைத்தளத்திற்காக இயக்கப்பட்டிருந்தாலும், சிறந்த விளைவின் அனிமேஷன். Instagram பதிவுகள் ஒரு slick.js கொணர்விக்கு எடுக்கப்பட்டது.
எளிய ஒத்திசைக்கப்பட்ட கொணர்வி
முந்தையவற்றுடன் இது நிறைய சம்பந்தப்பட்டிருக்கிறது, குறிப்பாக படங்களின் துண்டுகளில் ஸ்லைடருடனான தொடர்பு மிகவும் வேறுபட்டது இடமிருந்து வலமாகவும், நேர்மாறாகவும் பக்கவாட்டு சைகை மூலம் அதை நகர்த்துவதன் மூலம். மீண்டும் நாம் slick.js அதன் காரியத்தைச் செய்கிறோம். அதன் சிறந்த விளைவுக்காக வேலைநிறுத்தம்.
3D கிடைமட்ட கொணர்வி
நாங்கள் வெளியிடும் முழு பட்டியலிலும் மிகவும் சுவாரஸ்யமான கொணர்வி ஒன்று. வெளியே நிற்கிறது CSS மற்றும் HTML இல் உங்கள் கிடைமட்ட ஸ்லைடர்கள் அது அற்புதமாக நன்றாக நகரும். நான்கு மாறுபாடுகளுடன் உருவாக்கக்கூடிய வெவ்வேறு விளைவுகளைக் கண்டுபிடிக்க நீங்கள் பெட்டிகளின் மீது மவுஸ் சுட்டிக்காட்டி மட்டுமே விட வேண்டும்.
CSS கொணர்வி
எளிய மற்றும் சிறந்த காட்சி விளைவு a திருப்பங்களை எடுக்கும் அட்டைகளின் தொடர் முன். விளைவு 3D இல் உள்ளது, எனவே இது அதிக கவனத்தை ஈர்க்கும் ஸ்லைடர்களில் ஒன்றாகும், குறிப்பாக குறைந்தபட்ச மீள் விளைவு காரணமாக, படைப்பாளியின் பகுதியிலுள்ள மேதைகளைக் காட்டுகிறது.
அம்பிலைட் பூட்ஸ்டார்ப் கொணர்வி
மிகச் சிறந்த விளைவைக் கொண்ட எளிய ஸ்லைடர். ஒன்றாகும் அந்த எளிய ஸ்லைடர்கள் நாங்கள் வழக்கமாகத் தேடுகிறோம், அது அதிக ஆரவாரம் இல்லாமல் ஒன்று என்ற உணர்வைத் தருகிறது, ஆனால் அது அதன் செயல்பாட்டை முழுமையாக பூர்த்தி செய்கிறது.
கொணர்வி அணி
வலைப்பதிவில் உங்களிடம் உள்ள தலையங்கம் குழுவை அறிமுகப்படுத்த விரும்பினால், இந்த ஸ்லைடர் அதன் பாத்திரத்தில் சரியானது. இது எவ்வளவு எளிமையானது என்பதற்கு முந்தையதைப் போன்றது நல்லது. அணியின் ஒவ்வொரு புகைப்படத்தையும் வைக்க வைரங்களைப் பயன்படுத்துவதை இது குறிக்கிறது. இது தானியங்கி இயக்கத்தைக் கொண்டுள்ளது.
கொணர்வி கியூப்
இதில் ஒரு கனசதுரமாக விளங்கும் ஸ்லைடர் முகங்கள் ஒவ்வொன்றும் படங்களில் ஒன்றாகும் அல்லது ஒரு வலைத்தளத்தில் நாங்கள் காட்ட விரும்பும் புகைப்படங்கள். அவற்றை உருட்டுவதற்கு நீங்கள் ஒவ்வொன்றையும் கிளிக் செய்து உங்களுக்கு என்ன உள்ளடக்கம் காத்திருக்கிறது என்பதைக் கண்டறிய வேண்டும்.
கொணர்வி அம்பு விசைகள்
ஒரு ஸ்லைடர், இதில் தொடர்பு செல்கிறது அம்பு விசைகளைப் பயன்படுத்தி. பல வகையான ஆரவாரங்கள் இல்லாமல் எளிமையானது, இது மற்றொரு வகை தொடர்புக்கு நேரடியாக செல்கிறது, இது பல ஆண்டுகளுக்கு முன்பு போல் தெரிகிறது. ஒரு குறிப்பிட்ட பயன்பாட்டிற்கு.
செங்குத்து கொணர்வி
ஒரு சிறந்த காட்சி விளைவு கொண்ட ஒரு ஸ்லைடர் தொடர்ச்சியான செங்குத்து அனிமேஷனில் தானாக இயங்கும் வட்டமான மூலைகளுடன் அதன் அட்டைகளுக்கு இது தனித்து நிற்கிறது. மிகவும் தற்போதைய மற்றும் இந்த முழு பட்டியலிலிருந்தும் அதன் சொந்தமாக நிற்கும் ஒன்று.
தூய CSS கொணர்வி
இந்த கொணர்வி ஒரு இருப்பதைக் குறிக்கிறது நாம் செல்லக்கூடிய பக்க மெனு அதன் ஒவ்வொரு விருப்பத்தையும் கிளிக் செய்க. தகவல் கூறப்பட்டதை விட அதிகமாக இல்லாமல் நன்கு அடையப்பட்ட மீள் விளைவுடன் தோன்றும்.
செங்குத்து கொணர்வி எதிர்வினை
ஒத்த அதன் செங்குத்துத்தன்மைக்கு முந்தையது, இந்த ஸ்லைடர் அதன் ஒவ்வொரு தாவல்களின் படங்களையும் காண்பிக்க பக்கத்தின் முழு அகலத்தையும் எடுக்கும் திறன் கொண்டது. அதன் பெரிய வடிவமைப்பிற்கும், ஸ்லைடுகளுக்கு இடையில் சரிய CSS மாற்றங்களின் பயன்பாட்டிற்கும் சுவாரஸ்யமானது.
3D பிளவு கொணர்வி
3D இல் சுழலும் ஸ்லைடர் வடிவத்துடன் சிறந்த காட்சி விளைவு மிகவும் குறிப்பிடத்தக்க அனிமேஷன். இடது பக்க மெனுவிலிருந்து ஒவ்வொன்றிற்கும் புள்ளிகளுடன் நீங்கள் ஒவ்வொரு விருப்பத்தையும் தேர்ந்தெடுக்கலாம். இது எவ்வளவு ஆக்கபூர்வமானது என்பதற்கான பட்டியலில் சிறந்த ஒன்று.
காலை வணக்கம், எனது தளத்தில் தூய CSS கொணர்வி பயன்படுத்த விரும்புகிறேன், ஆனால் அது ஒரே ஒரு நிலையில் மட்டுமே அமைந்துள்ளது, எனது பக்கத்திற்குள் நான் விரும்பும் நிலையில் அதை எவ்வாறு அமைக்க முடியும்.
தயவுசெய்து உங்கள் உதவியை செய்யுங்கள். மிக்க நன்றி
எனது வலைத்தளத்தின் மொபைல் பதிப்பில் ஹோவர் கொணர்வி காட்சியை எவ்வாறு சிறப்பாக உருவாக்குவது?
அருமை, அவர்கள் என்ன ஒரு நல்ல வேலை செய்தார்கள்!
வணக்கம், வண்டி வீடுகள் மிகவும் குளிராக இருக்கின்றன, ஆனால் நான் அதைப் பதிவேற்றியவுடன், அதை நகலெடுத்து ஒட்டுகிறேன், var max = $ ('# c> li) காரணமாக ஜாவாஸ்கிரிப்ட் எனக்கு ஒரு பிழையைத் தருகிறது .நீளம்…. நீங்கள் என்ன பரிந்துரைக்கிறீர்கள்