<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Эффект увеличения картинки.

Эффект увеличения картинки.

В этой статье мы рассмотрим, как сделать эффект увеличения картинки, как на 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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.