0

Здравствуйте. Помогите мне сделать эффект. У меня есть блоки с категориями. При наведении на один из блоков, нужно, что бы у всех остальных остальных блоков, включая на который навели, изменялся фон.

Вот пример, как нужно сделать:

введите сюда описание изображения Источник: http://www.veintidosgrados.com/work

И можно ли это как-то сделать только с одним CSS ?

3
  • Да можно. А плавную анимацию вам обеспечит transition. w3schools.com/css/css3_transitions.asp
    – goodalien
    13 янв 2017 в 21:11
  • А можно подробнее?) transition не очень интересует.. а вот как менять background на всех элементах когда используешь hover.. было бы интересно взглянуть)
    – stepa
    13 янв 2017 в 21:19
  • Хм, ну есть вариантик, но в реализации сложненько
    – goodalien
    13 янв 2017 в 22:13

2 ответа 2

6

Одним CSS вряд ли. Но предлагаю такое гибкое решение. Вы можете добавлять сколько угодно пунктов, но картинка будет нормально отображаться:

var items = document.querySelectorAll('.wallpaper__item');

items.forEach(function(item) {
  item.addEventListener("mouseover", function() {
  	var bg_n = this.getAttribute('class').replace(/^.*wallpaper\_{2}item\_bg\-{2}(\d+).*$/, '$1');
  	document.querySelector('.wallpaper').classList.add('wallpaper_bg--'+bg_n);
    
    var bg_i = document.createElement('div');
    bg_i.setAttribute('class', 'wallpaper__item-bg wallpaper__item-bg_img--'+bg_n);
    
    for(var i = 0; i < items.length; i++){
    	(function(i) {
    		var item__bg = bg_i.cloneNode(true);
      	item__bg.style.backgroundSize = (100 * items.length) + '% 100%';
    		item__bg.style.backgroundPositionX = '-' + (100 * i) + '%';
    		items[i].appendChild(item__bg);
        item__bg.classList.add('wallpaper__item-bg_show');
        
      	setTimeout(function() {
      		item__bg.classList.remove('wallpaper__item-bg_show');
      	}, 500);
      })(i);
    };
  });
  item.addEventListener("mouseout", function() {
  	var bg_n = this.getAttribute('class').replace(/^.*wallpaper\_{2}item\_bg\-{2}(\d+).*$/, '$1');
  	document.querySelector('.wallpaper').classList.remove('wallpaper_bg--'+bg_n);
    
    items.forEach(function(item) {
      var items__bg = item.querySelectorAll('.wallpaper__item-bg');
      for(var i = 0; i < items__bg.length; i++){
      	(function(i) {
      		items__bg[i].classList.add('wallpaper__item-bg_hide');
        	setTimeout(function() {
          	if(items__bg.length > 0 && items__bg[i].parentNode){
        			item.removeChild(items__bg[i]);
            };
      		}, 500);
      	})(i);
      };
    });
  });
});
.wallpaper {
  display: flex;
  position: relative;
  width: 100%;
}
.wallpaper__item {
  position: relative;
  height: 400px;
  margin: 10px;
  background-color: black;
  flex: 1;
  cursor: pointer;
}
.wallpaper__item-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Появление/исчезновение */
.wallpaper__item-bg.wallpaper__item-bg_show {
  opacity: 0;
  animation: show 0.5s linear forwards;
}
@keyframes show {
  from {opacity: 0}
  to {opacity: 1}  
}
.wallpaper__item-bg.wallpaper__item-bg_hide {
  opacity: 1;
  animation: hide 0.5s linear forwards;
}
@keyframes hide {
  from {opacity: 1}
  to {opacity: 0}  
}

