MARQUEE இல்லாமல் HTML5 மற்றும் CSS3 உள்ள உருளும்படியான உள்ளடக்கத்தை உருவாக்குதல்

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

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

புதிய CSS3 பண்புகள்

உங்கள் உள்ளடக்கத்தை எவ்வாறு மார்கீவில் காண்பிப்பது என்பதைக் கட்டுப்படுத்த ஐந்து புதிய பண்புகளை சேர்க்கிறது: மேலோட்டப் பாணியை, மார்க்கீ-பாணி, மார்க்கீ-நாடகம்-எண்ணிக்கை, மார்க்வீ-திசையன் மற்றும் மார்க்கீ-வேகம்.

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

பெருங்கூடாரங்களின் பாணி
இந்த உள்ளடக்கம் எவ்வாறு உள்ளடக்கத்தை (மற்றும் வெளியே) நகர்த்துவதை வரையறுக்கிறது.

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

கடைசியாக, மாற்றானது, பக்கத்திலிருந்து பக்கத்திற்கு இழுத்து, முன்னும் பின்னுமாக ஓடும்.

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

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

மார்கீ-இயக்கம் விவரங்கள்

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

மார்க்கீ பண்புகள் உலாவி ஆதரவு

நீங்கள் CSS மார்க்கீ கூறுகளை வேலை செய்ய விற்பனையாளர் முன்னுரிமைகள் பயன்படுத்த வேண்டும். அவர்கள் பின்வருமாறு:

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

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

{
அகலம்: 200px; உயரம்: 50px; வெள்ளை இடைவெளி: nowrap;
வழிதல் மறைத்து;
வழிதல்-X: வெப்கிட்-முன்னணி;
-வெப்கிட்-மார்கீ-திசை: முன்னோக்கு;
-வெப்கிட்-மார்கீ-பாணி: சுருள்;
-வெப்கிட்-மார்கீ-வேகம்: சாதாரண;
-வெப்கிட்-மார்கீ-அதிகரிப்பு: சிறிய;
-வெப்கிட்-மார்கீ-மீண்டும்: 5;
overflow-x: marquee-line;
முன்னோக்கு;
மார்க்கீ-பாணி: சுருள்;
மார்க்கீ-வேகம்: இயல்பான;
மார்க்கீ-நாடக-எண்ணிக்கை: 5;
}