У меня есть CTA, который выдвигается, когда вы наводите курсор на него. У меня проблема в том, что текст иногда трудно читать в зависимости от цвета фона. Я создал демонстрацию того, чего я пытаюсь достичь, вы можете проверить это здесь:

Демо на CodePen

Суть этой демонстрации: HTML:

<div class="at-about-fab">
  <div class="at-about-fab__thumbnail">
    <img alt="Fiat Professional" src="https://fiatprofessionaleastlondon.co.za/wp-content/uploads/2018/02/CallUs.png" />
  </div>
  <div class="at-about-fab__meta">
    <h2>Call Us Now</h2>
    <p><a href="te:555-555-5555">555 555 5555</a></p>
  </div>
</div>

CSS выглядит следующим образом:

.at-about-fab {
  z-index: 999999;
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  flex-direction: row;
  transform: translateX(100%);
  transition: 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &:before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: -58px;
    width: 58px;
    height: 48px;
    transform: translateY(-50%);
  }

  &:hover {
    transform: translateX(0%);

    .at-about-fab__meta {
      opacity: 1;
    }
  }

  &__thumbnail {
    position: absolute;
    top: 50%;
    left: -58px;
    background: #FFFFFF;
    width: 48px;
    height: 48px;
    border: 1px solid #EEEEEE;
    border-radius: 100%;
    padding: 4px;
    box-sizing: border-box;
    transform: translateY(-50%);
    overflow: hidden;
    cursor: pointer;

    img {
      display: block;
      width: 100%;
      border-radius: 100%;
    }
  }

  &__meta {
    font-family: 'Open Sans', sans-serif;
    opacity: 0;
    transition: 0.2s ease;

    h2,
    p {
      margin: 0;
      padding: 0;
    }

    h2 {
      color: #444444;
      font-size: 14px;
      font-weight: 600;
    }

    p {
      color: #CCCCCC;
      font-size: 12px;
      font-weight: 400;
    }

    a {
      color: inherit;
      font-weight: 400;
      text-decoration: none;
    }
  }
}

Любые предложения о том, как получить это право? Я посмотрел несколько примеров на основе JavaScript, но мои навыки JavaScript еще не там ...

Благодарю

2
robhob 23 Фев 2018 в 11:43

3 ответа

Лучший ответ

Вы можете попробовать что-то вроде этого:

Идея

  • Добавьте событие mouseover в основной контейнер.
  • В этом обработчике есть переменная, которая будет содержать имя класса, который должен быть добавлен.
  • При наведении:
    • Получить все разделы.
    • Проверьте границы текущего раздела с помощью значка.
    • Если верхняя часть значка больше верхней части раздела, обновите переменную className
    • Если нет, прервите цикл.
    • Теперь удалите все классы, добавьте className в контейнер. Вам также придется написать соответствующие классы в CSS.

Пример: Обновленный CodePen

var iconContainer = document.querySelector('.at-about-fab');

iconContainer.addEventListener('mouseover', function () {
  var bounds = this.getBoundingClientRect();
  var sections = document.querySelectorAll('.section');
  var className = '';
  Array.from(sections).some(function(el) {
    var currentBounds = el.getBoundingClientRect();
    if(bounds.top > currentBounds.top) {
      className = el.getAttribute('id');
    }
    else {
      return true;
    }
  });
  this.classList.remove('section1', 'section2', 'section3', 'section4');
  this.classList.add(className);
})
0
Rajesh 23 Фев 2018 в 10:14

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

Резюме было сделано в комментариях к CSS.

