മാക്ക്യൂ കൂടാതെ HTML5, CSS3 എന്നിവയിൽ സ്ക്രോൾ ചെയ്യാവുന്ന ഉള്ളടക്കം സൃഷ്ടിക്കുന്നു

ദീർഘകാലം HTML എഴുതിക്കൊണ്ടിരിക്കുന്ന നിങ്ങളുടേത് മൂലകം ഓർത്തെടുത്തേക്കാം. സ്ക്രീനില് സ്ക്രോളിംഗ് വാചകത്തിന്റെ ഒരു ബാനര് സൃഷ്ടിച്ച ഒരു ബ്രൌസര്-അതിഷ്ടിത ഘടകമാണ് ഇത്. എച്ച്ടിഎംഎൽ സ്പെസിഫിക്കേഷനിൽ ഈ ഘടകം ഒരിക്കലും ചേർത്തില്ല. ബ്രൌസറുകളിൽ വ്യാപകമായി ഇത് പിന്തുണയ്ക്കുന്നു. ഈ മൂലകത്തിന്റെ ഉപയോഗത്തെക്കുറിച്ച് ആളുകൾക്ക് ശക്തമായ അഭിപ്രായങ്ങളുണ്ടായിരുന്നു - പോസിറ്റീവ് ആന്റ് നെഗറ്റീവ്. പക്ഷേ, നിങ്ങൾ അത് ഇഷ്ടപ്പെടുകയോ അതിനെ വെറുക്കുകയോ ചെയ്തുകഴിയുമ്പോൾ, ബോക്സ് അതിർത്തികൾ ദൃശ്യമാവുന്ന, ഉള്ളടക്കം സൃഷ്ടിക്കുന്നതിനുള്ള ഉദ്ദേശ്യത്തോടെ അത് പ്രവർത്തിച്ചു.

ശക്തമായ വ്യക്തിഗത അഭിപ്രായങ്ങളിൽ നിന്ന് വ്യത്യസ്തമായി ബ്രൌസറുകൾ ഒരിക്കലും പൂർണ്ണമായി നടപ്പിലായിരുന്നില്ല എന്നതിന്റെ കാരണം, അത് ഒരു വിഷ്വൽ ഇഫക്ട് ആയി കണക്കാക്കപ്പെട്ടിരുന്നു, കൂടാതെ ഇത് ഘടന നിർവചിക്കുന്ന എച്ച്ടിഎംഎൽ നിർവചിക്കരുത്. പകരം, വിഷ്വൽ അല്ലെങ്കിൽ അവതരണ ഇഫക്റ്റുകൾ CSS ഉപയോഗിച്ച് നിയന്ത്രിക്കണം. മാർക്കറ്റിന്റെ മാർക്ക് ഇഫക്ട് എങ്ങനെ ചേർക്കുന്നു എന്നത് നിയന്ത്രിക്കാൻ മാർക്വെയഡ് ഘടകം ചേർക്കുന്നു.

പുതിയ CSS3 പ്രോപ്പർട്ടികൾ

മാർക്യൂ നിങ്ങളുടെ ഉള്ളടക്കം എങ്ങനെ പ്രദർശിപ്പിക്കുന്നു എന്നത് നിയന്ത്രിക്കാൻ CSS3 പുതിയ പുതിയ സവിശേഷതകൾ ചേർക്കുന്നു: ഓവർഫ്ലോ-ശൈലി, മാർക്ഇ-സ്റ്റൈൽ, മാർക്ഇ-പ്ലേ-കൌൾ, മാർക്വേ-ദിശ, മാർകീ സ്പീഡ്.

