Блюр части изображения CSS3 + JS?

Question

[apptimeru]

Задача сверстать слайдер один в один как на картинке:



Сам слайдер перемещается по вертикали при наведении на один из пунктов меню. Все сделал без проблем, но вот застрял на эффекте матового стекла в навигации. Уже чего только не делал нечего не выходить.

Не получается заблюрить часть изображения, подскажите пожалуйста в какую степь капать?

Comments

[apptimeru]

Все всем спасибо, сам сделал, костылем конечно, но другого способа не нашел. Jquery просто подгоняю css в зависимости от размеров экрана и все вроде работает четко)

[Сергей delphinpro]

Это не костыль в данном случае, а единственное решение. Именно джавасриптом подгонять позиционирование блюренной картинки.

[Сергей delphinpro]

Хотя нет. Есть более интересный вариант.
Нужно продублировать все слайды и сделать как бы второй слайдер. Основной будет крутиться на фоне, как сейчас, второй, с блюром - в области навигации (навигацию будет наложена поверх его). размеры слайдов второго слайдера нужно будет выставлять равными первому и синхронизировать их позиции. Таким образом будет довольно просто реализовать эффект смены картинок смещением в сторону по горизонтали/вертикали, фэйдом, скейлом и другие.
Да, я бы именно так сделал.

[apptimeru]

Сергей: на самом деле я по началу так и делал) я просто JS копировал содержания слайдера в слой #clone и по событию скрола передвигал этот слой, получилось хорошо, но я тогда не догадался на js корректировать позиционирование.) поэтому отмел этот вариант)

Answer 1

[Олег]

Только с 2-мя изображениями, других вариантов вроде нет. Вообще дизайнеру нужно настучать, накриативят у себя в фотошопе, потом мучайся.
codepen.io/werty1001/pen/eZQpZa

Comments

[apptimeru]

это тестовое задание на проверку моих способностей) Все сверстал за минуты, а вот с этой блюрностью бьюсь уже 2 день. Вот мое решение https://drive.google.com/open?id=0B5Q6vHVJ37mbdkNM... но при ресайзе страницы, сразу вылазиет проблема с блюром, там фон не сдвигается так как нужно. Посмотри пожалуйста может можно что-то придумать

Answer 2

[Максим]

background: rgba(255,255,255,.6);
возможно

Comments

[apptimeru]

нет это слишком просто, тут нужен именно фильтр blur(), но из за адаптивности есть сложности, будь это навигация на левой стороне проблем бы вообще не возникло.

Answer 3

[Maksim Zverev]

В навигацию запихивайте фоном картинку из слайда с нужным позиционированием и к навигации применяете filter: blur(1px)

codepen.io/m1skam/pen/reQOOg

Comments

[apptimeru]

практически так и делаю, но есть проблема, при изменении разрешения экрана, картинка в навигации не совпадает с картинкой в слайдере, она просто не смещается.

[Maksim Zverev]

apptimeru: и background-size: cover; не помогает ?

[apptimeru]

к сожалению нет, так как слайдовое изображение имеет большую ширину чем навигация.

[apptimeru]

Maksim Zverev: вы просто в своем примере поставьте своему изображению 100% ширину и посмотрите как помведет себе боковая панель

[Maksim Zverev]

apptimeru: а причем тут ширина? cover - это масштабирование фона так, чтобы его ширина или высота равнялась ширине или высоте блока, пока у вас ширина слайда будет больше его высоты, картинка слайда в фоне всегда будет масштабироваться по высоте.

[Maksim Zverev]

apptimeru: https://www.dropbox.com/personal/%D0%A1%D0%BA%D1%8...
https://www.dropbox.com/personal/%D0%A1%D0%BA%D1%8...

[Maksim Zverev]

apptimeru: пардон, не те ссылки: https://www.dropbox.com/s/7ccnciudgrpw6cs/Screensh...
https://www.dropbox.com/s/mc81t1kffop4qb0/Screensh...

[apptimeru]

у слайдера есть фиксированная высота 400px, и если ограничения по высоте нет, то все совпадает, но стоит ее поставить и все писец. Попробуй использовать такой же длинный по ширине слайдер и ты поймешь о чем я

[apptimeru]

вот ссыль на архив с исходником https://drive.google.com/open?id=0B5Q6vHVJ37mbdkNM...