Затухайте края div с помощью jQuery

Как я могу сгладить края div с помощью jQuery? Подумайте о карусели с изображениями внутри, которые скользят горизонтально. Как я могу угаснуть левую и правую стороны, чтобы изображения вблизи краев постепенно исчезали.

Надеюсь, что это ясно.:)

Ответ 1

Браузеры Webkit (т.е. Chrome и Safari) поддерживают свойство CSS с именем -webkit-mask, которое позволяет накладывать элемент с эффектом CSS3 (т.е. линейным градиентом).

В приведенном ниже правиле таблицы стилей будет применен затухающий белый край к элементам класса .mask:

 .mask {
     -webkit-mask: -webkit-linear-gradient(
          left,
         rgba(255,255,255,0),
         rgba(255,255,255,1) 5%,
         rgba(255,255,255,1) 95%,
         rgba(255,255,255,0)
     );
 }

К сожалению, это будет только работать в браузерах на основе webkit. Если вы хотите поддержать все остальное (что вы, вероятно, делаете), лучше всего использовать прозрачные PNG.

Ответ 2

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

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

#container_overlay{
   box-shadow: inset 0px 0px 10px 10px white;
   z-index:5;// higher than the container with the images
}

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

#end_overlay{
    width:2px;
    box-shadow: 0px 0px 10px 10px white;
    z-index:5;// higher than the container with the images
}

float, который находится влево или вправо, и он должен работать на любом браузере, который понимает оверлей, и любой без наложения игнорирует его. Я не думаю, что вам нужно что-то внутри, так что это был бы невидимый объект, если бы его тень не пролилась.

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

Ответ 3

Вы можете использовать его, чтобы установить несколько div с уменьшением прозрачности и поместить это в маску над элементом, который вы хотите погасить, как описано здесь: http://www.bennadel.com/blog/1014-Creating-Transparent-Gradients-With-jQuery.htm

Ответ 4

Я думаю, что это может быть то, что вы ищете: http://hunyadi.info.hu/en/projects/sigplus/testsuite/30-sigplus-sliders

Рич

Ответ 5

Легким способом может быть отображение набора div по краям, например, вертикальных полос с разными уровнями непрозрачности, что создает впечатление исчезновения изображений.

Ответ 6

Как сказал Алекс, самый простой способ - это, вероятно, наложение чего-то, чтобы угаснуть базовый div. Однако я бы просто использовал прозрачный градиент png.

Это нелегко будет работать в IE6, но всегда есть способ (лично я больше не поддерживаю IE6):

http://24ways.org/2007/supersleight-transparent-png-in-ie6