如何添加纯CSS视差滚动

8ulbf1ek 于 5个月前发布在其他

关注(0)|答案(4)|浏览(71)

我想添加一些纯CSS视差滚动功能到我的网站，但我已经尝试过的一切似乎都不工作.我已经在这里搜索答案太多，但没有回答我的问题.有人知道我如何可以把这个代码：http://wolfleader116.github.io/（对不起，Doctype声明不像实际文件中那样缩进。）并添加一个纯CSS视差滚动功能，使背景滚动速度减半？谢谢！

css

来源：https://stackoverflow.com/questions/25615309/how-to-add-pure-css-parallax-scrolling

4条答案

按热度按时间

olmpazwi1#

你可以试试这个教程。Tutorial Link 1 Tutorial Link 2

body { 
 margin:0;
 padding:0;
 perspective: 1px;
 transform-style: preserve-3d;
 height: 100%;
 overflow-y: scroll;
 overflow-x: hidden;
 font-family: Nunito;
}

字符串

赞(0）回复(0）举报 5个月前

pcww981p2#

你可以使用background-attachment: fixed css样式来创建一个仅CSS的视差滚动。这使用了background-image被固定的概念，其余的内容随着页面滚动。

.parallax div{
    background-attachment: fixed;
    height: 50vh;
    text-indent : -9999px;
    position : relative;
    background-position   : center center;
    background-size       : cover;
      &:nth-child( 2n ) {
      box-shadow : inset 0 0 1em #111; 
    }
}

字符串

DEMO

赞(0）回复(0）举报 5个月前

wpx232ag3#

这是我如何做我的网站（http://www.ideathhead.co.uk）与parralax滚动：

HTML：

使用下面的属性添加节标签。（每个节代表一张幻灯片）

<section name="home" id="home" data-type="background" data-speed="10">
          <p class="buzz-out" id="Welcome"></p>                    
        </section>

字符串

CSS：

这将确保您的背景图像跨越整个页面，并调整它的大小为每一个决议！

#home {
background: url(img/slide1.png) 50% 0 repeat fixed;
min-height: 100%;
background-size: cover;
margin: 0 auto;
}

型
这就是它的字面意思，无论如何，对于视差滚动的基础知识，如果你在互联网上进一步挖掘，你可以做一些更酷的效果，记住，谷歌是你的朋友！

_________________________________________________________________

如果您愿意使用一点JS，以下是可选的！！

_________________________________________________________________

另外，一个提示是，如果你想在滚动时稍后添加按钮平滑到某些页面，然后将其添加到JavaScript文件中：

JS：

此脚本使页面滚动更流畅，因此它不会只跳转到页面的某一部分

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

型
然后，在HTML中的标签中，将href设置为要滚动到的部分的ID，它也会顺利完成！例如，This is the section：

<section name="home" id="home" data-type="background" data-speed="10">
          <p class="buzz-out" id="Welcome"></p>   
        </section>

型

这是按钮

<a href="#home">CLICK</a>

型
记住，这是ID而不是名字，因为我一开始就搞混了！
我很乐意帮助：）

赞(0）回复(0）举报 5个月前

xtupzzrd4#

尝试此页滚动codepen

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallax {
  /* The image used */
  background-image: url("https://i.ibb.co/JnWFTCM/vadim-kaipov-6k-I0qhmxc4-unsplash.jpgimg_parallax.jpg");

  /* Set a specific height */
  min-height: 500px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
</head>
<body>

<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>

<div class="parallax"></div>

<div style="height:1000px;background-color:red;font-size:36px">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>

</body>
</html><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallax {
  /* The image used */
  background-image: url("https://i.ibb.co/JnWFTCM/vadim-kaipov-6k-I0qhmxc4-unsplash.jpgimg_parallax.jpg");

  /* Set a specific height */
  min-height: 500px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
</head>
<body>

<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>

<div class="parallax"></div>

<div style="height:1000px;background-color:red;font-size:36px">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>

</body>
</html>

字符串

赞(0）回复(0）举报 5个月前

我来回答

如何添加纯CSS视差滚动

4条答案

如果您愿意使用一点JS，以下是可选的！！

相关问题

热门标签

最新问答