2

Всем привет, пытался сделать прикольный эффект при скроле страницы: есть секция с заголовком, заголовок прозрачный с обводкой, при прокрутке страницы, когда снизу появляется заголовок, примерно через 100px от нижнего края экрана по мере скролла он начинает заливаться снизу вверх, т.е. например мы остановились в половине залитого текста и он так и остался, пошли дальше, начал снова заливаться.

Так же, когда у нас расстояние от верхнего края до заголовка так же где-то 100px, то заливка уже начинает сходить сверху вниз, вот такая идея, на подобии этого сайта, только там на сколько известно у них скролл кастомный и они все двигают транслейтами. Нужно сделать что-то похожее, но на стандартном скроле, если возможно. Картинка для наглядности. Для наглядности

моя статическая попытка посмотреть как это работает:

section {
      background-color: #6da7ff;
      color: tomato;
      height: 100vh;
      text-align: center;
      position: relative;
  }

  div:first-child {
      position: absolute;
      width: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 100px;
      font-weight: bold;
      -webkit-text-stroke: 2px tomato;
      -webkit-text-fill-color: transparent;
  }

  div:last-child {
      position: absolute;
      width: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 100px;
      font-weight: bold;
      clip: rect(0, 1500px, 800px, 0);
  }
<section>
  <div >Заголовок</div>
  <div>Заголовок</div>
</section>

Как разобраться с js так и не смог понять..

2
  • добавьте код вашей попытки, иначе вопрос просто закроют, уже три голоса за закрытие 21 фев 2019 в 10:59
  • Возможно будет полезно, проблема решена вот здесь 1 мар 2019 в 5:46

1 ответ 1

0

Ну вот как-то так:

$(function() {
  $('.parallax').animate({
    scrollTop: $(document).height()
  }, 2000);
  $(window).scroll(function() {
    $('span').css('height', Math.round($(window).scrollTop() / 20) + '%');
  });
});
* {
  margin: 0;
  padding: 0;
}

.parallax {
  background-color: #6ea7ff;
  height: 2000px;
}

.abc {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 100vh;
  font-family: monospace;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  font-size: 15vw;
}

span,
.abc[data-hover] {
  -webkit-text-stroke: 2px #f96545;
  text-stroke: 2px #f96545;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  color: transparent;
}

span {
  content: attr(data-hover);
  position: absolute;
  bottom: 0;
  top: 0;
  height: 0%;
  overflow: hidden;
  white-space: nowrap;
  -webkit-text-stroke: 0;
  text-stroke: 0;
  -webkit-text-fill-color: #f96545;
  text-fill-color: #f96545;
  color: #f96545;
  transition: all .1s ease;
}

.menu {
  left: 10px;
  top: 5px;
  position: fixed;
  font-family: monospace;
  text-transform: uppercase;
  text-align: left;
  font-weight: bold;
  font-size: 5vw;
  cursor: pointer;
  color: #f96545;
}

.menu:before {
  content: "";
  top: 0;
  left: 0;
  width: 0;
  color: #fff;
  overflow: hidden;
  position: absolute;
  content: attr(data-text);
  transition: all 1s;
}

.menu:hover:before {
  width: 100%;
}

.menu:after {
  content: "\2190\00A0Наведи";
  top: 0;
  left: 100%;
  margin-left: 20px;
  color: #fff;
  position: absolute;
  font-weight: normal;
  text-transform: none;
  font-size: 2vw;
  line-height: 6vw;
}

.nav:before {
  content: "\2193\00A0Крути вниз";
  top: 10px;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  position: fixed;
  font-weight: normal;
  text-transform: none;
  font-size: 3vw;
}

.ok {
  background-color: #f96545;
  text-align: center;
  font-family: monospace;
  font-size: 3vw;
  cursor: pointer;
  color: #fff;
  line-height: 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parallax">
  <div class="abc" data-hover="Заголовок"><span class="span">Заголовок</span>Заголовок</div>
  <div class="nav">
    <div class="menu" data-text="Меню">Меню</div>
  </div>
</div>
<div class="ok">Супер!</div>

3

Ваш ответ

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

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