БЛОГ НА HUSL


Скрытие элементов сайта при отсутствии движения мышки

Автор вопроса: TemTik

Прошу помочь с реализацией следующего функционала: Сайт нацелен на графическую составляющую и определенные страницы сайта представляют из себя некую галерею, которая в моем случае сделана на плагине "swiper".
На странице есть шапка, стрелки след. и пред. слайд и мини галерея внизу. Через несколько секунд после того как мышь перестала двигаться или вышла из окна просмотра, эти элементы навигации и галерея должны скрываться по бокам (т.е. мы видим только одно изображение), когда мышь возобновила движение или вернулась в область просмотра, элементы навигации и галерея снова показываются. Пока, из-за отсутствия знаний в js, не понимаю как это сделать и поймать отсутствие действий мыши.
Пример страницы накидал здесь - https://codepen.io/proququ/pen/VweEBYv
Пример того эффекта о котором говорю нашел здесь - http://www.trabczynski.com/gallery/gallery.php?idg=st1105

Код:

$(document).ready(function() {
  $(function() {
    var galleryThumbs = new Swiper('.gallery-thumbs', {
      slidesPerView: 4,
      freeMode: true,
      watchSlidesVisibility: true,
      watchSlidesProgress: true,
    });
    var mainSlider = new Swiper('.slider', {
      slidesPerView: 1,
      navigation: {
        nextEl: '.slider-nav--next',
        prevEl: '.slider-nav--prev',
      },
      thumbs: {
        swiper: galleryThumbs
      }
    });
  });
});
body {
  padding: 0;
  margin: 0;
  background-color: #cdcdcd;
}