.at-about-fab {
  z-index: 999999;
  position: fixed;
  /*Dropped the right to hide the text block a little more - you can ignore*/
  right: 0px;
  bottom: 20px;
  /*Add a background that best blends. White is not a bad option as allows many with eye issues read the text behind. Add a little padding*/
  background-color: white;
  padding: 5px 20px;
  display: flex;
  align-items: center;
  flex-direction: row;
  transform: translateX(100%);
  transition: 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;


  &:before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: -58px;
    width: 58px;
    height: 48px;
    transform: translateY(-50%);
  }

  &:hover {
    transform: translateX(0%);

    .at-about-fab__meta {
      opacity: 1;
    }
  }

  &__thumbnail {
    position: absolute;
    top: 50%;
    left: -58px;
    background: #FFFFFF;
    width: 48px;
    height: 48px;
    border: 1px solid #EEEEEE;
    border-radius: 100%;
    padding: 4px;
    box-sizing: border-box;
    transform: translateY(-50%);
    overflow: hidden;
    cursor: pointer;

    img {
      display: block;
      width: 100%;
      border-radius: 100%;
    }
  }

  &__meta {
    font-family: 'Open Sans', sans-serif;
    opacity: 0;
    transition: 0.2s ease;

    h2,
    p {
      margin: 0;
      padding: 0;
    }

    h2 {
      color: #444444;
      font-size: 14px;
      font-weight: 600;
    }

    p {
      /*It is advisable not to go so off color. So lighter grey of the #444 you used is a better option so I went for #999 */
      color: #999;
      font-size: 12px;
      font-weight: 400;
    }

    a {
      color: inherit;
      font-weight: 400;
      text-decoration: none;
    }
  }
}

/* Just for the sake of testing */
.content{
    position:relative;
}


#wrapper
{
    position:relative;
}

.section
{
    width: 100%;
    text-align:center;
    padding:250px 0;
    border:1px solid #666;
}

#section1
{
    background: #fff;
}

#section2
{
    background: #000;
    color:#fff;
}

#section3
{
    background: #444444;
}

#section4
{
    background: #BA2322;
}

Codepen Demo

0
Carl Binalla 23 Фев 2018 в 09:13

Вы можете использовать mix-blend-mode: exclusion; с помощью атрибута data и селектора ::after:

.at-about-fab {
  z-index: 999999;
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.at-about-fab:before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: -58px;
  width: 58px;
  height: 48px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.at-about-fab:hover {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
.at-about-fab:hover .at-about-fab__meta {
  opacity: 1;
}
.at-about-fab__thumbnail {
  position: absolute;
  top: 50%;
  left: -58px;
  background: #FFFFFF;
  width: 48px;
  height: 48px;
  border: 1px solid #EEEEEE;
  border-radius: 100%;
  padding: 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  overflow: hidden;
  cursor: pointer;
}
.at-about-fab__thumbnail img {
  display: block;
  width: 100%;
  border-radius: 100%;
}
.at-about-fab__meta {
  font-family: 'Open Sans', sans-serif;
  opacity: 0;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}
.at-about-fab__meta h2,
.at-about-fab__meta p {
  margin: 0;
  padding: 0;
}
.at-about-fab__meta h2 {
  color: #444444;
  font-size: 14px;
  font-weight: 600;
}
.at-about-fab__meta p {
  color: #CCCCCC;
  font-size: 12px;
  font-weight: 400;
}
.at-about-fab__meta a {
  color: inherit;
  font-weight: 400;
  text-decoration: none;
}

/* Just for the sake of testing */
.content {
  position: relative;
}

#wrapper {
  position: relative;
}

.section {
  width: 100%;
  text-align: center;
  padding: 250px 0;
  border: 1px solid #666;
  position: relative;
  color: black;
}
.section:after {
  content: attr(data-content);
  position: absolute;
  width: 100%;
  height: auto;
  text-align: center;
  top: 50%;
  left: 0;
  mix-blend-mode: exclusion;
  color: white;
}

#section1 {
  background: #fff;
}

#section2 {
  background: #000;
}

#section3 {
  background: #444444;
}

#section4 {
  background: #BA2322;
}
<!-- Credits -->
<!-- Developer - Andy Tran (https://andytran.me) -->
<!-- Design - Andy Tran (https://andytran.me) -->
<div class="at-about-fab">
  <div class="at-about-fab__thumbnail">
    <img alt="Fiat Professional" src="https://fiatprofessionaleastlondon.co.za/wp-content/uploads/2018/02/CallUs.png" />
  </div>
  <div class="at-about-fab__meta">
    <h2>Call Us Now</h2>
    <p><a href="te:555-555-5555">555 555 5555</a></p>
  </div>
</div>

<!-- Just for the sake of testing -->
<div class="content">
  <div id="wrapper">
      <div class="section" id="section1" data-content="section1"></div>
      <div class="section" id="section2" data-content="section2"></div>
      <div class="section" id="section3" data-content="section3"></div>
      <div class="section" id="section4" data-content="section4"></div>
  </div>
</div>

Здесь также есть ссылка на обновленный кодекс с помощью SCSS.

0
Huelfe 23 Фев 2018 в 09:23