/* Анимация качания */
.wallpaper__item:nth-child(2n+2) {
  animation: size__type0 10s infinite;
}
.wallpaper__item:nth-child(2n+1) {
  animation: size__type1 10s infinite;
}
@keyframes size__type0 {
  from {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  to { 
    transform: scale(1);
  }  
}
@keyframes size__type1 {
  from {
    transform: scale(1.05);
  }
  50% {
    transform: scale(1);
  }
  to { 
    transform: scale(1.05);
  }  
}

.wallpaper__item-bg_img--0 {background-image: url('http://wp.widewallpapers.ru/2k/nature/forest/1920x1200/forest-wallpaper-1920x1200-004.jpg')}
.wallpaper__item-bg_img--1 {background-image: url('http://www.anawalls.com/repic/image.php?src=http://www.anawalls.com/images/nature/sea-surface-calm-smooth-surface-light-night.jpg&h=540&w=960')}
.wallpaper__item-bg_img--2 {background-image: url('http://www.ellf.ru/uploads/posts/2015-07/1437948968_001-ellf.ru.jpg')}
.wallpaper__item-bg_img--3 {background-image: url('http://www.sunhome.ru/i/wallpapers/134/oboi-na-rabochii-stol-gorod.orig.jpg')}
.wallpaper__item-bg_img--4 {background-image: url('http://anywalls.com/pic/201210/1366x768/anywalls.com-14971.jpg')}
<div class="wallpaper">
  <div class="wallpaper__item wallpaper__item_bg--0"></div>
  <div class="wallpaper__item wallpaper__item_bg--1"></div>
  <div class="wallpaper__item wallpaper__item_bg--2"></div>
  <div class="wallpaper__item wallpaper__item_bg--3"></div>
  <div class="wallpaper__item wallpaper__item_bg--4"></div>
</div>

Пример на стороннем редакторе: jsfiddle.net-sct48ty9

1
  • Спасибо огромное!!! Просто волшебно)))
    – stepa
    13 янв 2017 в 22:06
0

Я придумал, как можно реализовать данную задачу на одном CSS. У данного решения есть свои плюсы.

Плюсы:

  1. Меньшее употребление ресурсов при быстрой смене картинок
  2. Более плавная анимация
  3. Это помпезно круто :)

Минусы:

  1. Большое количество кода
  2. Сложность реализации
  3. Сложные вычисления размеров
  4. Нету гибкости (для новых блоков нужно переделывать вычисления, а это пункт 3)
  5. Все пункты и вычисления нужно указывать в ручную

Пример:

.nav {
  display: flex;
  position: relative;
  width: 100%;
  justify-content: center;
}
.nav__item {
  display: block;
  position: relative;
  width: 102px;
  height: 400px;
  margin: 10px;
  background-color: transparent;
  transform: skewX(-10deg);
  z-index: 2;
}

.nav__list {
  display: flex;
  position: absolute;
  left: 0;
  width:100%;
  justify-content: center;
}
.nav__item-bg {
  display: block;
  position: relative;
  width: 102px;
  height: 400px;
  margin: 10px;
  background-color: black;
  transform: skewX(-10deg);
  z-index: 1;
  overflow: hidden;
}
.nav__item-img {
    display: block;
    position: absolute;
    left: -35px;
    top: 0;
    width: calc(100% + 70px);
    height: 100%;
    background-size: calc(400% - (35px * 4)) 100%;
    transform: skewX(10deg);
    opacity: 0;
    transition: all 0.3s;
}
.nav__item-bg:nth-child(1) .nav__item-img {
  background-position: 0%;
}
.nav__item-bg:nth-child(2) .nav__item-img {
  background-position: calc(-100% + 35px);
}
.nav__item-bg:nth-child(3) .nav__item-img {
  background-position: calc(-200% + 90px);
}
.nav__item-bg:nth-child(4) .nav__item-img {
  background-position: calc(-300% + 135px);
}