ഓവർഫ്ലോ ശൈലി
ഓവർഫ്ലോ ശൈലിയിലുള്ള സ്വഭാവം (ഞാൻ ലേഖനം CSS ഓവർഫ്ലോയിൽ ചർച്ച ചെയ്തിട്ടുണ്ട്) ഉള്ളടക്ക ബോക്സ് കവിഞ്ഞ ഉള്ളടക്കങ്ങൾക്കായി തിരഞ്ഞെടുത്ത ശൈലി നിർവചിക്കുന്നു. നിങ്ങൾ മാർക്ക്-ലൈൻ അല്ലെങ്കിൽ മാർക്യൂ-ബ്ലോക്കിലേക്ക് മൂല്യം സജ്ജമാക്കിയാൽ നിങ്ങളുടെ ഉള്ളടക്കം ഇടത്തേയ്ക്കും വലത്തേയ്ക്കും (മാർക്യൂ-ലൈൻ) അല്ലെങ്കിൽ മുകളിലോ / താഴേക്കോ (മാർകീ-ബ്ലോക്ക്) സ്ലൈഡുചെയ്യും.

മാർക്യൂ ശൈലി
ഉള്ളടക്കം എങ്ങനെ കാഴ്ചയിലേയ്ക്ക് നീങ്ങുന്നു എന്ന് ഈ വസ്തു വിശദീകരിക്കുന്നു (പുറത്തേക്ക്).

ഓപ്ഷനുകൾ സ്ക്രോൾ, സ്ലൈഡ്, ആൾട്ടർനേറ്റ് എന്നിവയാണ്. ഉള്ളടക്കം പൂർണമായും സ്ക്രീൻ ഓഫ് ചെയ്യുമ്പോൾ സ്ക്രോൾ ആരംഭിക്കും, തുടർന്ന് അത് പൂർണ്ണമായും സ്ക്രീൻ ഓഫ് ചെയ്യുന്നതുവരെ ദൃശ്യമായ പ്രദേശത്ത് അത് നീങ്ങുന്നു. സ്ക്രീനിനെ മുഴുവനായും സ്ക്രീനില് നിന്ന് ആരംഭിച്ച് സ്ലൈഡ് സ്ക്രീനില് മുഴുവനായും സ്ക്രീനില് മുകളിലേക്ക് നീങ്ങുന്നതുവരെ മാറുന്നു, സ്ക്രീനില് സ്ലൈഡിന് ഇടമുകളൊന്നും ശേഷിക്കുന്നില്ല.

അവസാനമായി, ബദിയുടേത് പതാകയിൽ നിന്ന് വശങ്ങളിലേക്ക് വീഴുന്നതും പിന്നിലേക്ക് ഒളിഞ്ഞിരിക്കുന്നതും.

മാർക്വി-പ്ലേ-കൌണ്ട്
MARQUEE ഘടകം ഉപയോഗിച്ച് ഉള്ള പോരാട്ടങ്ങളിൽ ഒന്ന് മാർക്ക് ഒരിക്കലും അവസാനിക്കുന്നില്ല എന്നതാണ്. എന്നാൽ സ്റ്റൈൽ പ്രോപ്പർട്ടി മാർക്യൂ-പ്ലേ-കൗൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഒരു നിശ്ചിത സംഖ്യയ്ക്കായി ഉള്ളടക്കത്തേയും തിരിക്കുന്നതിലേക്കും മാർക്യൂവിനെ സജ്ജമാക്കാൻ കഴിയും.

മാർക്യൂ-ദിശ
നിങ്ങൾക്ക് സ്ക്രീനിൽ സ്ക്രോൾ ചെയ്യേണ്ട ദിശയും നിങ്ങൾക്ക് തിരഞ്ഞെടുക്കാനാകും. ഓവർഫ്ലോ-ശൈലി മാർക്യൂ-ലൈൻ ആണ്, ഓവർഫ്ലോ-ശൈലി മാർക്വി-ബ്ലോക്ക് ആയിരിക്കുമ്പോൾ ഓവർഫ്ലോ-ശൈലി മാർക്വെയറാണ്, മുകളിലോ താഴേക്കോ ഉള്ളപ്പോൾ

