如何让我的社交媒体栏在鼠标滚轮滚动的同时放大和缩小？

问题描述 投票：0回答：3

大家好，我刚刚开始学习 HTML 和 CSS，从头开始制作自己的页面，所以，对于这个线程，我只需要社交媒体栏的一些帮助，本质上我需要的只是让栏能够放大和缩小以下内容用户的鼠标滚轮滚动，这意味着我不会出现这样的情况：

它应该看起来像这样（在油漆上编辑）：

这是代码：

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;
                   }

我知道上面的代码并不包含所有 5 个按钮，但我想该解决方案可以应用于“s”类，而不是单独应用于每个按钮，并且我倾向于认为该解决方案将应用于 css 文件，但我是个 ATM 菜鸟，无法弄清楚

有什么想法吗？

html css responsive-design
3个回答
1
投票

您的问题是您正在使用 

transform
属性将元素移出框架。更可靠的方法是使用 
left
属性。

虽然我们可能可以在 CSS 中找到一种方法来做到这一点，但更准确的方法是使用一些 JavaScript - 就像这样：

//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>

1
投票

您可以执行滚动效果，其中采用 scrollY 并将其与元素 left 的boundingClientRect 位置求和，然后在条件条件内添加一些以像素为单位的单位长度约束。跟踪 up 和 down 滚动方向，并将它们添加到社交图标和包含文本的进出幻灯片的条件中。

const socials = document.querySelectorAll('.socials')
let lastScroll = 0;

window.addEventListener('scroll', function(e) {
  let value = window.scrollY
  let output = ''
  let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
  if (currentScroll > 0 && lastScroll <= currentScroll) {
    lastScroll = currentScroll
    output = "down"
  } else {
    lastScroll = currentScroll
    output = "up"
  }
  socials.forEach(icon => {
    let rect = icon.getBoundingClientRect()
    rect.left < -16 && output === "down" ?
      icon.style.left = `${rect.left + value * 0.15}px` :
    rect.left > -16 && output === "down" ?
      icon.style.left = `0px` : 
    rect.left > "-192" && output === "up" ?
      icon.style.left = `${rect.left - value * 0.15}px` :
    rect.left < "-192" && output === "up" ?
      icon.style.left = `-192px` : null
  })
})
body * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

#container {
  height: 300vh;
  position: relative;
}

img {
  width: 2rem;
  height: 2rem;
}

.socials {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 15rem;
  height: auto;
  background: green;
  color: limegreen;
  border-top-right-radius: 2rem;
  border-bottom-right-radius: 2rem;
  padding: .5rem;
  position: fixed;
  top: 2rem;
  left: -12rem;
}
<div id="container">
  <div class="socials">
    Follow me on Rumble
    <img src="https://img.utdstc.com/icon/01c/903/01c9032ef30ddf7a9f0346ce3a77b92fd5602e34818f25603962012d2792fab6:200">
  </div>
</div>

0
投票

大家，我刚刚找到了解决我的问题的另一种解决方案，这更加简单易行（感谢@calvin-bonner让我意识到这一点）：

在我的 CSS 文件中：我刚刚输入了以下内容：

.s{
    position: absolute;
    justify-content: center;
    height: 100vh;
    display: flex;
    left: 0;
    flex-direction: column;
    transform: translate(-82.5%);

  }

如你所见，我只添加了 

left: 0;
并将 
transform: translate(-1070px,0px);
更改为 
transform: translate(-82.5%);
，现在它效果很好，正如我预期的那样

（应用上面的简单解决方案后我的索引的实际屏幕截图）

注意：我认为这个解决方案效果很好，因为我没有使用nor 计划在我的网站上添加滚动条

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.