Как сделать такую тень?

Question

[Ilya Korablev]

Всем здравствуйте.
Как реализовать тень, как тут? Чтобы когда ты скроллишь вверх, и наверху ничего нет - то появлялась тень?

Answer 1

[twobomb]

Можно типа так https://jsfiddle.net/twobomb/uk9tgngq/

Comments

[Ilya Korablev]

Спасибо, но как в вашем случае скруглить тень и добавить плавности?

[twobomb]

Я просто показал как можно это реализовать, вот посмотрите второй вариант совсем другим способом, здесь в css в селекторе #shadow можете настроить визуализацию, а также в коде есть несколько переменный для настройки плавности и т.п. https://jsfiddle.net/twobomb/uk9tgngq/

Answer 2

[teotlu]

Простите за оффтоп, просто я открыл исходный код сайта и наткнулся вот на это XD
А так, GreatRash верно говорит.

Comments

[Igor Nikolaev]

Ну, ведь и в правду не нужен =))))

[kn1ght_t]

хахахахах

[Ilya Korablev]

XDD

Answer 3

[GreatRash]

radio.vlad805.ru/v2.js - 157 строка отслеживает колесо мыши и запускает 212 строку

Comments

[Ilya Korablev]

Если я все правильно сделал, то почему не работает?
dev.swipeshot.ru/scroll.html

[GreatRash]

Ilya Korablev: Uncaught SyntaxError: Unexpected token ( - на 29 строке

[Ilya Korablev]

GreatRash: так как я нифига не шарю в js, не могли бы пояснить тупому, что нужно где исправить?

Answer 4

[M K]

я бы сделал так:

element.onscroll = function (e) {
elem=e.target
  if (elem.scrollTop == 0)
    //с помощью CSS делаем тень СВЕРХУ
  else if (elem.scrollTop == elem.scrollTopMax)
    //с помощью CSS делаем тень СНИЗУ
}

Comments

[Ilya Korablev]

Можно пример?

[M K]

Ilya Korablev: Вот, вроде кроссбраузерно даже получилось =)
jsfiddle.net/Maxsior/qdvj0rac

[Ilya Korablev]

Максим Кудрявцев: спасибо. Но почему не работает снизу?

[Ilya Korablev]

Максим Кудрявцев: хотя, оно работает, но как сделать так, чтобы отображалось снизу, а не сверху?

[M K]

Ilya Korablev: Всё, подправил, не хватало ещё одного обработчика, теперь должно работать ;)

[Ilya Korablev]

Максим Кудрявцев: ссылку можно?

[M K]

Ilya Korablev: сыровато, всё равно, конечно, но после небольшои оптимизации очень даже ничего =) особенно, если учесть, что не подключалось 10Кбаит лишнего кода в виде jQuery

[M K]

Ilya Korablev: всё та же:
jsfiddle.net/Maxsior/qdvj0rac

[Ilya Korablev]

Максим Кудрявцев: >>jsfiddle.net/Maxsior/qdvj0rac
Нет ее снизу.

[Ilya Korablev]

Максим Кудрявцев: ах, да. Как эту тень скруглить?

[M K]

Ilya Korablev: Всё разобрался, грёбаная кроссбраузерность >:-[
jsfiddle.net/Maxsior/qdvj0rac
Теперь точно работает
i71.fastpic.ru/big/2015/0602/60/a4b0160e103fafacda...

[Ilya Korablev]

Максим Кудрявцев: так как скруглить-то? Чтобы тень не была прямоугольной.

[M K]

Ilya Korablev: можно поколдовать с border-radius у блоков с тенями

[M K]

Ilya Korablev: вот как там сделали: i69.fastpic.ru/big/2015/0602/46/12c33c53f34a723d3c...

[Ilya Korablev]

Максим Кудрявцев: я сделал так - получился ужас. Попробуйте сами. Так как все-таки в нашем случае сделать?

[Ilya Korablev]

Максим Кудрявцев: ну помогите:(