How can I make my social media bar zoom in and out at the same time my mouse wheel scroll does?

Hello everybody I just started learning HTML and CSS to make my own page from scratch so, for this thread I just need some assistance with the social media bar, essentially what I need is just to make the bar capable of zooming in and out following the mouse wheel scroll of user, meaning that I won't have situations like this:

It should look like this instead (edited on paint):

here it's the code:

html:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Community Impact</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
    <link href="community-impactstyle.css" rel="stylesheet">


  </head>
  <body>
    <div class="s">
      <a href="index.html">Return to Index<i class="fas fa-hand-point-left"></i></a>
    </div>
    <h3>Noah Verner</h3>

   <header>
    </header>
    <main>
      <article>     
      </article>
      <aside>
      </aside>
    </main>
    <footer>Made by NOAH VERNER</footer>
  </body>
</html>

css:

    @font-face{
    src: url(Fonts/InputSerifCondensed-Regular.ttf);
    font-family: InputSerif;
}


*{
    font-family: InputSerif ;
}

body{
    background-color: #F5DC00;
    margin: 0;
    padding: 0;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    }

h3 {
    position: fixed;
    top: -20px ;
    left: 0;
    right: 0;
    font-size: 12px;
    background-color: black;
    color: white;
    font-size: 20px;
    text-align: center;
   }

footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: black;
    color: white;
    font-weight: bold;
    text-align: center;
      }


/*Barra de iconos de redes sociales*/

.s{
    position: absolute;
    justify-content: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    transform: translate(-1070px,0px);
  }
.s a{
    color: #F5DC00;
    background: rgba(0, 0, 0, 1);
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    display: block;
    margin: 5px;
    padding: 20px;
    width: 300px;
    text-align: right;
    border-radius: 50px;
    transition: 1s;
    transition-property: transform;
    }
.s a:hover{
    transform: translate(200px, 0);
          }
.s i{
    margin-left: 10px;
    font-size: 30px;
    width: 30px;
    height: 30px;
    }
.s a:nth-child(1) i{
    color: #F5DC00;
                   }

I know the code above doesn't contain all the 5 buttons, but I guess the solution could be applied to the "s" class rather than each button individually, and I tend to think the solution would be applied to the css file, but I'm a noob atm and can't figure it out

any ideas?

Solution

You're issue is that you are using the transform property to shift your element out of frame. A more robust way to do this would be to use the left property.

While we probably could find a way to do this in CSS, a more accurate way to do it would be using a touch of JavaScript - like so:

//get all of our social tabs as an array
let socialElem = document.querySelectorAll('.social');

//loop through the array
socialElem.forEach((elem) => {
  //define our text element within the tab
  let text = elem.querySelector('.hidden');
  //get it's dimensions as a JavaScript object
  let textSize = text.getBoundingClientRect();
  /* now, using the dimensions object above, we can return the 'right' pixel value
  of our text element. If we scoot our tab in by the negative of that number it should
  perfectly hide our text without using transform.*/
  elem.style.left = -textSize.right + 'px';
  //we also add 'px' so that CSS can read it
})

:root {
  /* set an accent color variable to make my life easier */
  --col-acc: #F5DC00;
}

body {
  /* reset default body styles */
  margin: 0;
  height: 100vh;
  /* set the background color of the body to the accent color variable */
  background-color: var(--col-acc);
  /* set the font to something more appealing */
  font-family: "Segoe UI Variable Text", system-ui, ui-rounded, sans-serif;
}

.social {
  /* set the background color of the social tab to black */
  background-color: black;
  /* set the text color to our accent color variable */
  color: var(--col-acc);
  /* resize the tab to be the size of it's content */
  width: max-content;
  /* round the right side */
  border-radius: 0 32px 32px 0;
  /* fix the tab (absolute would also work here if you don't care about it staying put when scrolling up and down on the page) */
  position: fixed;
  /* center it vertically (could be applied to a parent/containter for multiple tabs) */
  top: 50%;
  /* set it to the left side of the screen */
  left: 0;
  /* center it just a little more vertically */
  transform: translateY(-50%);
  
  /* set the transition to the left property with a duration of 0.5 seconds */
  transition: left 0.5s;
}
.social a {
  /* give the anchor tag a display of block so we can resize it */
  display: block;
  /* override the color with our accent color*/
  color: var(--col-acc);
  /* remove the underline */
  text-decoration: none;
  /* beef up the font a little */
  font-weight: 500;
  /* make the font bigger */
  font-size: 2rem;
  /* add some padding to our tab */
  padding: 8px 24px;
}
.social:hover, .social:focus-within {
  /* on hover (or focus for accesability) set the left position to 0
  I set this property to "important" becase the JavaScript is setting the right value to 0
  in the elment styles (which normally overrides the stylesheet), so the important here
  re-overrides the elment style, if that makes sense*/
  left: 0 !important;
}

<div class="social">
  <a href="#">
    <span class="hidden">Social</span> 🧔
  </a>
</div>