Переключение между 2 цветами фона мыши + адаптация <p>к этому новому цвету - PullRequest
Новая
       34

Переключение между 2 цветами фона мыши + адаптация <p>к этому новому цвету

0 голосов
/ 20 марта 2019

Я нашел фрагмент кода, который почти выполняет то, что я хочу, за исключением того, что я хочу, чтобы он был горизонтальным / на основе мыши Y вместо X. Теперь я понимаю, что в js X будет изменен на Y, но я борюсь с вращением divs.

Кроме того, если я хочу нанести на него какой-нибудь текст, как бы я сделал так, чтобы изменение фона сказывалось на цвете текста (поэтому, если текст черный, а половина фона черная, один раз убедитесь, что черный фон накладывает текст, цвет текста меняется на другой или переворачивается, например?

Также я попытался выяснить в js, какая часть определяет скорость реакции мыши, т. Е. Как бы вы сделали так, чтобы смещение цвета не отставало от мыши, но я не мог понять?

https://codepen.io/erutuf/pen/NJLwqV

Haml 

    #banner-wrapper.banner-wrapper
  .banner.design
    .banner-content

  .banner.dev
    .banner-content

* 1013 СКС * 

   body {
  margin: 0;
  padding: 0;

  .banner-wrapper {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden; background:red;
  }

  .banner {
    position: absolute;
    overflow: hidden;

    &.dev {
      margin-left: -500px;
      width: calc(50vw + 500px);
      .banner-content {
        margin-left: 500px; background:black;
      }
    }
    .banner-content {
      height: 400px;
    }
    img {
      width: 100vw;
    }
  }
}

JS 

document.addEventListener('DOMContentLoaded', function(){
    let banner = document.getElementById('banner-wrapper');
    let devLayer = banner.querySelector('.dev');
    let delta = 0;

    banner.addEventListener('mousemove', function(e){
        delta = (e.clientX - window.innerWidth / 2) * 0.5;
        devLayer.style.width = e.clientX + 500 + delta + 'px';
    });
})

1 Ответ

1 голос
/ 20 марта 2019

вы можете играть с JS + CSS.Следующий код может быть вашей отправной точкой:).

Кстати, я адаптирую код по вашей ссылке https://codepen.io/erutuf/pen/NJLwqV 

document.addEventListener("DOMContentLoaded", function(){
    let banner = document.getElementById("banner-wrapper");
    let devLayer = banner.querySelector(".dev");
    let delta = 0;
    // play with div's height
    banner.addEventListener("mousemove", function(e){
        delta = (e.clientY - window.innerHeight / 2) * 0.5;
        devLayer.style.height = e.clientY + delta + "px";
    });
})
<div class="banner-wrapper" id="banner-wrapper">
  <div class="banner design">
    <div class="banner-content">BANNER TEXT</div>
  </div>
  <div class="banner dev">
    <div class="banner-content"></div>
  </div>
</div>

<style type="text/css">
body {
  margin: 0;
  padding: 0;
}
body .banner-wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: red;
}
body .banner {
  position: absolute;
  overflow: hidden;
}
body .banner.dev {
  width: 100%;
  /* play with responsiveness here. note that 0.1 is more responsive than 0.5. more info : https://www.w3schools.com/css/css3_transitions.asp */
  -webkit-transition: height 0.2s linear;
  transition: height 0.2s ease;
}
body .banner.dev .banner-content {
  background: black;
}
body .banner .banner-content {
  height: 400px;
}
body .banner img {
  width: 100%;
}
.banner.design {
    margin-top: -25px;
    height: 50px;
    top: 50%;
    font-size: 50px;
	/* set color & mix-blend-mode for text color vs background color effect. more info : https://css-tricks.com/methods-contrasting-text-backgrounds/ */
    mix-blend-mode: difference;
    color: #fff;
    z-index: 1;
    margin-left: -175px;
    left: 50%;
    width: 350px;
}

</style>
...