Как сделать плавную смену изображений в background, при скролле на фиксированном элементе?

Eugene Chefranov, Уважаемый, вы, скорее всего, невнимательно прочитали мой вопрос ) Или я не так выразился. Или вы перепутали мой вопрос с вопросом другого человека.

Я достаточно хорошо знаю CSS и на базовом уровне знаю jQuery. У меня совсем другая задача. У меня есть только header, у которого position: fixed, width: 100%, height: 100vh. И в зависимости от высоты окна (scrollTop(); ) должен меняться background у header - url(img-1.jpg) img-2 и т.д.. Всё это сделано, но нет плавности смены изображений. И по ходу, мало кто знает, как это реализовать

Наглядный пример

Как сделать плавную смену изображений в background, при скролле на фиксированном элементе?

Eugene Chefranov, оно не работает с url

Как сделать плавную смену изображений в background, при скролле на фиксированном элементе?

Я в курсе. Часто его использую. Выше писал : "В slick.js есть метод cssEase, который отвечает за плавность смены изображения."
Но слик мне не нужен. Я хочу понимать принцип и писать без использования плагинов. Неужели нет каких-то решений, скриптов, ведь в слике это реализовано

Как удалить класс у всех кроме this на javascript?

Алексей Ярков, Причём здесь поколение, если речь о затраченном времени на нативный js. Ради чего ?

Как адаптивно выровнять контент в блоках одной высоты?

Георгий Городенко, всегда пожалуйста)

Как поменять фон при наведении на ссылку?

Ainur123, не забудьте подключить jQuery

https://jsfiddle.net/bgfg3b4w/

HTML
<a class="dark" >Dark</a>

CSS

body {
    transition: background .3s;
}

.hover-class {
	background: #31708f;
}

jQuery

$('.dark').hover(function() {
    $('body').toggleClass('hover-class');
});

Как поменять фон при наведении на ссылку?

Ainur123,

body {
    transition: background .3s;
}

.3 - это 0.3 cек. Можете установить своё значение
background - указываем, что обрабатывать. Можно написать просто : .3s - но если указывать к чему нужно применять transition - будет меньше нагрузки на браузер

Как вернуть результат из метода each?

вероятно вы хотели сделать чтото типа такого:

$('.box').each(function() {
var thisLength = $(this).text().length; // <- в этом месте
console.log(thisLength);
});

Я использовал пример с

var thisLength = $('.box').length

чтобы показать, что мне нужен this элементов, которые я перебираю. Чтобы не нагромождать код и не отвлекать тех, кто будет отвечать, сделал по минимуму, лишь бы передать суть моей проблемы.
Спасибо за совет с map. Я в основном видел использование each и про map забыл напрочь

Как вернуть результат из метода each?

этот пример - просто пример, вырванный из контекста общей задачи. Отвечая на ваш вопрос, чего я хочу добиться : получить координаты каждого элемента box, посредством this.position().top и left и передать эти данные в объект в другом месте скрипта. var thisLength = $('.box').length; - использовал в качестве примера, чтобы показать, что мне нужны this каждого элемента, который я буду перебирать. И ещё это осталось после того, как я экспериментировал с циклом for и использовал i < thisLength;
Кол-во элементов меняется, поэтому нужен был перебирающий их метод и возвращающий кол-во элементов

Спасибо за map. А то я всё "ич", да "ич".. )

Как отсеивать повторяющиеся числа в Math.random?

Оба ответа работают, но этот ещё гениальней )
Меньше кода и есть над чем подумать и что поучить : new Set(), .size, .add - всё это в новинку )

Как отсеивать повторяющиеся числа в Math.random?

longclaps,
сейчас выводит
Set(5) [ 7, 0, 6, 2, 9 ]

Теперь я понял, что третья цифра - сколько будет генерироваться рандомных чисел. Всё дело в том, что я запускал ваш код на codepen - а там возвращало в консоль

[object set] { }

И это навело на меня смуту )
А ваш код работает на ура. Извините, моя ошибка, что проверял на codepen. Спасибо большое.

Как отсеивать повторяющиеся числа в Math.random?

longclaps, Конечно запускал. Что-то с сервером или у меня с интернетом. Уведомления не приходят, на ваш комментарий не мог ответить всё это время, поэтому ответ на ваш комментарий, добавил в вопрос. Продублирую здесь


Я пробовал переделать ваш пример под свои функции, но не получилось. А если просто вызвать вашу функцию, то вернёт object.

function getRandomSet(lo, hi, n) {
    var res = new Set();
    while (res.size < n) res.add(Math.floor(Math.random() * (hi - lo + 1)) + lo);
    return res;
};

var result = getRandomSet(0, 9, 5);
console.log(typeof(result));            // object
result = parseInt(result);
console.log(typeof(result));           //  number
console.log(result);                       // NaN

У меня есть конкретные числа, их всего четыре : 3, 8, 15, 29
Таким образом, у меня min (или как у вас - lo) всегда равняется 1.
А max (hi) будет зависеть от нажатой кнопки (3, 8, 15, 29)
То есть var x = выбранная кнопка или max

getRandomSet(1, x, 5) - не пойму, для чего нужно число 5 ? )

Может я в описании вопроса не совсем правильно описал задачу.
Мне нужно сгенерировать неповторяющиеся числа в рандомном порядке, от 1 до 3, от 1 до 8, от 1 до 15 и т.д. Или рандомно расставить элементы на странице с этими числами, чтобы получалось нечто такое :

4 7 1
5 2 9
8 6

9 2 3
6 5 1
4 8

Как разобраться в функциях и не запутаться?

Pavel Karinin, Да, помог ) Спасибо, теперь, когда вы объяснили, я понял, что иначе res() просто не выполнится, соответсвенно и console.log() внутри неё.
Ни разу не видел ничего подобного. Обычно после return никаких скобок. Я и не знал, что так можно/нужно )
Слишком много нюансов и нет каких-то жёстких правил (писать только вот так), отчего можно легко запутаться и ломать голову, а как же будет правильней
Спасибо )

Как разобраться в функциях и не запутаться?

А как правильно/грамотней/универсальней и лучше передавать значение из функций ?
Лучше

var newTest = test;
newTest ();

или
test();

Как разобраться в функциях и не запутаться?

Я раньше так и думал, как вы говорите, что, когда я пишу test();
то функция выполнется. Поэтому меня и поставило в тупик, что в данном примере код не выполняется, а точнее не выводится в консоль sum

function test() {

  var sum = 10;
  
  var res = function() {
    console.log(sum);
  }
  return res;
};

test();

Вот как здесь. Выполняется, только когда присваиваю в переменную или test() вывожу через console.log

И по клику тоже не выполняется

$('#button').on('click', test);

Как обратиться к ключу массива с помощью другой переменной?

Гениально ) Спасибо. Часа полтора сидел и ломал голову

Нет, у вас есть несколько объектов в разных переменных, а не один массив.

Вы правы.

Как получить атрибут data с методом hasClass()?

Спасибо. Воспользовался методом filter()

Как получить атрибут data с методом hasClass()?

Dima Polos, То ютуб отвалится, то сервисы гугла, то мобильный интернет барахлит... Но телега работает )) Хотя, конечно же, переодически отваливается, но ненадолго

Как получить атрибут data с методом hasClass()?

Спасибо, то, что нужно )
Всё получилось
Долго не мог ответить, видимо РКН опять дубиной куда-то по интернету ударил. При попытке ответить, всплывается alert : "нет интернет соединения" )

Почему не работает калькулятор стоимости?

Гениально и просто )
Спасибо вам большое )