Ефект збільшення картинки.

У цій статті ми розглянемо, як зробити ефект збільшення картинки, як на Amazon, використовуючи SCSS і JADE.

На дні Туреччини я був на Designer News і наткнувся на пост від Michael Weaver, який показує дійсно розумний спосіб використання псевдо-селектора : On-hover і загальний селектор ~, щоб створити ефект збільшення картинки, який буде стежити за вашою мишкою. Такий же використовується на Amazon для фотографій продуктів - все без використання jаvascript.

Я подумав, що було б непогано використовувати SCSS і JADE для циклів, щоб це здійснити, використовуючи змінну сітку замість жорсткої прив`язки.

Трохи попрацювавши, я зміг все це зв`язати воєдино. Зауважте, що колір накладок потрібен тільки для того, щоб показати, де знаходяться елементи сітки.

Отже, яка ж різниця між цим рішенням і оригінальним? використовуючи JADE і SCSS, цей спосіб дозволяє нам змінювати розмір сітки, змінюючи всього 2 числа - змінну в розмітці JADE і змінну в SCSS розмітці.

JADE досить простий, використовуючи одиночну змінну, яку ми множимо на саму себе, щоб згенерувати правильне число div.grid-item, яке поводиться як контролер, який зрушує картинку, коли вона збільшена. Так, в цьому прикладі наша gridRoot змінна дорівнює 5, тому сітка буде 5x5.

div.grid-wrapper 
-var gridRoot =5- 
-for(i =0- i lt; gridRoot * gridRoot- i++) 
 div.grid-item 
 img.zoom-image(alt=`Placeholder image` src=`Http://fillmurray.com/g/400/400`)

І тут "робоча конячка" цього проекту - SCSS. Зауважте, що це також має $ Grid-root змінну. Це потрібно для того, щоб відповідати JADE gridRoot змінної в порядку, щоб все працювало. Ми також встановлюємо розмір контейнера і on-hover zoom фактор в перших трьох рядках. Крім цих трьох змінних, інша частина коду може бути залишена одна, тому що ці змінні управляють логікою генерації решти коду.

З метою зручності читання роботу решти коду я пояснив в коментарях до коду.

$ container-size:400px- 
$ grid-root:5- 
$ zoom-factor:1.5- 
// The above variables control all the output logic! 
 
// $ zoom-size is the size of the image once it`s 
// zoomed in. 
// $ offset is the amount of the image that hangs off 
// the wrapper div once it`s zoomed in. 
// $ stepper-count lets us pen the whole image if the 
// grid is an odd number of units across. 
// $ stepper is the number of pixels we need to shift 
// the image as we move from grid item to grid item. 
$ zoom-size: $ container-size * $ zoom-factor- 
$ offset: $ zoom-size - $ container-size- 
$ stepper-count: $ grid-root- 
@if $ grid-root %2==1{ 
 $ stepper-count: $ grid-root -1- 
} 
$ stepper: $ offset / $ stepper-count- 
 
// Here`s the main wrapper. Flexbox FTW. 
.grid-wrapper { 
 display: flex- 
 flex-wrap: wrap- 
 height: $ container-size- 
 overflow: hidden- 
 position: relative- 
 width: $ container-size- 
} 
 
// Here are the individual grid items-each sized 
// according to the size of the grid. 
.grid-item { 
 height:100%/ $ Grid-root- 
 width: 100% / $ grid-root- 
 
// SCSS has a neat percentage () function which 
// takes our 1.5 and turns it into 150% 
:hover ~ img { 
 height: percentage($ zoom-factor) - 
 width: percentage($ zoom-factor) - 
} 
 
// This loop iterates through the size of the grid 
// and offsets the left and top positions accordingly 
@for $ i from1 through $ grid-root { 
// Because SCSS thinks the stuff between the () is 
// a string, you have to interpolate variables using # {} 
:hover:nth-of-type(# {$ Grid-root} n + # {$ i}) ~ img { 
left:(($ i -1)* $ stepper)*-1- 
} 
 
// Here we create a variable to get the math right for 
// how we shift the image when moving vertically 
 $ t:(($ i -1)* $ grid-root)+1- 
 
:hover:nth-of-type(1n+# {$ T}) ~ .zoom-image { 
top:(($ i -1)* $ stepper)*-1- 
} 
} 
} 
 
// Base styles for the image element. Note the z-index 
// of value -1. Without this, our image would be on 
// top of our grid, and we would not be able to hover 
// on our grid items! 
.zoom-image { 
 height:100% - 
 left:0- 
 position: absolute- 
 top:0- 
 transition: all 0.25s- 
 width:100% - 
 z-index:-1- 
}