最も垂直に真ん中の線にズームする

Question

私は子供を含むdivを持っていて、各子供はテキスト行を保持しています。

<div id="aboutxt"> 
    <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div> 
    <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div> 
    <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div> 
    <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div> 
    <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div> 
    <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div> 
</div> 

私は、ラインをズームインしようとしています。すなわち、ページの（垂直方向の）中央にズームしようとしています。また、その隣のdivはズームインする必要がありますが、フォーカスされたdivほど大きくはなりません。 今、10行目がページの中央にあるとします。だから、ズームは次のようになります。

Line 1: zoom 1 
Line 2: zoom 1 
Line 3: zoom 1 
Line 4: zoom 1 
Line 5: zoom 1.1 
Line 6: zoom 1.2 
Line 7: zoom 1.3 
Line 8: zoom 1.4 
Line 9: zoom 1.5 
Line 10: zoom 2 
Line 11: zoom 1.5 
Line 12: zoom 1.4 
Line 13: zoom 1.3 
Line 14: zoom 1.2 
Line 15: zoom 1.1 
Line 16: zoom 1 
Line 17: zoom 1 
Line 18: zoom 1 

前の5,5次の隣人を見ての通り

はズームインされていると挑戦的な部分があり、私はそれがスクロールに行動する必要があります。親がスクロールダウンされているときには、フォーカスされているラインに応じてズームが変わります。あなたは以前にこの効果を見たかもしれません。しかし、私はそれが何と呼ばれているのか分かりません。 私は私の意味をよく説明してくれることを願っています。

Answer 1

これはあなたが

$('.line').mouseover(function() { 
 
    $(this).animate({ 
 
    'zoom': 1.2 
 
    }, 100).css({ 
 
    'color': '#f00' 
 
    }); 
 
    $(this).prev().animate({ 
 
    'zoom': 1.1 
 
    }, 100).css({ 
 
    'color': '#000' 
 
    }); 
 
    $(this).prev().prev().animate({ 
 
    'zoom': 1.0 
 
    }, 100); 
 
    $(this).next().animate({ 
 
    'zoom': 1.1 
 
    }, 100).css({ 
 
    'color': '#000' 
 
    }); 
 
    $(this).next().next().animate({ 
 
    'zoom': 1.0 
 
    }, 100).css({ 
 
    'color': '#000' 
 
    }); 
 
}); 
 
$('#aboutxt').mouseleave(function() { 
 
    $('.line').animate({ 
 
    'zoom': 1.0 
 
    }, 100).css({ 
 
    'color': '#000' 
 
    }); 
 
});

#aboutxt { 
 
    text-align: center; 
 
} 
 
#aboutxt .line { 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="aboutxt"> 
 
    <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div> 
 
    <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div> 
 
    <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div> 
 
    <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div> 
 
    <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div> 
 
    <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div> 
 
    <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div> 
 
</div>