javascript - Make a div bigger and wider while scrolling - Stack Overflow

admin管理员组

文章数量:1415684

How do I enlarge a div while scrolling from a size of 20% width and height in the center to 100% width and height?

I'm currently trying at my first website and I'm almost there. All that is missing is animations and improvements in CSS. One of my ideas is that you have a div with a background inside and while scrolling the picture gets bigger up to the whole viewpoint. I would be very grateful if someone could help me.

How do I enlarge a div while scrolling from a size of 20% width and height in the center to 100% width and height?

I'm currently trying at my first website and I'm almost there. All that is missing is animations and improvements in CSS. One of my ideas is that you have a div with a background inside and while scrolling the picture gets bigger up to the whole viewpoint. I would be very grateful if someone could help me.

• javascript
• html
• css
• animation

Share Improve this question Follow edited Aug 11, 2021 at 2:34 rmlockerd 4,13622 gold badges2020 silver badges2828 bronze badges asked Aug 10, 2021 at 18:51 AlexB123003AlexB123003 1111 silver badge22 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You can use transform scale to do it.

CSS part will set the element to take 100% of width and height (i use viewport units), and set it position to fixed (so you will see what happen when you scroll). Since we gonna change it's scale while scroll, set it initial scale to be 20% of it's original size.

JS part will listen to scroll event and scale the div that it won't be less then 20% but also won't be larger then 100%.

Play with the numbers on the condition to get what you need:

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>

Firstly, Congratulations on your first website. Good luck on your coding journey.

You can do it by using CSS & JavaScript. There is many way, but I'm writing one here. I hope it will be some good.

Let us call the div with an CSS ID animatedDiv.

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

Now, lets style it with CSS

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

Here, I gave the div a background color, Absolute type of position, and margin-top of 200px. You can change it according to your needs. I used min-height and min-width property because these value will not be any fixed value, they will change on scroll.

Now, lets write some 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);

Here, on a user define function, I catch the div with it's ID and assign into aDiv variable. Then I catch the page offset on Y axis (How much pixel the page was scrolled) and store it into a variable scrollVal, Next I divide the value by four (you can use 5, 10 20). It will slow the changing effect.

I've use Math methods (min and max) to assign a value between 20 to 100%.

To make the function work on scroll, window.addEventListener is used, and the window.requestAnimationFrame() method will tell the browser that we wish to perform it as an animation.

I hope it will be some help to you. I don't know did I explain well the process to you or not. English is not my mother language, so please don't mind if I made any grammatically mistake.

Wish you all the best.

本文标签： javascriptMake a div bigger and wider while scrollingStack Overflow