2

Увидел в сети массу пример и такую же массу примеров на ruSO и решил подобное реализовать но столкнулся с незнанием этой темы

Но по чуть чуть получилось сделать это :

body {
  background: white;
  background-image: url(https://i.imgur.com/d47ZIU3.jpg);
  background-size: cover;
}

.blobs {
  width:400px;
  display:flex;
  margin:30px auto;
  align-items:center;
  
}
.blob{
  width:100px;
  height:100px;
  background:#ccc;
  border-radius:50%;
  line-height:100px;
  text-align:center;
}
.blobs:hover{
  -webkit-filter: url("#goo");
          filter: url("#goo");
  transition:.5s;
}
.blob:hover{
  background:tomato;
  transition:.5s;
}
<div class="blobs">
  <div class="blob">4</div>
  <div class="blob">3</div>
  <div class="blob">2</div>
  <div class="blob">1</div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
  	</filter>
  </defs>
</svg>

Сам вопрос в том: как сделать это слипание только двум рядом стоящим элементам ? Если наводим на 3 то слипаются 2 и 4 ... как это можно сделать ?

2
  • Слипаются позади 3-го или прилипают именно к 3-му?
    – SVE
    Commented 3 июл. 2018 в 15:44
  • @HamSter да ... этот эффект так и выглядит как будто бусинки .. и все это при ховер
    – user33274
    Commented 3 июл. 2018 в 15:46

1 ответ 1

2

так? :

$('.blob').hover(
  function(){
    $(this).prev().addClass('prev');
    $(this).next().addClass('next');
  },
  function(){
    $(this).prev().removeClass('prev');
    $(this).next().removeClass('next');
  }
);
body {
  background: url(https://i.imgur.com/d47ZIU3.jpg) center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

.blobs {
  width:400px;
  height: 100px;
  position: relative;
  display:flex;
  margin:30px auto;
  align-items:center;
  
  transition: all .5s ease-in-out;
  
  -webkit-filter: url("#goo");
          filter: url("#goo");
  
}
.blob{
  width:100px;
  height:100px;
  background:#ccc;
  border-radius:50%;
  line-height:100px;
  text-align:center;
  
  cursor:pointer;
  
  transition: all .5s ease-in-out;
  
  position: absolute;
  top: 0;
}

.blob:nth-of-type(1){
  left: 0;
}

.blob:nth-of-type(2){
  left: 120px;
}

.blob:nth-of-type(3){
  left: 240px;
}

.blob:nth-of-type(4){
  left: 360px;
}

.blob.next {
  transform: translateX(-20px);
  background: tomato;
  color:#fff;
}

.blob.prev {
  transform: translateX(20px);
  background: tomato;
  color:#fff;
}

.blob:hover{
  background:tomato;
  color:#fff;
  
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  
  
<div class="blobs">
  <div class="blob">1</div>
  <div class="blob">2</div>
  <div class="blob">3</div>
  <div class="blob">4</div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
  	</filter>
  </defs>
</svg>

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.