.nav__item-img:nth-child(1) {background-image: url(http://s00.yaplakal.com/pics/pics_original/4/6/8/8310864.jpg)}
.nav__item-img:nth-child(2) {background-image: url(http://img1.liveinternet.ru/images/attach/c/6/93/550/93550371_MiosgKjpRqE.jpg)}
.nav__item-img:nth-child(3) {background-image: url(http://bm.img.com.ua/nxs/img/prikol/images/large/9/3/309339_889006.jpg)}
.nav__item-img:nth-child(4) {background-image: url(http://www.zooclub.ru/skat/img.php?w=700&h=700&img=./attach/7328.jpg)}

.nav__item-bg:nth-child(1) .nav__item-img:nth-child(1) {opacity: 1}
.nav__item-bg:nth-child(2) .nav__item-img:nth-child(2) {opacity: 1}
.nav__item-bg:nth-child(3) .nav__item-img:nth-child(3) {opacity: 1}
.nav__item-bg:nth-child(4) .nav__item-img:nth-child(4) {opacity: 1}

.nav__item:hover ~ .nav__list > .nav__item-bg .nav__item-img {opacity: 0}
.nav__item:nth-child(1):hover ~ .nav__list > .nav__item-bg .nav__item-img:nth-child(1) {opacity: 1}
.nav__item:nth-child(2):hover ~ .nav__list > .nav__item-bg .nav__item-img:nth-child(2) {opacity: 1}
.nav__item:nth-child(3):hover ~ .nav__list > .nav__item-bg .nav__item-img:nth-child(3) {opacity: 1}
.nav__item:nth-child(4):hover ~ .nav__list > .nav__item-bg .nav__item-img:nth-child(4) {opacity: 1}

/* Анимации */
.nav__item-bg:nth-child(2n+2), .nav__item:nth-child(2n+2) {
  animation: size__type0 10s infinite;
}
.nav__item-bg:nth-child(2n+1), .nav__item:nth-child(2n+1){
  animation: size__type1 10s infinite;
}

@keyframes size__type0 {
  from {
    transform: scale(0.95) skewX(-10deg);
  }
  50% {
    transform: scale(1) skewX(-10deg);
  }
  to { 
    transform: scale(0.95) skewX(-10deg);
  }  
}
@keyframes size__type1 {
  from {
    transform: scale(1) skewX(-10deg);
  }
  50% {
    transform: scale(0.95) skewX(-10deg);
  }
  to { 
    transform: scale(1) skewX(-10deg);
  }  
}
<div class="nav">
  <!--<Пункты>-->
  <a href="#" class="nav__item"></a>
  <a href="#" class="nav__item"></a>
  <a href="#" class="nav__item"></a>
  <a href="#" class="nav__item"></a>
  <!--<Фоны пунктов>-->
  <div class="nav__list">
    <div class="nav__item-bg">
      <div class="nav__item-img"></div>
      <div class="nav__item-img"></div>
      <div class="nav__item-img"></div>
      <div class="nav__item-img"></div>
    </div>
    <div class="nav__item-bg">
      <div class="nav__item-img"></div>
      <div class="nav__item-img"></div>
      <div class="nav__item-img"></div>
      <div class="nav__item-img"></div>
    </div>
    <div class="nav__item-bg">
      <div class="nav__item-img"></div>
      <div class="nav__item-img"></div>
      <div class="nav__item-img"></div>
      <div class="nav__item-img"></div>
    </div>
    <div class="nav__item-bg">
      <div class="nav__item-img"></div>
      <div class="nav__item-img"></div>
      <div class="nav__item-img"></div>
      <div class="nav__item-img"></div>
    </div>
  </div>
</div>

В этом примере я сделал наклонность, как у автора вопроса в примере. Есть ещё версия с сохранением пропорции фона.

Версия №1 (без сохранения пропорции фона): jsfiddle-1hpps872
Версия №2 (с сохранением пропорции фона): jsfiddle-1hpps872-1
Версия №3 (без наклона): jsfiddle-1hpps872-2

8
  • картинки показываются только на второй и последней плашке. без наведения плашки черные, а должны показывать соответствующие части картинок
    – Grundy
    20 янв 2017 в 17:41
  • @Grundy, заметил ошибку. Будет возможность - исправлю
    – Yuri
    21 янв 2017 в 6:55
  • calc вроде не работает на в яблочных системах. Да и делать на технологии в которой отсутствуют маски, как в данном случаи css, это просто извращение.
    – user220409
    21 янв 2017 в 10:32
  • @OlmerDale, по этому лучше воспользоваться вариантом со скриптом. А у вас все картинки отображаются?
    – Yuri
    21 янв 2017 в 10:35
  • Нет, не все. И если быть точным, то Ваша реализация хоть и крутая, но не идентична оригиналу. В оригинале картинка не масштабируется.
    – user220409
    21 янв 2017 в 10:37

Ваш ответ

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

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