We Keep Coding

can't run .ani file on cursor [duplicate]

Do any web browsers support animated cursors?
I've been searching the web to add custom cursors to my web application. I've been finding a lot of non animated (.cur) and animated (.ani) cursors, and using the correct CSS so that my application has custom cursors! It seems that the animated cursors are not supported in the web browsers I tried and I was wondering if there is any way possible to put animated cursors into my web application.

You can make it happen with the help of a bit of javascript:
Add to your css
#container {
cursor : none;
}
#cursor {
position : absolute;
z-index : 10000;
width : 40px;
height : 40px;
background: transparent url(../images/cursor.gif) 0 0 no-repeat;
}
Then add to your js
Straight Javascript Version
// 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 Version
$('#container').on("mousemove", function (e) {
$('#cursor').offset({
left: (e.pageX - cursorOffset.left)
, top : (e.pageY - cursorOffset.top)
})
});

I managed to accomplish this using CSS keyframes, animating the source image of the cursor. It works in Chrome and Safari (though it can get a little glitchy if you've got a ton of stuff running). Good enough for my personal site!
* {
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;}
}

After doing some more research, I don't think it's possible at the moment. It doesn't seem that any of the browsers support animated cursors as of 2/8/2012 using the CSS cursor property. I suppose it could be done using JavaScript to repeatedly change the value of the cursor property every few frames to make it appear animated, but that may be more trouble than it is worth.
Animated cursor files .ani files do not work. All 5 major web browsers will not show the cursor. If you try some CSS like, cursor: url('animated.ani'), that cursor will not show up!
If you make the cursor an animated gif file, it only shows up on some browsers and it's temperamental, like cursor: url('animated.gif'), the cursor works in Firefox and Chrome but it is not animated, the cursor does not work at all in IE9 or Opera, and it did something really weird in the Windows version of Safari - it works but is only animated when I move the cursor vertically on the screen, and did not animate at all when the cursor was not moving or was moving horizontally. Credit to Brutallus for the idea to use an animated gif even though it did not work!
It doesn't seem that browsers support animated cursors at this time which is a shame because I really think it would add some depth to certain web applications. I don't advocate using animated cursors for most websites because they are extremely annoying, but there are some rare situations where they can be useful, such as a HTML5 game where the cursor can potentially add to the theme of the game.

To answer your question
Do any web browsers support animated cursors?
Yes.According to MDN, IE supports .cur and .ani formats.
As a suggestion,have you considered using an animated gif image instead?
Try this in your css
cursor: url(img/animated_cursor.gif), auto;

