Сделать курсор прозрачным по таймеру (0.5)

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Вот код, но вместо того, чтобы он полностью исчезал, есть ли какой-нибудь способ сделать его прозрачным 0,5? Помощь в этом была бы очень признательна.

 $(function () {
var timer;
var fadeInBuffer = false;
$(document).mousemove(function () {
    if (!fadeInBuffer) {
        if (timer) {
            console.log("clearTimer");
            clearTimeout(timer);
            timer = 0;
        }

            console.log("fadeIn");
        $('.fade-object').fadeIn();
        $('html').css({
            cursor: ''
        });
    } else {
        fadeInBuffer = false;
    }


    timer = setTimeout(function () {
        console.log("fadeout");
        $('.fade-object').fadeOut()
        $('html').css({
            cursor: 'none'
        });
        fadeInBuffer = true;
    }, 2000)
});
});

Ответ №1:

Вы можете использовать fadeTo(). Надеюсь, это поможет.

 $(function () {
var timer;
var fadeInBuffer = false;
$(document).mousemove(function () {
    if (!fadeInBuffer) {
        if (timer) {
            clearTimeout(timer);
            timer = 0;
        }
        $('.fade-object').fadeTo('slow', 1);
        $('html').css({
            cursor: ''
        });
    } else {
        fadeInBuffer = false;
    }


    timer = setTimeout(function () {
        $('.fade-object').fadeTo('slow', 0.5)
        $('html').css({
            cursor: 'none'
        });
        fadeInBuffer = true;
    }, 2000)
});
});

 .fade-object{
  height: 300px;
  background: red;
  width: 100%;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fade-object"></div>

1. Курсор по-прежнему прозрачен на 100%?

2. @JoalRoberts Вы не можете контролировать непрозрачность курсора по умолчанию. Вместо этого у вас может быть свой собственный курсор, и вы можете определить его непрозрачность. Смотрите, davidwalsh.name/css-custom-cursor

3. Ваши идеи ложны.

4. @JoalRoberts Если вы смогли изменить непрозрачность собственного курсора, пожалуйста, дайте мне знать. Я хочу знать, как вы это сделали!

Ответ №2:

** ОБНОВЛЕНО **

Попробуйте использовать setInterval вместо setTimeout и измените значение от 10 до 0, чтобы исчезнуть, и от 0 до 10, чтобы появиться снова (в соответствии с именами файлов).

Сделайте это, изменив пользовательские курсоры png с помощью alfa с 0 до 100 в 10 этапов.

Вот некоторые изображения, которые я подготовила: , , , , , , , , , , << последний-0%

Помните, что ваш курсор (указатель мыши) Пользовательское изображение НЕ изменится, ЕСЛИ оно НЕ перемещается **, поэтому … вам нужно будет программно перевести курсор как минимум на 10 пикселей при повторении 10 изображений.

** ОБНОВЛЕНИЕ 2 **

Здесь вы можете почувствовать идею. //codepen.io/jjyepez/pen/xEQAXZ

PS (забудьте о переводе курсора.. это вообще не обязательно)

1. Пожалуйста, используйте imgur для размещения изображений. У Stack Overflow есть специальная учетная запись для их размещения. Доступ к нему осуществляется с помощью значка изображения в инструментах редактирования (верхняя панель, видимая при написании или редактировании ответа).

2. Здесь у вас это закодировано. codepen.io/jjyepez/pen/xEQAXZ Я думаю, это своего рода то, чего вы хотите (перепрограммировано).

3. PS: Примите во внимание, что пользовательские курсоры, похоже, подвергаются повторной выборке перед рендерингом, поэтому в некоторых браузерах они могут выглядеть неровными или даже альфа-пиксели могут быть цветными.