Блог

Как увеличить div изображение при прокрутке с размера 20% ширины и высоты в центре до 100% ширины и высоты?

В настоящее время я пытаюсь создать свой первый веб-сайт, и я почти на месте. Все, чего не хватает, — это анимации и улучшений в CSS. Одна из моих идей заключается в том, что у вас есть div фон внутри, и при прокрутке изображение увеличивается до всей точки обзора. Я был бы очень признателен, если бы кто-нибудь мог мне помочь.

Для этого вы можете использовать transform масштаб.

CSS часть установит, чтобы элемент занимал 100% ширины и высоты (я использую единицы отображения), и установит его положение фиксированным (так что вы увидите, что произойдет при прокрутке). Поскольку мы собираемся изменить его масштаб во время прокрутки, установите его начальный масштаб на 20% от исходного размера.

JS часть будет прослушивать событие прокрутки и масштабировать div так, чтобы он был не менее 20%, но и не превышал 100%.

Играйте с числами при условии, чтобы получить то, что вам нужно:

 const demoDiv = document.querySelector("#demo");
window.addEventListener('scroll', function() {
  if (pageYOffset*0.0001 > 1 || pageYOffset*0.0001 < 0.2) { return; }
  else { demo.setAttribute('style', 'transform: scale(' pageYOffset*0.0001 ');'); }
}); 

 body {height: 40000px; margin: 0; padding: 0;}
p {position: fixed; top: 0; left: 0; font-size: 40px;}
#demo {
  text-align: center;
  font-size: 10vw;
  position: fixed; top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black; 
  color: white;
  transform: scale(0.2); /* since you ask for 20% */     
} 

 <p style="">Scroll to see it grow.</p>  
<div id="demo">My minumum width and height are 20% and i will stop grow when i get to 100%</div> 

Во-первых, поздравляю вас с вашим первым сайтом. Удачи вам в вашем путешествии по кодированию.

Вы можете сделать это с помощью CSS и JavaScript. Есть много способов, но я пишу один здесь. Я надеюсь, что это будет что-то хорошее.

Давайте назовем div с идентификатором CSS animatedDiv.

 <div id="animatedDiv"></div>
 

Теперь давайте оформим его с помощью CSS

 #animatedDiv
{
    margin-top: 200px;
    background: #dc143c;
    min-height: 350px;
    min-width: 20%;
    position: absolute;
}
 

Здесь я задал div цвет фона, абсолютный тип позиции и верхнее поле 200 пикселей. Вы можете изменить его в соответствии с вашими потребностями. Я использовал свойства min-height и min-width, потому что эти значения не будут фиксированными, они будут меняться при прокрутке.

Теперь давайте напишем немного JavaScript

 var aDiv = document.getElementById("animatedDiv");

function changeWidth() 
{
    var scrollVal = window.pageYOffset;
    var scrollSlow  = (scrollVal / 4);
    
    //Changing CSS Width
    aDiv.style.width = Math.min(Math.max(scrollSlow, 20), 100)   "%";
}

window.addEventListener('scroll', function() 
{
    requestAnimationFrame(changeWidth);
}, false);
 

Здесь, в функции определения пользователя, я ловлю div с его идентификатором и присваиваю его переменной aDiv. Затем я фиксирую смещение страницы по оси Y (на сколько пикселей была прокручена страница) и сохраняю его в переменной scrollVal, затем я делю значение на четыре (вы можете использовать 5, 10-20). Это замедлит эффект изменения.

Я использовал математические методы (min и max), чтобы присвоить значение от 20 до 100%.

Чтобы функция работала при прокрутке, используется window.addEventListener, и метод window.requestAnimationFrame() сообщит браузеру, что мы хотим выполнить ее в виде анимации.

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

Желаю вам всего наилучшего.