वेब अनुप्रयोगों में एनिमेटेड कर्सर समर्थन?

Question

क्या कोई भी वेब ब्राउज़र एनिमेटेड कर्सर का समर्थन करता है?

मैं अपने वेब एप्लिकेशन में कस्टम कर्सर जोड़ने के लिए वेब खोज रहा हूं। मुझे बहुत सारे एनिमेटेड (.cur) और एनिमेटेड (.ani) कर्सर मिल रहे हैं, और सही सीएसएस का उपयोग कर रहे हैं ताकि मेरे एप्लिकेशन में कस्टम कर्सर हों! ऐसा लगता है कि एनिमेटेड कर्सर उन वेब ब्राउजर में समर्थित नहीं हैं जिन्हें मैंने कोशिश की थी और मैं सोच रहा था कि एनिमेटेड कर्सर को मेरे वेब एप्लिकेशन में रखने के लिए कोई रास्ता संभव है या नहीं।

Answer 1

कुछ और शोध करने के बाद, मुझे नहीं लगता कि इस समय यह संभव है। ऐसा लगता है कि कोई भी ब्राउज़र सीएसएस cursor संपत्ति का उपयोग करके 2/8/2012 के रूप में एनिमेटेड कर्सर का समर्थन करता है। मुझे लगता है कि यह एनिमेटेड दिखाई देने के लिए cursor संपत्ति के मूल्य को बार-बार बदलने के लिए जावास्क्रिप्ट का उपयोग करके किया जा सकता है, लेकिन यह मूल्यवान होने की तुलना में अधिक परेशानी हो सकती है।

एनिमेटेड कर्सर फ़ाइलें .ani फ़ाइलें काम नहीं करती हैं। सभी 5 प्रमुख वेब ब्राउज़र कर्सर नहीं दिखाएंगे। यदि आप कुछ सीएसएस जैसे cursor: url('animated.ani') आज़माते हैं, तो वह कर्सर दिखाई नहीं देगा!

आप कर्सर एक एनिमेटेड gif फ़ाइल बनाते हैं, तो यह केवल कुछ ब्राउज़रों पर पता चलता है और यह मनमौजी है, cursor: url('animated.gif') की तरह, कर्सर फ़ायरफ़ॉक्स और क्रोम में काम करता है लेकिन यह एनिमेटेड नहीं है, कर्सर IE9 में बिल्कुल भी काम नहीं करता है या ओपेरा, और यह सफारी के विंडोज संस्करण में वास्तव में कुछ अजीब था - यह काम करता है लेकिन जब मैं कर्सर को लंबवत रूप से स्क्रीन पर ले जाता हूं तो एनिमेटेड होता है, और जब कर्सर हिल नहीं रहा था या क्षैतिज रूप से आगे बढ़ रहा था तब एनिमेट नहीं हुआ था। एक एनिमेटेड gif का उपयोग करने के विचार के लिए Brutallus को क्रेडिट हालांकि यह काम नहीं किया!

ऐसा प्रतीत नहीं होता है कि ब्राउज़र इस समय एनिमेटेड कर्सर का समर्थन करते हैं जो शर्म की बात है क्योंकि मुझे लगता है कि यह कुछ वेब अनुप्रयोगों में कुछ गहराई को जोड़ देगा। मैं अधिकांश वेबसाइटों के लिए एनिमेटेड कर्सर का उपयोग करने की वकालत नहीं करता क्योंकि वे बेहद परेशान हैं, लेकिन कुछ दुर्लभ परिस्थितियां हैं जहां वे उपयोगी हो सकते हैं, जैसे कि एक HTML5 गेम जहां कर्सर संभावित रूप से गेम के विषय में जोड़ सकता है।

Answer 2

अपने प्रश्न

किसी भी वेब ब्राउज़र एनिमेटेड कर्सर का समर्थन करते हैं जवाब देने के लिए?

हां। MDN के अनुसार, आईई .cur और .ani प्रारूपों का समर्थन करता है।

एक सुझाव के रूप में, क्या आपने इसके बजाय एनिमेटेड gif छवि का उपयोग करने पर विचार किया है?

अपने सीएसएस में अपनी एक इस प्रयास करें

cursor: url(img/animated_cursor.gif), auto; 

मैं यह भी कहना है कि बैठाना आप IE में .cur या .ani फ़ाइलों का उपयोग कर की कोशिश की है चाहते हैं और अपनी फ्लॉप परिणाम आप उम्मीद, शायद आपके कर्सर यूआरएल में प्रदान किए गए पथ के साथ समस्या - यह blog आपको इस पहलू में बहुत मदद करेगा।

Answer 3

-> यह किसी कारण से flickers जब आप एक नीचे की ओर दिशा में माउस ले जाते हैं