body * {
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header,
.footer {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.main {
  position: relative;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: rgba(0, 0, 0, 0.2)
}

.nav__list {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nav__item:not(:last-of-type) {
  margin-right: 10px;
}

.slider-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1000;
  display: block;
  width: 50px;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}

.slider-nav--prev {
  left: 0;
}

.slider-nav--next {
  right: 0;
}

.swiper-slide {
  display: flex;
  height: auto;
}

.slide-pic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 0;
}

.slide-pic img {
  height: 100%;
  object-fit: contain;
}

.slider-gallery {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  width: 80%;
  background-color: rgba(0, 0, 0, 0.5);
}

.slider-gallery .swiper-slide {
  height: 100px;
  padding: 10px;
  font-size: 0;
  overflow: hidden;
}

.slider-gallery .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css" rel="stylesheet" />

<body>
  <div class="wrapper">
    <header class="header">
      <a href="#" class="logo">
        <img src="https://via.placeholder.com/100x50" alt="Site">
      </a>
      <nav class="nav">
        <ul class="nav__list">
          <li class="nav__item"><a href="" class="nav__link">Menu</a></li>
          <li class="nav__item"><a href="" class="nav__link">Menu</a></li>
          <li class="nav__item"><a href="" class="nav__link">Menu</a></li>
        </ul>
      </nav>
    </header>
    <main class="main">
      <section class="main-slider">
        <div class="swiper-container slider">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="slide-pic">
                <img src="https://www.porodicobak.ru/wp-content/uploads/2019/08/border-collie-5-660x400.jpg" alt="" class="slide-pic__img">
              </div>
            </div>
            <div class="swiper-slide">
              <div class="slide-pic">
                <img src="https://opt-1031816.ssl.1c-bitrix-cdn.ru/upload/resize_cache/iblock/6f1/750_400_1/border_collie.jpg?1528202146181436" alt="" class="slide-pic__img">
              </div>
            </div>
            <div class="swiper-slide">
              <div class="slide-pic">
                <img src="https://lapkins.ru/upload/iblock/bc6/bc644f96624a02bed8069cd35a689121.jpg" alt="" class="slide-pic__img">
              </div>
            </div>
            <div class="swiper-slide">
              <div class="slide-pic">
                <img src="https://avatars.mds.yandex.net/get-zen_doc/236854/pub_5b923487071c7b00aa61228f_5b92385346f39d00aa672efe/scale_1200" alt="" class="slide-pic__img">
              </div>
            </div>
            <div class="swiper-slide">
              <div class="slide-pic">
                <img src="https://lh3.googleusercontent.com/proxy/4c92_cm_CwxpKSpR1fZ5Y6h0aHNv_gdY6sDDbUuFR6nG8k9g3mfXcSPkh5vqDYUkdHv8lP7s-6oCdrWVrQIx1a_vu_OB7EQWhbHuisQBz6SK5mPS8kxkIw" alt="" class="slide-pic__img">
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="slider-gallery">
        <div class="swiper-container gallery-thumbs">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="https://www.porodicobak.ru/wp-content/uploads/2019/08/border-collie-5-660x400.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img src="https://opt-1031816.ssl.1c-bitrix-cdn.ru/upload/resize_cache/iblock/6f1/750_400_1/border_collie.jpg?1528202146181436" alt="">
            </div>
            <div class="swiper-slide">
              <img src="https://lapkins.ru/upload/iblock/bc6/bc644f96624a02bed8069cd35a689121.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img src="https://avatars.mds.yandex.net/get-zen_doc/236854/pub_5b923487071c7b00aa61228f_5b92385346f39d00aa672efe/scale_1200" alt="">
            </div>
            <div class="swiper-slide">
              <img src="https://lh3.googleusercontent.com/proxy/4c92_cm_CwxpKSpR1fZ5Y6h0aHNv_gdY6sDDbUuFR6nG8k9g3mfXcSPkh5vqDYUkdHv8lP7s-6oCdrWVrQIx1a_vu_OB7EQWhbHuisQBz6SK5mPS8kxkIw" alt="">
            </div>
          </div>
        </div>
      </section>
      <button class="slider-nav slider-nav--prev">Пред.</button>
      <button class="slider-nav slider-nav--next">След.</button>
    </main>
    <footer class="footer"></footer>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
</body>


Источник

Ответы (1 шт):

Автор решения: RavenTheX 

$(document).ready(function() {
  $(function() {
    var galleryThumbs = new Swiper('.gallery-thumbs', {
      slidesPerView: 4,
      freeMode: true,
      watchSlidesVisibility: true,
      watchSlidesProgress: true,
    });
    var mainSlider = new Swiper('.slider', {
      slidesPerView: 1,
      navigation: {
        nextEl: '.slider-nav--next',
        prevEl: '.slider-nav--prev',
      },
      thumbs: {
        swiper: galleryThumbs
      }
    });
  });
});

let header = document.querySelector('.header')

let test

window.addEventListener('mousemove', evt => {
  window.clearTimeout(test)
  header.style.display = 'block'
  test = setTimeout(() => {
    header.style.display = 'none'
  }, 3000)
})
body {
  padding: 0;
  margin: 0;
  background-color: #cdcdcd;
}

body * {
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header,
.footer {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.main {
  position: relative;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: rgba(0, 0, 0, 0.2)
}

.nav__list {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nav__item:not(:last-of-type) {
  margin-right: 10px;
}

.slider-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1000;
  display: block;
  width: 50px;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}

.slider-nav--prev {
  left: 0;
}

.slider-nav--next {
  right: 0;
}

.swiper-slide {
  display: flex;
  height: auto;
}

.slide-pic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 0;
}

.slide-pic img {
  height: 100%;
  object-fit: contain;
}

.slider-gallery {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  width: 80%;
  background-color: rgba(0, 0, 0, 0.5);
}

.slider-gallery .swiper-slide {
  height: 100px;
  padding: 10px;
  font-size: 0;
  overflow: hidden;
}

.slider-gallery .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css" rel="stylesheet" />

<body>
  <div class="wrapper">
    <header class="header">
      <a href="#" class="logo">
        <img src="https://via.placeholder.com/100x50" alt="Site">
      </a>
      <nav class="nav">
        <ul class="nav__list">
          <li class="nav__item"><a href="" class="nav__link">Menu</a></li>
          <li class="nav__item"><a href="" class="nav__link">Menu</a></li>
          <li class="nav__item"><a href="" class="nav__link">Menu</a></li>
        </ul>
      </nav>
    </header>
    <main class="main">
      <section class="main-slider">
        <div class="swiper-container slider">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="slide-pic">
                <img src="https://www.porodicobak.ru/wp-content/uploads/2019/08/border-collie-5-660x400.jpg" alt="" class="slide-pic__img">
              </div>
            </div>
            <div class="swiper-slide">
              <div class="slide-pic">
                <img src="https://opt-1031816.ssl.1c-bitrix-cdn.ru/upload/resize_cache/iblock/6f1/750_400_1/border_collie.jpg?1528202146181436" alt="" class="slide-pic__img">
              </div>
            </div>
            <div class="swiper-slide">
              <div class="slide-pic">
                <img src="https://lapkins.ru/upload/iblock/bc6/bc644f96624a02bed8069cd35a689121.jpg" alt="" class="slide-pic__img">
              </div>
            </div>
            <div class="swiper-slide">
              <div class="slide-pic">
                <img src="https://avatars.mds.yandex.net/get-zen_doc/236854/pub_5b923487071c7b00aa61228f_5b92385346f39d00aa672efe/scale_1200" alt="" class="slide-pic__img">
              </div>
            </div>
            <div class="swiper-slide">
              <div class="slide-pic">
                <img src="https://lh3.googleusercontent.com/proxy/4c92_cm_CwxpKSpR1fZ5Y6h0aHNv_gdY6sDDbUuFR6nG8k9g3mfXcSPkh5vqDYUkdHv8lP7s-6oCdrWVrQIx1a_vu_OB7EQWhbHuisQBz6SK5mPS8kxkIw" alt="" class="slide-pic__img">
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="slider-gallery">
        <div class="swiper-container gallery-thumbs">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="https://www.porodicobak.ru/wp-content/uploads/2019/08/border-collie-5-660x400.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img src="https://opt-1031816.ssl.1c-bitrix-cdn.ru/upload/resize_cache/iblock/6f1/750_400_1/border_collie.jpg?1528202146181436" alt="">
            </div>
            <div class="swiper-slide">
              <img src="https://lapkins.ru/upload/iblock/bc6/bc644f96624a02bed8069cd35a689121.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img src="https://avatars.mds.yandex.net/get-zen_doc/236854/pub_5b923487071c7b00aa61228f_5b92385346f39d00aa672efe/scale_1200" alt="">
            </div>
            <div class="swiper-slide">
              <img src="https://lh3.googleusercontent.com/proxy/4c92_cm_CwxpKSpR1fZ5Y6h0aHNv_gdY6sDDbUuFR6nG8k9g3mfXcSPkh5vqDYUkdHv8lP7s-6oCdrWVrQIx1a_vu_OB7EQWhbHuisQBz6SK5mPS8kxkIw" alt="">
            </div>
          </div>
        </div>
      </section>
      <button class="slider-nav slider-nav--prev">Пред.</button>
      <button class="slider-nav slider-nav--next">След.</button>
    </main>
    <footer class="footer"></footer>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
</body>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.