<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

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

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

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

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

Подписавшись по 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):

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