यह इसलिए होता है क्योंकि कर्सर (#mycursor छवि पर, कोड देखो) ऐनिमेटेड gif के ऊपर जाता है और तत्व बाहर निकालता है जिस पर आप फ़ंक्शन को कॉल करते हैं।

Answer 4

मैं इस पाया, और काम करने के लिए लगता है: http://ye5.blogspot.it/2011/01/animated-mouse-cursor-on-mozilla.html

Answer 5

आप इसे जावास्क्रिप्ट का एक सा की मदद से ऐसा कर सकते हैं:

अपने सीएसएस में जोड़े

#container { 
    cursor : none; 
} 

#cursor { 
    position : absolute; 
    z-index : 10000; 
    width  : 40px; 
    height : 40px; 
    background: transparent url(../images/cursor.gif) 0 0 no-repeat; 
} 

फिर अपने जेएस

सीधे जावास्क्रिप्ट वर्ड में जोड़ें आयन

// Set the offset so the the mouse pointer matches your gif's pointer 
var cursorOffset = { 
    left : -30 
, top : -20 
} 

document.getElementById('container').addEventListener("mousemove", function (e) { 
    var $cursor = document.getElementById('cursor') 

    $cursor.style.left = (e.pageX - cursorOffset.left) + 'px'; 
    $cursor.style.top = (e.pageY - cursorOffset.top) + 'px'; 

}, false); 

jQuery के संस्करण

$('#container').on("mousemove", function (e) { 
    $('#cursor').offset({ 
    left: (e.pageX - cursorOffset.left) 
    , top : (e.pageY - cursorOffset.top) 
    }) 

}); 

Answer 6

मैं इस सीएसएस मुख्य-फ़्रेम का उपयोग कर पूरा करने के लिए, कर्सर का स्रोत छवि एनिमेट में कामयाब रहे। यह क्रोम और सफारी में काम करता है (हालांकि यदि आपके पास सामानों का एक टन चल रहा है तो यह थोड़ा गड़बड़ हो सकता है)। मेरी निजी साइट के लिए काफी अच्छा है!

* { 
    cursor: url(frame1.png), auto; 
    -webkit-animation: cursor 400ms infinite; 
    animation: cursor 400ms infinite; 
} 

@-webkit-keyframes cursor { 
    0% {cursor: url(frame1.png), auto;} 
    20% {cursor: url(frame2.png), auto;} 
    40% {cursor: url(frame3.png), auto;} 
    60% {cursor: url(frame4.png), auto;} 
    80% {cursor: url(frame5.png), auto;} 
    100% {cursor: url(frame6.png), auto;} 
} 

@keyframes cursor { 
    0% {cursor: url(frame1.png), auto;} 
    20% {cursor: url(frame2.png), auto;} 
    40% {cursor: url(frame3.png), auto;} 
    60% {cursor: url(frame4.png), auto;} 
    80% {cursor: url(frame5.png), auto;} 
    100% {cursor: url(frame6.png), auto;} 
} 

Answer 7

कोई प्रमुख ब्राउज़र वास्तव में 2017 के रूप में (प्रकार .ani का) एनिमेटेड कर्सर का समर्थन करता है, और मुझे नहीं लगता कि किसी भी वास्तव में उन्हें भविष्य में जोड़े जाने की योजना बना रहे है। हालांकि, कुछ यादृच्छिक ब्राउज़र इस सुविधा (एक बहुत अच्छी तरह से नहीं जाना जाता ब्राउज़र) का समर्थन कर सकते हैं, ताकि आप उन ब्राउज़रों में कर्सर काम कर देगा यह एक ऐसी सुविधा जोड़ने चाहिए: यदि एनिमेटेड कर्सर नहीं करता है '

body { 
    cursor: url("hand-pointing.ani"), pointer; 
} 

इस तरह, उपयोगकर्ता के ब्राउज़र में काम नहीं करता है, कम से कम सामान्य सूचक कर्सर सक्षम है। यदि आप एनिमेटेड कर्सर समर्थन के बिना ब्राउज़र से पॉइंटर भाग नहीं जोड़ते हैं, तो आप जो चाहते थे उससे एक अलग अलग कर्सर लोड करेंगे। साथ ही, ध्यान दें कि डिफ़ॉल्ट ब्राउज़र कर्सर चूसने का प्रकार है। मुझे पता है कि बहुत से लोग एनिमेटेड कर्सर समर्थन को प्रमुख ब्राउज़रों में जोड़ना चाहते हैं, लेकिन ऐसा तब तक नहीं होगा जब तक कि बहुत से लोग इसके लिए कुछ या याचिका न दें।

दूसरे शब्दों में, इस प्रश्न का अभी कोई जवाब नहीं है। अगर यह बदलता है तो कृपया टिप्पणी करें।