માર્ક્વી વગર HTML5 અને CSS3 માં સ્ક્રોલ સામગ્રી બનાવવા

જે લોકો લાંબા સમયથી એચટીએમએલ (HTML) લખે છે તેઓ તત્વને યાદ રાખી શકે છે. આ એક બ્રાઉઝર-વિશિષ્ટ તત્વ હતું કે જે સ્ક્રીન પર સ્ક્રોલિંગ ટેક્સ્ટનું બેનર બનાવ્યું. આ તત્વને એચટીએમએલ સ્પષ્ટીકરણમાં ક્યારેય ઉમેરવામાં આવ્યું ન હતું અને તેના માટે તે સમગ્ર બ્રાઉઝર્સમાં વ્યાપકપણે વૈવિધ્યસભર છે. આ તત્વના ઉપયોગ વિશે લોકો ઘણી વાર ખૂબ જ મજબૂત અભિપ્રાયો ધરાવે છે - બંને હકારાત્મક અને નકારાત્મક. પરંતુ જો તમે તેને પ્રેમ કર્યો હોત કે નફરત કરી હોય, તો તે સામગ્રીને બનાવવાનું હેતુ પૂરો કરે છે જે બૉક્સની સીમાઓ દૃશ્યમાન છે.

કારણ કે તે સંપૂર્ણપણે બ્રાઉઝર્સ દ્વારા સંપૂર્ણ રીતે અમલ કરવામાં આવ્યો ન હતો તે એક ભાગ, મજબૂત અંગત અભિપ્રાય ઉપરાંત, તે દ્રશ્ય અસર તરીકે ગણવામાં આવે છે અને તે પ્રમાણે, તે એચટીએમએલ દ્વારા વ્યાખ્યાયિત ન થવું જોઈએ, જે માળખું વ્યાખ્યાયિત કરે છે. તેના બદલે, દ્રશ્ય અથવા પ્રસ્તુતિ અસરો CSS દ્વારા સંચાલિત થવી જોઈએ. અને CSS3 તત્વોને માર્કી અસર કેવી રીતે બ્રાઉઝ કરે છે તે નિયંત્રિત કરવા માટે માર્કી મોડ્યુલ ઉમેરે છે.

નવી CSS3 ગુણધર્મો

CSS3, તમારી સામગ્રી માર્કિમાં કેવી રીતે પ્રદર્શિત કરે છે તે નિયંત્રિત કરવામાં સહાય માટે પાંચ નવી પ્રોપર્ટીઝ ઉમેરે છે: ઓવરફ્લો-સ્ટાઇલ, માર્કી-સ્ટાઇલ, માર્કી-પ્લે-ગણતરી, માર્કી-દિશા અને માર્કી-સ્પીડ.

ઓવરફ્લો-સ્ટાઇલ
ઓવરફ્લો-સ્ટાઇલ પ્રોપર્ટી (જે મેં લેખ સી.એસ.એસ. ઓવરફ્લોમાં પણ ચર્ચા કરી હતી) સમાવિષ્ટ બૉક્સને ઓવરફ્લો માધ્યમમાં પ્રિફર્ડ સ્ટાઇલ વ્યાખ્યાયિત કરે છે. જો તમે માર્કી-લાઇન અથવા માર્કી-બ્લોકની કિંમતને સેટ કરો છો તો તમારી સામગ્રી ડાબી / જમણી (માર્કી-લાઇન) અથવા ઉપર / નીચે (માર્કી-બ્લોક) માં અને બહાર સ્લાઇડ કરશે.

માર્કી-સ્ટાઇલ
આ મિલકત વ્યાખ્યાયિત કરે છે કે સામગ્રી કેવી રીતે આગળ વધશે (અને બહાર).

વિકલ્પો સ્ક્રોલ, સ્લાઇડ અને વૈકલ્પિક છે. સ્ક્રોલ સામગ્રીને સંપૂર્ણપણે બંધ સ્ક્રીનથી શરૂ થાય છે, અને પછી તે દૃશ્યમાન વિસ્તાર તરફ ફરે છે જ્યાં સુધી તે ફરીથી ફરીથી સ્ક્રીનને બંધ ન કરે. સ્લાઈડ સંપૂર્ણપણે બંધ સ્ક્રીનની સામગ્રી સાથે શરૂ થાય છે અને તે પછી તે સમગ્રમાં ખસે છે જ્યાં સુધી સામગ્રી સ્ક્રીન પર સંપૂર્ણ રીતે ખસેડતી નથી અને સ્ક્રીન પર સ્લાઇડ કરવા માટે કોઈ વધુ સામગ્રી બાકી નથી.

