Размытие средствами DHTML: Как реализировать?

Question

[Dark Hole]

Мне пришла в голову идея, что бы при клике на стрелку вверх документ быстро переходил наверх, но не просто так, а с переходом. Но без размытия эффект будет(на мой взгляд) не айс. Можно ли это реализировать без canvas? И как?

Answer 1

[Андрей Федоров]

codepen.io/aliencash/pen/adPNqW
Однако полагаю вам нужен не blur, а motion-blur. Такого пока не придумали...
И caniuse.com/#search=filter

Comments

[Dark Hole]

А можно ли ограничить стороны размытия?

[Андрей Федоров]

Dark Hole: ну а что же нельзя то... codepen.io/aliencash/pen/vLvKjo

[Dark Hole]

Андрей Федоров: не то. Но все-равно спасибо.

[Саша]

В хроме не работает

[Dark Hole]

Саша: древнем хроме?

[Саша]

Dark Hole: последняя версия win8

[Dark Hole]

Саша: переходи на 10 это раз. Переходи на Edge это два

[Андрей Федоров]

Dark Hole: -webket-filter: blur(10px); рекомендую css прогонять через автопрефиксер. так вы практически бесплатно повысите кроссбраузерность своих проектов.

[Dark Hole]

Андрей Федоров: а что такое автопрефиксер?

[Андрей Федоров]

Dark Hole: программа/сервис который добавляет браузерные префиксы в css, например -moz, -webkit, -o, -ms... некоторые браузеры поддерживают новые и не очень свойства css только с этими префиксами. как в данном случае - для браузеров на основе webkit (например chrome) нужно писать

.item {
  background-image: url(http://lorempixel.com/800/600/sports/1);
  width: 800px;
  height: 600px;
  -webkit-filter: blur(10px);
          filter: blur(10px);
  -webkit-transform: scale(1.03, 1.03);
          transform: scale(1.03, 1.03);
}

[Саша]

Андрей Федоров: Годиться, работает с префиксом.
Не думал, что хрому последней версии он нужен, смешно даже)
Про Edge конечно загнули, если имеете ввиду браузер))

[Dark Hole]

Саша: нет, он вполне норм. По крайней мере кроссбраузерных углов нет(хотя с свг-шками не дружит)