Как сделать в Css эффект паралакса с видеофоном и картинкой?
Хочу сделать так чтобы картинка снизу перекрывала видеофон, но потом при прокрутке страницы видео не должно опять появляться, то есть картинка должна зафиксироваться.
Еще раз: сначала видео, оно фиксированное, чтобы был эффект паралакса, потом картинка поверх видео при прокрутке страницы, но чтобы потом не начиналось опять видео, если дальше пролистываем страницу. Сейчас в коде сделано так, что листаем страницу и идет видео, картинка и опять видео. Вот мне надо чтобы я пролистал до картинки и потом всегда была картинка, сколько бы я не листал.
На CSS такое не решить. На JS, по идее, при старте страницы поставить слушателя для window на "scroll". В нем, проверять что элемент '.foto' не высовывается "сверху" экрана. Это проще всего сделать getBoundingClientRect для этого элемента. Как только top станет не больше 0 - удалить элемент с видео со страницы (это imho, проще для этого случая, чем скрывать) и убрать слушателя scroll'a. Все, вроде, должно стать как надо.
На вопрос «как сделать» отвечает документация и поиск в интернет.
Тут отвечают на вопросы «почему я сделал, как в документации, а оно не работает. Поискал в интернет, вот запросы, в ответах не нашел. Что я делаю не так?»
Покажите, как вы пробовали решить проблему, приведите код попытки (пусть неудачной), опишите, как запускали, что ожидали и что получилось.
За готовыми решениями - на фриланс. В текущем виде это не вопрос, а задание. Нарушен п.5.12 Регламента.
Средний
