CSS анимация - сдвиньте строку слева направо рядом с заголовком - PullRequest
Новая
       26

CSS анимация - сдвиньте строку слева направо рядом с заголовком

0 голосов
/ 29 апреля 2018

Интересно, могу ли я получить помощь / направление ...

По сути, я создаю свой веб-сайт портфолио. Вот работа в процессе, она еще не закончена! https://reenaverma.github.io/

По сути, когда вы прокручиваете страницу вниз, вы увидите, что серая линия движется слева до середины экрана. В основном это должна быть анимация, сопровождающая заголовок на свитке.

Я хочу, чтобы серая линия прекратилась в начале каждого заголовка. Таким образом, для слова «о рине» он должен останавливаться перед «а» (не снизу).

Я хотел бы узнать, как лучше всего этого достичь? Соответствующий код ниже. Я уже получил часть этого от google и stackoverflow.

Полагаю, я мог бы уронить заголовок перед div, поэтому анимация находится в div слева от заголовка. И используйте animate.js fadein / slidein. Но я просто хотел узнать, есть ли лучший / правильный способ сделать это?

HTML 

<section class="section-white">
        <div class="container">
          <div class="flex-grid">
            <div class="col-white">
              <h2><span>about reena</span>
                <div class="line"></div>
              </h2>
              <!-- <div id="trainMotion">
                <img src="http://i.imgur.com/uKxkshD.png" alt="" 
                class="line">

              <p>A Full Stack Developer etc etc etc...</p>
            </div>
          </div>
        </div>
      </section>

CSS: 

.line {
 display: block;
 position: relative;
 margin: 0 auto;
 height: 3px;
 background-color: #ccc;
 width: 150px;
 left: -300px;
 transform: translateX(-50%);
}

JAVASCRIPT 

$(window).on('scroll',function(){
  const trainPosition = Math.round($(window).scrollTop() / 
$(window).height() * 100);
$('.line').css('transform','translateX('+(trainPosition-30)+'%)');
});

Спасибо!

Ответы [ 2 ]

0 голосов
/ 29 апреля 2018

Вы можете разделить контейнер <h2> на две части. И добавьте контейнер анимации рядом с заголовком, убедившись, что анимация ограничена только этим контейнером.

Я добавляю ссылку codepen , которая может помочь. Ссылка

codepen screenshot

В этом сценарии я ограничил ширину контейнера анимации. Вы можете синхронизировать время с JS.

0 голосов
/ 29 апреля 2018

Вам нужно поиграть со значениями transform: translateX(-50%); в вашем CSS и +(trainPosition-30)+'%) в вашем JS, чтобы получить координаты назначения, которые идеально подходят для вашего проекта. Если ваше translateX значение является начальной позицией, тогда при прокрутке вы добавляете еще 30%.

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

...