I want to make a script that resizes a div based on its position. Like a cover flow.
I'm using the jQuery scroll() method, but it only triggeres AFTER the scroll, not while scrolling. This results in an offset of the effect to the top or bottom.
I also tried an interval but that is even worse.
Is there a method to make this more "realtime"?
$(window).scroll(function() {
windowOffset = $(window).scrollTop();
windowMiddle = $(window).height() / 2;
$('li').each(function() {
offset = Math.abs(windowMiddle - $(this).position().top + windowOffset);
$(this).text(offset);
$(this).css({
width: 700 - offset
});
});
});body {
margin: 0;
padding: 0;
}
.scroll {
position: absolute;
display: block;
width: 100%;
}
ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: block;
margin: auto;
width: 300px;
height: 70px;
background: yellow;
margin-bottom: 20px;
transition: all .25s;
text-align: center;
line-height: 70px;
font-size: 50px;
}
.helper {
display: block;
position: fixed;
width: 100%;
top: 50%;
left: 0%;
background: red;
height: 1px;
}<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="helper">
</div>
<div class="scroll">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html> I removed transition: all .25s;. Is this the effect you want?
$(window).scroll(function() {
windowOffset = $(window).scrollTop();
windowMiddle = $(window).height() / 2;
$('li').each(function() {
offset = Math.abs(windowMiddle - $(this).position().top + windowOffset);
$(this).text(offset);
$(this).css({
width: 700 - offset
});
});
});body {
margin: 0;
padding: 0;
}
.scroll {
position: absolute;
display: block;
width: 100%;
}
ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: block;
margin: auto;
width: 300px;
height: 70px;
background: yellow;
margin-bottom: 20px;
/*transition: all .25s;*/
text-align: center;
line-height: 70px;
font-size: 50px;
}
.helper {
display: block;
position: fixed;
width: 100%;
top: 50%;
left: 0%;
background: red;
height: 1px;
}<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="helper">
</div>
<div class="scroll">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>