Анимация рисования линий головы льва при прокрутке

#javascript #css #jquery #svg #css_animation

У меня есть анимированное SVG  рисования линий головы льва, взято отсюда

Анимация реализуется с помощью изменения атрибута path stroke-dashoffset="2000" от
максимального значения до ноля. 



.container {
width:100%;
height:100%;

}

 





Как сделать тот же самый эффект рисования линий при прокрутке?
    

Ответы

Ответ 1

На нативном js



const htmlElem = document.querySelector('html');
//Переменная для 'stroke-dashoffset' 
const pathElem = document.querySelector('.path');
const dashOffset = parseInt(getComputedStyle(pathElem).strokeDashoffset);

//на событие прокрутки - выполнить функцию
document.addEventListener('scroll', () => {
  //рассчитать, как далеко вниз по прокручена страница 
  const percentageComplete = window.pageYOffset / (htmlElem.offsetHeight - window.innerHeight)
* 100;
  //получить значение, которое будет вычтено из 'stroke-dashoffset'
  const offsetUnit = percentageComplete * dashOffset / 100;
  //установить новое значение dashoffset, чтобы создать эффект рисования
  pathElem.style.strokeDashoffset = dashOffset - offsetUnit;
});
body {
  font-family: sans-serif;
  background: rgb(34, 193, 195);
  background: linear-gradient(0deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45,
1) 100%);
  //color: white;
}

h1 {
  text-align: center;
  font-weight: 400;
  font-size: 2.5em;
  letter-spacing: .09em;
}

svg {
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  max-width: 400px;
  max-height: 400px;
}

.path {
  stroke-dashoffset: 2000;
  stroke-dasharray: 2000;
  stroke: black;
  fill: none;
  stroke-width: 4;
}

.Lion {
  height: 10000px;
}
Нарисуйте голову льва при прокрутке






Ответ 2

Вопрос удалось решить с помощью подключения jQuery
Расширенные комментарии, как это делается  в коде программы. 



$(document).ready(function() {
  //Переменная для 'stroke-dashoffset' 
  var $dashOffset = $(".path").css("stroke-dashoffset");
  //на событие прокрутки - выполнить функцию
  $(window).scroll(function() {
    //рассчитать, как далеко вниз по прокручена страница 
    var $percentageComplete = (($(window).scrollTop() / ($("html").height() - $(window).height()))
* 100);
    //преобразовать значение в пикселях dashoffset в целое число
    var $newUnit = parseInt($dashOffset, 10);
    //получить значение, которое будет вычтено из 'stroke-dashoffset'
    var $offsetUnit = $percentageComplete * ($newUnit / 100);
    //установить новое значение dashoffset, чтобы создать эффект рисования
    $(".path").css("stroke-dashoffset", $newUnit - $offsetUnit);
  });
});
body {
font-family:sans-serif;
background: rgb(34,193,195);
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
  color: white;
}

h1 {
  text-align: center;
  font-weight: 400;
  font-size: 2.5em;
  letter-spacing: .09em;
}

svg {
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  max-width: 400px;
  max-height: 400px;
}

.path {
  stroke-dashoffset: 2000;
  stroke-dasharray: 2000;
  stroke:black;
  fill:none;
  stroke-width:4;  
}

.Lion {
  height: 10000px;
}
Нарисуйте голову льва при прокрутке