4

Гуглю , но не нахожу. Подскажите , как называются эффекты ?

  1. При наведении на картинку её размеры не увеличиваются , но происходит как будто её приближение , плавный zoom какой то.
  2. Во время скролла прилетают блоки и появляется текст.
2
  • 3
    первый как я понимаю transform:scale второй tranform:translate и все это применяется с transform:transition для плавности.... а в целом это может быть css анимация 24 июл 2017 в 4:22
  • @Vipz, данные эффекты называются, mouseleave (более предыдущий вариант, mouseover). - это касается событий при наведении мышки.
    – And
    27 июл 2017 в 5:59

4 ответа 4

2
  1. transition

  2. Необходимо подключить js

3
  • 1
    зачем необходимо подключить js? 24 июл 2017 в 4:19
  • 1
    чтобы при определенной позиции скролла у нас появлялся какой-нибудь блок, думаю, что на одном css не получится это сделать 24 июл 2017 в 4:40
  • Пожалуйста, перенесите пример из статьи прямо в ответ
    – VenZell
    26 июл 2017 в 8:19
0
  1. transform: scale
  2. wow.js + animate.css
0
  1. transform:scale(1.1); в блоке с одинаковой высотой и overflow:hidden;.
  2. Wow.js + animate.css (для wow.js JQuery не нужен)

Я бы сейчас привел пример, да компьютера под рукой нет.

0

вот вам приближение при наведении

#wrapperFoto {
    position: relative;
    top: 5px;
    width: 700px;
    height: 450px;
    overflow: hidden;
}

#foto {
    position: absolute;
    width: 700px;
    height: 450px;
    background: url(https://s1.1zoom.ru/b5050/929/289494-alexfas01_1920x1200.jpg
    );
    background-size: cover;
    transition: all .3s;
}

#wrapperFoto:hover #foto {
    transform: scale(1.2);
}
<div id="wrapperFoto">
  <div id="foto"></div>
</div>

1
  • Поддерживаю ответы с примерами )
    – user245150
    27 авг 2017 в 6:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.