How to make center image bigger when scrolled vertically?

I have many circle images in my page. When i scroll vertically, whatever the center image is in my page it should get zoomed like effect like as shown in the figure. I m not sure how to do this. So I m not posting any jsfiddle.

Answers


<html>
<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
#spacer{height:1000px;}
#content{overflow-y:scroll;height:100%;width:100%;background:white;}
</style>
</head>
<body bgcolor="#fff">
<div id="content">

<div id="spacer"><!--other images --></div>

<img src="lock.png" class="images" id="firstimage"><br><br><img src="lock.png" class="images" id="secondimage"><br><br><img src="lock.png" class="images" id="thirdimage">

<div id="spacer"><!--other images --></div>

<span id="positionvalueboard" style="position:fixed;right:0px;top:0px;"><!--the position (from top) value (in %) to be displayed --></span>

<script>

$(document).ready(function(){
var repeataction= function() { 
var height=$(window).height(); /*WINDOW HEIGHT */
var position=$("#firstimage").position(); /*POSITION OF THE IMAGE */
var percent=position.top/height*100; /*CALCULATION OF PERCENTAGE */

$("#positionvalueboard").text(percent); /*CAN BE REMOVED IF NOT NEEDED */
$("#firstimage").height(percent*2); /* FOR THE 1st HALF ('*x' size increased x times) */

if(percent>50){$("#firstimage").height((100-percent)*2 )}; /* FOR THE 2nd HALF ('*x' size increased x times) */
};
var timeOut= setInterval(repeataction, 1); /* USED TO REPEAT THE ACTION */
});
</script>
<script>
$(document).ready(function(){
var repeataction= function() { 
var height=$(window).height(); /*WINDOW HEIGHT */
var position=$("#secondimage").position(); /*POSITION OF THE IMAGE */
var percent=position.top/height*100; /*CALCULATION OF PERCENTAGE */

$("#secondimage").height(percent*2); /* FOR THE 1st HALF ('*x' size increased x times) */

if(percent>50){$("#secondimage").height((100-percent)*2 )}; /* FOR THE 2nd HALF ('*x' size increased x times) */
};
var timeOut= setInterval(repeataction, 1); /* USED TO REPEAT THE ACTION */
});
</script>
<script>
$(document).ready(function(){
var repeataction= function() { 
var height=$(window).height(); /*WINDOW HEIGHT */
var position=$("#thirdimage").position(); /*POSITION OF THE IMAGE */
var percent=position.top/height*100; /*CALCULATION OF PERCENTAGE */

$("#thirdimage").height(percent*2); /* FOR THE 1st HALF ('*x' size increased x times) */

if(percent>50){$("#thirdimage").height((100-percent)*2 )}; /* FOR THE 2nd HALF ('*x' size increased x times) */
};
var timeOut= setInterval(repeataction, 1); /* USED TO REPEAT THE ACTION */
});
</script>
</div>


</body>

</html>

THIS WILL WORK.


Need Your Help

Geting error in Terminal after trying Rails server

ruby-on-rails linux ubuntu terminal rbenv

I'm trying to run server in Ubuntu Terminal by "$rails server", and i get this error in terminal:

php calls to ipinfo.io hanging up (for last two days)

php ip

My logging function uses the IP address of the person accessing a server based php utility, to retrieve details about the IP, with this code snipit: