Эффект увеличения картинки.
В этой статье мы рассмотрим, как сделать эффект увеличения картинки, как на Amazon, используя SCSS и JADE.
На дне Турции я был на Designer News и наткнулся на пост от Michael Weaver, который показывает действительно умный способ использования псевдо-селектора :on-hover и общий селектор ~, чтобы создать эффект увеличения картинки, который будет следить за вашей мышкой. Такой же используется на Amazon для фотографий продуктов - все без использования javascript.
Я подумал, что было бы неплохо использовать SCSS и JADE для циклов, чтобы это осуществить, используя переменную сетку вместо жесткой привязки.
Немного поработав, я смог все это связать воедино. Заметьте, что цвет накладок нужен только для того, чтобы показать, где находятся элементы сетки.
Итак, какая же разница между этим решением и оригинальным? Используя JADE и SCSS, этот способ позволяет нам менять размер сетки, изменяя всего 2 числа - переменную в разметке JADE и переменную в SCSS разметке.
JADE достаточно прост, используя одиночную переменную, которую мы умножаем на саму себя, чтобы сгенерировать правильное число div.grid-item, которое ведет себя как контроллер, который сдвигает картинку, когда она увеличена. Так, в этом примере наша gridRoot переменная равна 5, поэтому сетка будет 5x5.
div.grid-wrapper
- var gridRoot = 5;
- for (i = 0; i < gridRoot * gridRoot; i++)
div.grid-item
img.zoom-image(alt='placeholder image' src='http://www.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 from 1 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 wouldn't 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;
}
На этом все. Меняя всего лишь 2 переменные, вы можете получить сетку 10x10 или 25x25.
Источник: http://dancort.es/web-design/2015/11/29/on-hover-zoom-effect-no-js.html
-
Создано 14.12.2015 20:00:00
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.