在水平滚动条上淡出文本

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

我需要创建一个带有在水平滚动条上淡出的文本的块。这个块在不均匀的背景上，所以在边上添加线性渐变的解决方案是不合适的。

text must fade out on scrolling to right

帮我调整这个解决方案或告诉我另一个！

我在网上找到了这个解决方案Fiddle。这是实现了具有所需效果的垂直滚动。

<body>
  <div class='fade'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
  </div>
</body>


*{
  box-sizing:border-box;
  margin:0;
  font-family: sans-serif;
}

body{
  min-height: 100vh;
  color:white;
  background: url('https://images.pexels.com/photos/414144/pexels-photo-414144.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat center/cover;
  display: flex;
  background-attachment:fixed;
  
}

.fade{
  width: 100%;
  max-width: 640px;
  margin:auto;
  background-image: linear-gradient(
    transparent 12%,
    currentColor 30%,
    currentColor 70%,
    transparent 86%
  );
  -webkit-background-clip: text;
  background-attachment:fixed;
}

p{
  color:transparent;
}

这是我尝试使这个解决方案适应我的情况Fiddle。但这是不成功的。而且我不明白我的广告到底做错了什么。

<body>
  <div class='fade'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</body>

<style>
  * {
    box-sizing: border-box;
    margin: 0;
    font-family: sans-serif;
  }

  body {
    min-height: 100vh;
    color: white;
    background: url('https://images.pexels.com/photos/414144/pexels-photo-414144.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat center/cover;
    display: flex;
    background-attachment: fixed;

  }

  .fade {
    width: 100%;
    max-width: 540px;
    margin: auto;
    background-image: linear-gradient(to right,
        transparent 12%,
        currentColor 30%,
        currentColor 70%,
        transparent 86%);
    white-space: nowrap;
    -webkit-background-clip: text;
  }


  p {
    color: transparent;
        overflow-x: auto;
        z-index
  }

</style>
javascript html css fade
1个回答
0
投票

终于我可以做我需要的了。希望对大家有帮助。

* {
  box-sizing: border-box;
  margin: 0;
  font-family: sans-serif;
}

body {
  height: 100vh;
  color: white;
  background: url('https://images.pexels.com/photos/414144/pexels-photo-414144.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat center/cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  background-attachment: fixed;
  overflow-x: scroll;
  width: 80%;
}

.fade {
  background-attachment: fixed;
  margin: auto;
  background-image: linear-gradient(to right, transparent 12%, currentColor 30%, currentColor 70%, transparent 86%);
  white-space: nowrap;
  -webkit-background-clip: text;
  width: fit-content;
}

p {
  color: transparent;
}
<body>
  <div class='container'>
    <div class='fade'>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</body>

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