CSS Анимация BLOB-объектов

Question

Попытка сделать эти липкие CSS движущиеся капли. Основная настройка c заключается в том, что вы создаете размытие кругов, а затем добавляете контраст к их контейнеру. Проблема в том, что всякий раз, когда я делаю это с пользовательскими цветами, весь элемент просто исчезает. Я попробовал это на этих демонстрациях и то же самое. Кто-нибудь знает почему или знает обходной путь?

Вот учебник, которым я следовал: https://css-tricks.com/shape-blobbing-css/

Вот код:

$(document).ready(function() {
  $(".dot").hover(function() {
    var cur = $(this);
    var dest = cur.position().left;
    var t = 0.6;
    TweenMax.to($(".select"), t, {
      x: dest,
      ease: Back.easeOut
    })
  });
  var lastPos = $(".select").position().left;

  function updateScale() {
    var pos = $(".select").position().left;

    var speed = Math.abs(pos - lastPos);
    var d = 44;
    var offset = -20;
    var hd = d / 2;
    var scale = (offset + pos) % d;
    if (scale > hd) {
      scale = hd - (scale - hd);
    }
    scale = 1 - ((scale / hd) * 0.35);
    TweenMax.to($(".select"), 0.1, {
      scaleY: scale,
      scaleX: 1 + (speed * 0.06)
    })

    lastPos = pos;
    requestAnimationFrame(updateScale);
  }
  requestAnimationFrame(updateScale);
  $(".dot:eq(0)").trigger("mouseover");
})

.text {
  position: relative;
  left: 110px;
  top: 10px;
  font-family: 'Baskerville', Georgia, serif;
  font-size: 17px;
}

a {
  color: inherit;
}

.dots {
  list-style-type: none;
  background: white;
  -webkit-filter: blur(5px) contrast(10);
  padding: 0;
  margin: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  margin-left: -10px;
  padding-right: 10px;
  position: relative;
  left: 100px;
  top: 30px;
}

.dot {
  display: inline-block;
  vertical-align: middle;
  border-radius: 100%;
  width: 30px;
  height: 30px;
  background: black;
  margin-left: 5px;
  margin-right: 5px;
  cursor: pointer;
  color: white;
  position: relative;
  z-index: 2;
}

.select {
  display: block;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  background: black;
  //opacity:0.6;
  //transition:transform 300ms ease-in-out;
  position: absolute;
  z-index: 3;
  top: 15px;
  left: 0px;
  pointer-events: none;
}

<div class="text">
  <h1>Gooey pagination</h1>
  <a href="https://dribbble.com/shots/1676635-Page-scroll-concept">Based on a dribbble by Kreativa Studio</a>. <br />
  Made by <a href="codepen.io/lbebber">Lucas Bebber</a>. <br /> <br />
  Hover on the dots bellow
</div>
<ul class="dots">
  <li class="select"></li>
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min.js"></script>

Если вы go в одной из их демонстраций и попытаетесь изменить цвет на что-то вроде pink или #A0D9A8, вы увидите что я имею в виду:

Answer 1

Это действительно интересно. Кажется, что для работы цвет должен вызывать очень сильный контраст из-за используемого правила filter. Таким образом, вам придется использовать яркие цвета, чтобы они появились. Цвета pink или #A0D9A8 не слишком броски для blur, который заставит его исчезнуть. Поэтому попробуйте использовать более яркие цвета, такие как #e83ce8, это похоже на розовый цвет:

$(document).ready(function() {
  $(".dot").hover(function() {
    var cur = $(this);
    var dest = cur.position().left;
    var t = 0.6;
    TweenMax.to($(".select"), t, {
      x: dest,
      ease: Back.easeOut
    })
  });
  var lastPos = $(".select").position().left;

  function updateScale() {
    var pos = $(".select").position().left;

    var speed = Math.abs(pos - lastPos);
    var d = 44;
    var offset = -20;
    var hd = d / 2;
    var scale = (offset + pos) % d;
    if (scale > hd) {
      scale = hd - (scale - hd);
    }
    scale = 1 - ((scale / hd) * 0.35);
    TweenMax.to($(".select"), 0.1, {
      scaleY: scale,
      scaleX: 1 + (speed * 0.06)
    })

    lastPos = pos;
    requestAnimationFrame(updateScale);
  }
  requestAnimationFrame(updateScale);
  $(".dot:eq(0)").trigger("mouseover");
})

.text {
  position: relative;
  left: 110px;
  top: 10px;
  font-family: 'Baskerville', Georgia, serif;
  font-size: 17px;
}

a {
  color: inherit;
}

.dots {
  list-style-type: none;
  background: white;
  -webkit-filter: blur(5px) contrast(10);
  padding: 0;
  margin: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  margin-left: -10px;
  padding-right: 10px;
  position: relative;
  left: 100px;
  top: 30px;
}

.dot {
  display: inline-block;
  vertical-align: middle;
  border-radius: 100%;
  width: 30px;
  height: 30px;
  background: #e83ce8;
  margin-left: 5px;
  margin-right: 5px;
  cursor: pointer;
  color: white;
  position: relative;
  z-index: 2;
}

.select {
  display: block;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  background: #e83ce8;
  position: absolute;
  z-index: 3;
  top: 15px;
  left: 0px;
  pointer-events: none;
}

<div class="text">
  <h1>Gooey pagination</h1>
  <a href="https://dribbble.com/shots/1676635-Page-scroll-concept">Based on a dribbble by Kreativa Studio</a>. <br />
  Made by <a href="codepen.io/lbebber">Lucas Bebber</a>. <br /> <br />
  Hover on the dots bellow
</div>
<ul class="dots">
  <li class="select"></li>
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min.js"></script>

Answer 2

Проверьте, что написано на всей странице, по CSS трюкам, особенно по поводу яркости.

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

.dots{
  ...
  -webkit-filter: blur(5px) contrast(10) brightness(-50);
  ...
}

.dot {
  ...
  background: /* black */ pink;
  ...
}

.select { /* EDIT */
  ...
  background: /* black */ pink;
  ...
}

EDIT: я использовал переменную CSS в этой скрипке:

https://jsfiddle.net/p97qxzew/