javascript - How do I achieve navigating effect within a view in HTML/JS/CSS?

Question

I wonder how do I make an audience feel like navigating a single page and zoom in/out like the link below.

https://pudding.cool/2017/09/hip-hop-words/

I looked into inspector's css and it uses background-posiiton which I haven't used? It might have something to do with this attribute I guess?

But not sure what makes the page feel like i'm actually zooming in the page.

before zoom

after zoom

question from:https://stackoverflow.com/questions/65849091/how-do-i-achieve-navigating-effect-within-a-view-in-html-js-css

Answer 1

Maybe this helps: (it does not zoom, but it scrolls the paper so the the clicked portrait is centered)

var portrait = $(".portrait");
var paper = $("#paper");

portrait.click(function(e) {
    var myleft=200-$(this).position().left;
  paper.css({left: myleft})
})

#paper {width: 300px; height: 300px; border: 1px solid blue; position: absolute; left: 200px;}

.portrait { width: 20px; height: 20px; border: 1px dotted pink; position: relative}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="paper">
  <div class="portrait" style="left: 50px; top: 100px">
  :-)
  </div>
  
    <div class="portrait"  style="left: 200px; top: 100px">
  :-(
  </div>
  
</div>