हेल्लो दोस्तों,जैसा की आप सभी लोगो ने Marquee Code के बारे में कहीं न कही सुना होगा, Marquee Code एक ऐसा कोड है जिसके माध्यम से हम अपने वेबसाइट या ब्लॉग पर कोई भी सूचना चलते हुए शब्द में प्रदर्शित करना चाहते है तो आप Marquee Code का प्रयोग कर सकते है इससे आप किसी भी सूचना को किसी भी साईड में Adjust कर सकते है
Marquee Code को बनाने के लिए हम HTML एवं CSS कोड का प्रयोग करंगे जिसके माध्यम से हम चलते हुए शब्द को अपने वेबसाइट या ब्लॉग पर प्रदर्शित कर सके
Marquee Code Demo
Marquee Code का demo आप नीचे देख सकते है
Marquee Code CSS Code
अब नीचे कुछ CSS Code दिया जा रहे है जिसके अंतर्गत हम Marquee Code का style create करेंगे एवं इसी कोड के माध्यम से आप अपने अनुसार इसका कस्टमाइज कर सकते है
.marquee1 {
height: 200px;
overflow: hidden;
position: relative;
}
.marquee1 h3 {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
color:#ffc107;
-moz-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
/* Apply animation to this element */
-moz-animation: marquee1 15s linear infinite;
-webkit-animation: marquee1 15s linear infinite;
animation: marquee1 15s linear infinite;
}
@-moz-keyframes marquee1 {
0% { -moz-transform: translateY(-100%); }
100% { -moz-transform: translateY(100%); }
}
@-webkit-keyframes marquee1 {
0% { -webkit-transform: translateY(-100%); }
100% { -webkit-transform: translateY(100%); }
}
@keyframes marquee1 {
0% {
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
उपरोक्त दिए गए CSS Code में आप Marquee Code के Color, Background, Transform, Moving Speed तथा Scrolling Text के style को अपने अनुसार संशोधित कर सकते है
Marquee Code HTML Code
नीचे HTML Code दिए जा रहे है
<div class="marquee1">
<h3>Marquee Code Scrolling down... </h3>
</div>
उपरोक्त दिए गए HTML Code में Scrolling Text में Marquee Code Scrolling down... की जगह पर आप अपना शब्द लिखे जो सूचना आप प्रदर्शित करना चाहते है
इस तरह से दोनों HTML एवं CSS कोड को Compile करने पर हमारा Marquee तैयार हो जाता है यदि आप चाहे तो नीचे दिए गए Copy Code पर click करके Marquee Code को कॉपी कर सकते है