છેવટે વૈકલ્પિક, આગળની બાજુમાં બાજુની બાજુમાં સામગ્રીને બાઉન્સ કરે છે.

માર્કી-પ્લે-ગણતરી
માર્ક્વી એલિમેન્ટનો ઉપયોગ કરવાની એક ખામી એ છે કે માર્કી કદી અટકે નહીં. પરંતુ સ્ટાઇલ પ્રોપર્ટી માર્કી-પ્લે-ગણતરી સાથે તમે ચોક્કસ સમય માટે સામગ્રીને ફેરવવા અને બંધ કરવા માટે માર્કીને સેટ કરી શકો છો.

માર્કી-દિશા
તમે સ્ક્રીન પર સ્ક્રોલ કરવો તે દિશા નિર્દેશ પણ પસંદ કરી શકો છો. ઓવરફ્લો-સ્ટાઇલ એ માર્કી-લાઇન અને અપ અથવા ડાઉન છે જ્યારે ઓવરફ્લો-સ્ટાઇલ માર્કી-બ્લોક છે ત્યારે ટેક્સ્ટની ડાયરેક્શનેલિટી પર આગળ અને રિવર્સ મૂલ્યો આધારિત છે.

માર્કી દિશા વિગતો

માર્કી-સ્પીડ
આ ગુણધર્મ નક્કી કરે છે કે સ્ક્રીન પર સામગ્રી સ્ક્રોલ કેવી ઝડપથી છે. મૂલ્યો ધીમા, સામાન્ય અને ઝડપી છે વાસ્તવિક ઝડપ સામગ્રી અને તે દર્શાવતા બ્રાઉઝર પર આધાર રાખે છે, પરંતુ કિંમતો ધીમી હોવા જ જોઈએ સામાન્ય કરતાં ધીમી છે જે ઝડપી કરતાં ધીમી છે.

માર્કી ગુણધર્મોના બ્રાઉઝર સપોર્ટ

CSS માર્કી તત્વોને કામ કરવા માટે તમને વિક્રેતા ઉપસર્ગોનો ઉપયોગ કરવાની જરૂર પડી શકે છે. તેઓ નીચે મુજબ છે:

છેલ્લી મિલકત તમને વ્યાખ્યાયિત કરવાની મંજૂરી આપે છે કે માર્કમાં સ્ક્રીન પરના સામગ્રી સ્ક્રોલ્સ જેવા પગલાં કેવી રીતે મોટા અથવા નાના હશે.

તમારા માર્કી કામ કરવા માટે, તમારે પ્રથમ વિક્રેતા પ્રીફિક્સ મૂલ્યો મુકવો જોઈએ અને પછી તેમને CSS3 સ્પષ્ટીકરણ મૂલ્યો સાથે અનુસરવા જોઈએ. ઉદાહરણ તરીકે, અહીં એક માર્કી માટેનું સીએસએસ છે જે ડાબેથી જમણે 200x50 બોક્સની અંદર પાંચ વખત સ્ક્રોલ કરે છે.

{
પહોળાઈ: 200 પીએક્સ; ઊંચાઈ: 50 પીએક્સ; સફેદ-જગ્યા: હવે આવો;
ઓવરફ્લો: છુપાયેલ;
ઓવરફ્લો-એક્સ: -વેબકીટ-માર્કી;
-વેબકીટ-માર્કી દિશા: આગળ;
-વેબકીટ-માર્કી-શૈલી: સ્ક્રોલ;
-વેબકીટ-માર્કી-સ્પીડ: સામાન્ય;
-વેબકીટ-માર્કી-ઇન્ક્રીમેન્ટ: નાના;
-વેબકીટ-માર્કી-પુનરાવર્તન: 5;
ઓવરફ્લો-એક્સ: માર્કી-લાઇન;
માર્કી દિશા: આગળ;
માર્કી-સ્ટાઇલ: સ્ક્રોલ;
માર્કી-સ્પીડ: સામાન્ય;
માર્કી-પ્લે-ગણતરી: 5;
}