-->it flickers for some reason when you move the mouse in a downwards direction
It happens because the cursor goes over the animated gif (over the #mycursor image, look the code) and exits the element on which you call the function.

I was able to get .ani cursors rendering in modern browsers by using JavaScript to extract the individual animation frames from the .ani file and convert them to data URIs which I then compose into a CSS animation similar to the solution proposed by Laura above.
I've published it as an NPM module called ani-cursor.
Some limitations of this approach:
The .ani file must be served from the same domain, or include proper CORS headers.
CSS cursor animation does not currently work in Safari, but a fix has landed so it should be in the next release.
I've also written a blog post with some details about how it works: https://jordaneldredge.com/blog/rendering-animated-ani-cursors-in-the-browser/

No major browser actually supports animated cursors (of type .ani) as of 2017, and I don't think any are really planning to add them in the future. However, some random browser may support this feature (a not really well known browser), so you should add a feature that will make the cursor work in those browsers:
body {
cursor: url("hand-pointing.ani"), pointer;
}
This way, if the animated cursor doesn't work in a user's browser, at least the normal pointer cursor is enabled. If you don't add the pointer part, than browsers without animated cursor support would load an ENTIRELY DIFFERENT cursor from what you wanted. Also, note that the default browser cursors kind of suck. I know that many people want animated cursor support added to major browsers, but it won't happen unless lots of people petition for it or something.
In other words, there is no answer to this question right now. Please comment if this changes.

Full code without bugs
<body id="body" onmousemove="showCoords(event)" onmouseout="clearCoor()">
<div id="mini_mouse">
</div>
<script src="lib/js/jquery-3.3.1.min.js"></script>
<script>
function showCoords(event) {
var elmnt = document.getElementById("html");
var scrollTop = elmnt.scrollTop;
var x = (event.clientX) - (10);
var y = (event.clientY) - (10) + (scrollTop);
document.getElementById("mini_mouse")
.style = ("top: " + y + "px ;" + "left: " +
x + "px ;" + "
background-color: red;
width: 20px;
height: 20px;
opacity: .5 ;
position: absolute;
z-index: 100;
border-radius: 100px ;
");
}
function clearCoor() {
document.getElementById("mini_mouse").style = "";
}
</script>

A possible alternative: you could convert the ANI into a GIF and then have the GIF follow your (hidden) mouse cursor around.
// Have the cursor follow the mouse
$(document).mousemove(function (e) {
$(".pointer").css({ left: e.pageX, top: e.pageY });
});
/* Hide original cursor; add whatever elements necessary */
html, input, textarea {
cursor: none;
}
.pointer { /* Set cursor location */
position: absolute;
height: 480px; top: 100px;
width: 480px; left: 50%;
z-index: 9999; /* Put cursor on top of everything */
pointer-events: none; /* Make sure cursor doesn't change */
}
.pointer img { /* Set cursor size constraints if desired */
height: 50px;
width: auto;
}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script></head>
<body>
<div class="pointer">
<img src="https://i.imgur.com/K5ufqqA.gif">
</div>
</body>

Scrollbar is different depending on where I am [duplicate]

WebKit/Blink's (Safari/Chrome) default behaviour on MacOS since 10.7 (Mac OS X Lion) is to hide scroll bars from trackpad users when they're not in use. This can be confusing; the scroll bar is often the only visual cue that an element is scrollable.
Example (jsfiddle)
HTML
<div class="frame">
Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!
</div>
CSS
.frame {
overflow-y: auto;
border: 1px solid black;
height: 3em;
width: 10em;
line-height: 1em;
}​
WebKit (Chrome) Screenshot
Presto (Opera) Screenshot
How can I force a scroll bar to always be displayed on a scrollable element in WebKit?

The appearance of the scroll bars can be controlled with WebKit's -webkit-scrollbar pseudo-elements [blog]. You can disable the default appearance and behaviour by setting -webkit-appearance [docs] to none.
Because you're removing the default style, you'll also need to specify the style yourself or the scroll bar will never show up. The following CSS recreates the appearance of the hiding scroll bars:
Example (jsfiddle)
CSS
.frame::-webkit-scrollbar {
-webkit-appearance: none;
}
.frame::-webkit-scrollbar:vertical {
width: 11px;
}
.frame::-webkit-scrollbar:horizontal {
height: 11px;
}
.frame::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
.frame::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
WebKit (Chrome) Screenshot

For a one-page web application where I add scrollable sections dynamically, I trigger OSX's scrollbars by programmatically scrolling one pixel down and back up:
// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;
// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);
This triggers the visual cue fading in and out.

Here is a shorter bit of code that reenables scroll bars across your entire website. I'm not sure if it's much different than the current most popular answer but here it is:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Found at this link: http://simurai.com/blog/2011/07/26/webkit-scrollbar

Browser scrollbars don't work at all on iPhone/iPad. At work we are using custom JavaScript scrollbars like jScrollPane to provide a consistent cross-browser UI: http://jscrollpane.kelvinluck.com/
It works very well for me - you can make some really beautiful custom scrollbars that fit the design of your site.

Another good way of dealing with Lion's hidden scroll bars is to display a prompt to scroll down. It doesn't work with small scroll areas such as text fields but well with large scroll areas and keeps the overall style of the site. One site doing this is http://versusio.com, just check this example page and wait 1.5 seconds to see the prompt:
http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb
The implementation isn't hard but you have to take care, that you don't display the prompt when the user has already scrolled.
You need jQuery + Underscore and
$(window).scroll
to check if the user already scrolled by himself,
_.delay()
to trigger a delay before you display the prompt -- the prompt shouldn't be to obtrusive
$('#prompt_div').fadeIn('slow')
to fade in your prompt and of course
$('#prompt_div').fadeOut('slow')
to fade out when the user scrolled after he saw the prompt
In addition, you can bind Google Analytics events to track user's scrolling behavior.

The script does not work properly in the browser Internet Explorer. How to fix?

Welcome! Help me please! The script does not work properly in the browser Internet Explorer. During the scroll there is a strong pull the block up and down. How to fix? Help me please. Thank you very much for your help!
$(function() {
var $hor = $("#horizontal");
$("body").css('padding-bottom', $(window).width()*2);
var delta = 0;
$(window).on('scroll', function () {
var top = $(document).scrollTop();
var width = $(window).width();
var lim = $hor.position().top - (delta) - ($(window).height() - $hor.outerHeight()) / 2;
delta = Math.min(Math.max(top - lim, 0), width * 2);
$(".horizontal:first", $hor).css({left : delta});
$(".horizontal:last", $hor).css({left : -(width*2 - delta)});
$("body").css({'padding-top': delta, 'padding-bottom': width*2 - delta});
});
});
p {
height: 500px;
}
#horizontal {
position: relative;
overflow: hidden;
width: 100%;
font-size: 3em;
margin: 0;
padding: 0;
height: 250px;
}
#horizontal .horizontal {
position: absolute;
width: 100%;
left: -100%;
padding: 20px;
}
#horizontal .horizontal .h_blockquote {
position: relative;
width: 100%;
margin: 0 auto;
font-size: 24px;
line-height: 1.3em;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>test</p>
<div id="horizontal">
<div class="horizontal">
<div class="h_blockquote">
<div class="h_blockquote_wrap">The script does not work properly in the browser Internet Explorer. The script does not work properly in the browser Internet Explorer.</div>
</div>
</div>
<div class="horizontal">
<div class="h_blockquote">
<div class="h_blockquote_wrap">The script does not work properly in the browser Internet Explorer. The script does not work properly in the browser Internet Explorer.</div>
</div>
</div>
</div>
<p>test</p>

