मार्केवीशिवाय HTML5 आणि CSS3 मध्ये स्क्रोल करण्यायोग्य सामग्री तयार करणे

जे लोक बर्याच काळासाठी एचटीएमएल लिहीत आहेत ते घटक लक्षात ठेवू शकतात. हे एक ब्राउझर-विशिष्ट घटक होते जे स्क्रीनवर स्क्रोलिंग मजकूराचे एक बॅनर तयार केले. हे घटक एचटीएमएल स्पेसिफिकेशनमध्ये कधीही जोडलेले नव्हते आणि ते संपूर्ण ब्राऊझर्समध्ये विविधतेने होते. या घटकाचा वापर करण्याबद्दल लोकं बर्याचदा दृढ होत्या - सकारात्मक आणि नकारात्मक दोन्ही परंतु आपण आपल्यावर प्रेम करीत असाल किंवा तिचा तिरस्कार केला, तर ही सामग्री तयार करण्याच्या उद्देशाने बॉक्स चौकोनांना दृश्यमान दिसली.

ब्रमर्सने पूर्णतः लागू केला नसल्याचा एक भाग, बाजूला असलेल्या वैयक्तिक मतापेक्षा वेगळा, म्हणजे तो दृश्य परिणाम म्हणून गणला जातो आणि जसे की, HTML द्वारे परिभाषित केले जाऊ नये, जे संरचना परिभाषित करते. त्याऐवजी, दृष्य किंवा सादरीकरण प्रभाव सीएसएस द्वारे व्यवस्थापित केले पाहिजे. आणि CSS3 ने घटकांना मज्जा प्रभाव जोडून ब्राउझर नियंत्रित कसे marquee मॉड्यूल जोडते.

नवीन CSS3 गुणधर्म

CSS3 आपली सामग्री प्रदर्शित होताना कसे नियंत्रित करते याबद्दल पाच नवीन गुणधर्म जोडते: ओव्हरफ्लो-स्टाईल, मार्की-स्टाईल, मार्की-प्ले-गेट, मार्की-दिशा आणि मार्की-स्पीड.

ओव्हरफ्लो-शैली
ओव्हरफ्लो-स्टाईल प्रॉपर्टी (ज्यामुळे मी लेख सीएसएस ओव्हरफ्लो मध्ये देखील चर्चा केली) सामग्री बॉक्सला ओव्हरफ्लो करणार्या सामग्रीसाठी प्राधान्यक्रमित शैली परिभाषित करते. जर आपण मार्की-लाइन किंवा मार्की-ब्लॉकची किंमत सेट केली असेल तर आपली सामग्री डाव्या / उजव्या (बाण-ओळ) किंवा वर / खाली (marquee-block) वर आणि बाहेर स्लाइड करेल.

marque-style
ही मालमत्ता परिभाषित करते कशाप्रकारे सामग्री दृश्यमान होईल (आणि बाहेर).

पर्याय स्क्रोल, स्लाइड आणि पर्याय आहेत. स्क्रोल पूर्णपणे बंद स्क्रीनवरील सामग्रीसह सुरू होते आणि नंतर तो पुन्हा दृश्यमान क्षेत्रापर्यंत फिरत असते तोपर्यंत तो पूर्णपणे पूर्णपणे स्क्रीनवर नाही स्लाइड पूर्णपणे बंद पडद्यापासून सुरू होते आणि नंतर ती संपूर्णपणे स्क्रीनवर हलविली जाते आणि स्क्रीनवर स्लाइड करण्यासाठी आणखी कोणतीही सामग्री शिल्लक नाही तोपर्यंत तो फिरला जातो.

शेवटी, पर्यायी सामग्री बाजूला पासून बाजूला बाजूला उभी करते, मागे व पुढे सरकते.

marquee-play-count
मार्केटी घटक वापरण्याच्या कमतरतेपैकी एक म्हणजे हा कारा कधीच थांबत नाही. पण शैली गुणविशेष-प्ले-गणनेसह आपण विशिष्ट वेळासाठी सामग्री फिरवा आणि बंद करण्यासाठी मार्की सेट करू शकता.

मंडप-दिशा
आपण स्क्रीनवर सामग्री स्क्रॉल करावी अशी दिशा देखील निवडू शकता. ओव्हरफ्लो-स्टाईल marquee-line आणि वर किंवा खाली असते तेव्हा ओव्हरफ्लो-स्टाईल marquee-block असते तेव्हा फॉरवर्ड आणि रिव्हर्स मूल्ये मजकूरच्या दिशापरिस्थितीवर आधारित असतात.

विस्तीर्ण दिशा-निर्देश तपशील

ओव्हरफ्लो-शैली भाषा दिशानिर्देश अग्रेषित करा उलट करा
Marquee-line ltr डावीकडे उजवीकडे
आरटीएल उजवीकडे डावीकडे
मर्की-ब्लॉक अप खाली

जहागीर-वेग
ही प्रॉपर्टी ठरवते की स्क्रीनवरील सामग्री किती स्क्रॉल करते. मूल्ये मंद, सामान्य आणि जलद आहेत. प्रत्यक्ष गती सामग्री आणि ब्राउझर त्यावर प्रदर्शित होते, परंतु मूल्ये मंद गतीने असणे आवश्यक असतात जे जलदपेक्षा धीमे आहेत.

Marquee गुणधर्मांचा ब्राउजर समर्थन

सीएसएस marquee घटक काम करण्यासाठी आपल्याला विक्रेता प्रिफिक्स वापरण्याची आवश्यकता असू शकते. ते खालील प्रमाणे आहेत:

CSS3 विक्रेता उपसर्ग
ओव्हरफ्लो-एक्स: मार्की-लाइन; ओव्हरफ्लो-एक्स: -विबिट-मार्की;
marque-style -webkit-marquee-style
marquee-play-count -webkit-marquee-repeatition
marquee दिशा: उलट | उलट; -वेबकिट-मार्की-दिशा: पुढील | मागच्या बाजूला;
जहागीर-वेग -webkit-marquee-speed
समतुल्य नाही -webkit-marquee-increment

शेवटच्या प्रॉपर्टीमुळे आपण परिभाषित करू शकता की मरुबामध्ये पडद्यावरील सामग्री स्क्रोलच्या रूपात किती मोठे पायर्या असाव्यात.

आपल्या marquee काम करण्यासाठी, आपण विक्रेते प्रिफिक्स मूल्ये आधी ठेवा आणि नंतर त्यांना CSS3 विनिर्देशन मूल्यांचे अनुसरण करा. उदाहणार्थ, येथे एक मार्की साठी सीएसएस आहे जे एका पट्ट्यामध्ये पाच वेळा डावीकडून 200x50 बॉक्सच्या आत स्क्रोल करते.

{
रूंदी: 200px; उंची: 50 पीएक्स; पांढर्या जागा: आत्ताच;
ओव्हरफ्लो: लपलेले;
ओव्हरफ्लो-एक्स: -विबिट-मार्की;
-webkit-marquee-direction: पुढे;
-webkit-marquee-style: स्क्रोल करा;
-विबिट-मार्की-स्पीड: सामान्य;
-विबिट-मार्की-वर्धित: लहान;
-webkit-marquee-repetition: 5;
ओव्हरफ्लो-एक्स: मार्की-लाइन;
marquee दिशा: अग्रेषित;
marque-style: स्क्रोल करा;
भव्यता-वेग: सामान्य;
marquee-play-count: 5;
}