മാർക്യൂ-ദിശയ വിശദാംശങ്ങൾ

മാർക്യൂ സ്പീഡ്
സ്ക്രീനിൽ എത്രമാത്രം ഉള്ളടക്കങ്ങൾ സ്ക്രോൾ ചെയ്യുന്നുവെന്ന് ഈ വസ്തു നിർണ്ണയിക്കുന്നു. മൂല്യങ്ങൾ വേഗതയേറിയതും സാധാരണവും വേഗത്തിലുള്ളതുമാണ്. യഥാർത്ഥ സ്പീഡ് ഉള്ളടക്കവും ബ്രൌസർ പ്രദർശിപ്പിക്കുന്നതും ആശ്രയിച്ചിരിക്കും, എന്നാൽ മൂല്യങ്ങൾ വേഗത കുറവായതിനാൽ പതിയെ വേഗത കുറഞ്ഞതിനേക്കാൾ വേഗത കുറഞ്ഞതായിരിക്കണം.

മാർക്യൂ പ്രോപ്പർട്ടീസിന്റെ ബ്രൗസർ പിന്തുണ

സിസ് മാർക്വി ഘടകങ്ങൾ പ്രവർത്തിപ്പിക്കുന്നതിന് നിങ്ങൾക്ക് വെണ്ടർ പ്രീഫിക്സുകൾ ഉപയോഗിക്കേണ്ടതായി വരും. താഴെപ്പറയുന്നവയാണ്:

മാർക്കീയിലെ സ്ക്രീനിൽ സ്ക്രോൾ ചെയ്യുമ്പോൾ സ്റ്റെപ്പുകൾ എത്ര വലുത് അല്ലെങ്കിൽ ചെറുതാക്കണമെന്ന് എത്രത്തോളം നിർണ്ണയിക്കാൻ കഴിഞ്ഞ പ്രോപ്പർട്ടി നിങ്ങളെ അനുവദിക്കുന്നു.

നിങ്ങളുടെ മാർക്ക് പ്രവർത്തിക്കുന്നുണ്ടെങ്കിൽ, ആദ്യം വെണ്ടർ മുൻഗണനാ മൂല്യങ്ങൾ ആദ്യം നൽകണം, തുടർന്ന് അവ CSS3 വിവരങ്ങളുടെ മൂല്യങ്ങൾ ഉപയോഗിച്ച് പിന്തുടരുക. ഉദാഹരണത്തിന്, ഒരു മാർക്ക് ഉപയോഗിക്കുന്ന CSS, ഇവിടെ 200x50 ബോക്സിൽ ഇടത് നിന്ന് വലത് അഞ്ച് തവണ ടെക്സ്റ്റ് സ്ക്രോൾ ചെയ്യുന്നു.

{
വീതി: 200px; ഉയരം: 50px; വൈറ്റ് സ്പേസ്: nowrap;
മറഞ്ഞിരിക്കുന്ന;
ഓവർഫ്ലോ- x: -webkit-marquee;
-വെബ്കിറ്റ്-മാർക്യൂ ദിശ: ഫോർവേഡ്സ്;
-വെബ്കിറ്റ്-മാർകീ-സ്റ്റൈൽ: സ്ക്രോൾ;
-വെബ്കിറ്റ്-മാർകീ സ്പീഡ്: സാധാരണ;
-വെബ്കിറ്റ്-മാർക്യൂ-ഇൻക്രിമെൻറ്: ചെറിയ;
-വൈബ്കിറ്റ്-മാർക്വി-ആവർത്തന: 5;
ഓവർഫ്ലോ-എക്സ്: മാർക്യൂ-ലൈൻ;
മാർക്ക്-ദിശ: മുന്നോട്ട്;
മാർകീ-സ്റ്റൈൽ: സ്ക്രോൾ;
മാർകീ സ്പീഡ്: സാധാരണ;
മാർക്ക് പ്ലേ പ്ലേ കൗണ്ട്: 5;
}