You can't rely on scroll firing smoothly in old browsers or when using jQuery.
The problem is that the event that fires on scroll is allowed to cancel it, so the browser has to complete the event script before appearing to scroll the page - if this takes too long the scroll appears to stutter or hang.
In your script you're calling jQuery methods like .width() and .outerHeight() and these wrap underlying methods that wait for a DOM reflow. They're slow, not incredibly slow, but slow enough that a scroll animation can appear to drop frames or stutter waiting for them. You also change positioning, which also causes a reflow.
Modern browsers have a new feature to handle this: passive event listeners - as passive listeners can't cancel the event the browser doesn't have to worry about waiting for them. jQuery still doesn't support them, so it's recommended not to use jQuery for scroll events at all.
However none of those are available to IE - IE's solution to this problem was to debounce the event slightly. Multiple scrolls in quick succession would be stacked and only periodically fired, and DOM reflow changes can cause it to fire partly before and partly after. You don't really notice if you drag the slider but scrolling with the wheel appears to jerk when it catches up.
I'd try the following:
Move all the size checks that don't change between scroll events outside the scroll.
Change the positioning to be done with CSS transform: translate as this uses the graphics card to do the calculations.

skrollr page only moves after scrolling on iOS device

I build a website with skrollr, which is my personal plugin of the year.
It works well in most situations except on an iPad mini. I haven't had the opportunity to test it on other iOS devices yet.
The problem is, that the site doesn't start scrolling until after I stopped scrolling.
So, basically, I put my finger onto the screen and start dragging, and nothing happens. Only when I stop scrolling and pull my finger away from the screen, the site starts scrolling the correct way.
<div id="skrollr-body">
<div id="scene1" class="scene" data-anchor-target="#scene1-anchor"
data-0-top="visibility: visible"
data--1950-top="visibility: visible"
data--2000-top="visibility: hidden">
</div>
</div>
#skrollr-body {
height: 100%;
position: fixed;
width: 100%;
}
.scene {
width: 100%;
height: 100%;
top: 0%;
left: 0%;
position: absolute;
background-color: white;
}
<script>
var s = skrollr.init({
smoothScrolling: true,
keyframe: function(element, name, direction) {
// add videos only after scrolling for a bit
},
mobileCheck: function() {
// makes no difference :-(
return false;
}
});
</script>
</body>
Is this behavior to be expected? How can I make the browser scroll while I still have the finger on the screen?

Apparently, it's not a bug, it's a feature :-/
According to this answer to a similar question the whole "only move after touch event is over" is standard behavior for iPads.
So I guess I could go and rig something up for skroller to react not to the scroll event, but instead to react to the touchstart / touchend events.
Very unsatisfying...

$(window).scroll not working correctly on mobile devices and internet explorer

I'm using jQuery-1.10.2 and I am using the function $(window).scroll. The $(window).scroll isn't being executed as I scroll on a mobile device, but rather when my finger releases the screen after scrolling. $(window).scroll is also delayed on IE10.
I use $(window).scroll to make a navbar scroll with the page by changing the css property top: on the position:fixed; navbar. When scrolled down for enough, the navbar ends up sticking to the top of the page as position:fixed. Is there a more compatible alternative to achieve the same results to my navbar? Is there a fix for mobile or IE10?
$(window).scroll(function () {
$('.navbar').css('top', Math.max(0, 350 - $(this).scrollTop()));
var scroll = $(document).scrollTop();
});
Here is a fiddle with no images. Look at the navbar. http://jsfiddle.net/93tzq/

If I'm understanding what you want to do correctly I'm pretty sure you're over thinking this.To keep a nav element at top while you scroll you don't need any js. All you need to do is set the z-index and position accordingly.
For instance:
.nav-overlay{
position: absolute;
top: 90px;
left: 10%;
z-index: 100;
display: block;
width: 50px;
height: 50px;
}
Then put the html as follow:
<nav class='nav-overlay'>
NAV BAR HERE
</nav>

You didn't specify your mobile browser, but this is a common question with Safari in iOS. MobileSafari does not trigger window.scroll until the scrolling has finished – this has been a problem addressed numerous ways (see iscroll, for example). Here's a similar post that may answer your question as far as making a sticky navbar.