Сентябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Указатель местоположения для карты и пульсирующая иконка телефона


Указатель местоположения для карты

У landing page часто внизу идет карта с указанием адреса.

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

Каркас будет из дива с классом location-item с двумя span внутри.

  • Первый location-pointer.
  • Второй location-pulse.

Код в index.html.

Применим стилизацию в main.sass.

  1. Чтобы указатель местоположения &-item привязать к определенной точке на карте зададим position: absolute, с указанием расстояния сверху и слева в процентах. Переместим элементы transform: translate (-50%, -50%).
  2. &-pointer сделаем блочным элементом display: block, чтобы задать размер ширины width: 80px и высоты height: 80px, Фон будет фиолетовый background-color: #b641b0, а углы у элемента округлим border-radius: 50%. Получился круг, теперь заострим две стороны, вытянем к нулю свойством border-bottom-right-radius: 0. Чтобы заостренная сторона была направлена вниз, применим transform: rotate (45deg).
  3. Сделаем внутри указателя кружок меньшего диаметра, для этого воспользуемся элементом &:before. Установим position: absolute. Зададим все параметры, чтобы сделать круг, уменьшим диаметр свойством transform: scale (.4). Добавим тень для красоты box-shadow: 5px 5px 10px rgba (0,0,0,.5).
  4. Теперь сделаем пульсирующий блок в центре указателя. У &-pulse будет display: block. Сместим вниз на bottom: -25px и влево. Зададим размеры как у прямоугольника. После закругления border-radius: 50% получится овал. Фон будет background: rgba (255,255,255,.5). полупрозрачный. Чтобы прямоугольник был ниже указателя добавим z-index: -1.
  5. За границами овала добавим псевдоэлемент &:before. Не будет отступов от овала, ширина и высота 100 процентов. background-color: transparent прозрачный фон и рамка будет три пикселя border: 3px solid #b641b0. Установим ниже овала z-index: -2. Добавим анимацию animation: animate 1s linear infinite.

Для анимации будет два интервала @keyframes animate.

  • 0%
  1. transform: scale (1)
  2. opacity: 1
  • 100%
  1. transform: scale (2)
  2. opacity: 0

Код в main.sass.

Второй вариант указателя местоположения с размытым пульсирующим цветом.

указателя местоположения с размытым пульсирующим цветом

Для этого меняем в html название у второго span на location-pulse2 и дописываем новые стили к этому классу.

Пульсирующая иконка телефона.

Пульсирующая иконка телефона

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

Попробуем сделать. Каркас будет из дива с классом pulse-item, внутри будет ссылка с иконкой телефона fa fa-phone.

Оформим иконку телефона.

Зададим круг у &-item и зададим цвет и размер иконки fa.

Для внешнего ободка воспользуемся &:before.

Сделаем синюю полоску border: 3px solid blue и во все стороны укажем отступ -20px.

Добавим анимацию animation: animate 1.5s linear infinite.

Комментариев нет