Тонкий эффект наклона для ваших изображений Image Tilt Effect

Как это работает

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

Наведите курсор на изображение, сетки , чтобы увидеть , как работает эффект

• 
  опции по умолчанию:

  "extraImgs" : 2,
  "opacity" : 0.7,
  "bgfixed" : true,
  "movement": { 
  	"perspective" : 1000, 
  	"translateX" : -10, 
  	"translateY" : -10, 
  	"translateZ" : 20, 
  	"rotateX" : 2, 
  	"rotateY" : 2,
  	"rotateZ" : 2 
  }

• 
  опции:

  "extraImgs" : 4,
  "opacity" : 0.5,
  "bgfixed" : true,
  "movement": { 
  	"perspective" : 500, 
  	"translateX" : -15, 
  	"translateY" : -15, 
  	"translateZ" : 20, 
  	"rotateX" : 15, 
  	"rotateY" : 15 
  }

• 
  опции:

  "extraImgs" : 2,
  "opacity" : 0.7,
  "bgfixed" : false,
  "movement": { 
  	"perspective" : 1000, 
  	"translateX" : 30, 
  	"translateY" : 30, 
  	"translateZ" : -50, 
  	"rotateX" : 0, 
  	"rotateY" : 0,
  	"rotateZ" : 10, 
  }

Опции

Нормальный изображение заменяется слоев полупрозрачных подразделений и того же изображения . Каждый слой будет перемещена в 3D , создавая тонкую иллюзию перспективы .

extraImgs

Number of extra background-image divisions; min:1, max:5

extraImgs : 2

opacity

The opacity value for the background-image divisions

opacity : 0.7

bgfixed

Movement of first layer; by default it's not moving

bgfixed : true

movement

The movemement configuration for each background-image division

movement : { ... }

perspective

The perspective value for the 3D transforms

perspective : 1000

translateX

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

translateX : -10

translateY

The relative movement on the y-axis.

translateY : -10

translateZ

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

translateZ : 20

rotateX

Относительное вращение на оси ординат . Перспектива значение должно быть установлено .

rotateX : 2

rotateY

The relative rotation on the y-axis. A perspective value needs to be set.

rotateY : 2

rotateZ

The relative rotation on the Z-axis. A perspective value needs to be set.

rotateZ : 0

Добавить класс " наклона эффект " для соответствующего изображения. Контейнер изображение должно иметь явное ширину и высоту.

To initialize either set the options in "data-tilt-options" or initialize with JavaScript: new TiltFx(element, options)

Examples