- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想知道一些网站如何使用它作为背景,当您向下滚动时向上滚动。他们是怎么做到的?是否有 jquery 代码可以添加到这里?
我有这个:
.featured-container{
margin-left: 0px;
margin-right: 0px;
left:0px;
width: 100%;
z-index:-6;
overflow: hidden;
position: absolute;
background-image: url("../images/subtle.png");
background-attachment: fixed;
}
最佳答案
我很确定您正在寻找视差效果。你应该谷歌它。有很多关于它的教程、类(class)和示例。
我认为this example由 skeurentjes 制作将满足您的需求。
JavaScript (JQuery)
$(window).scroll(function(e){
parallax();
});
function parallax(){
var scrolled = $(window).scrollTop();
$('.background').css('top',-(scrolled*0.15)+'px'); // here you scroll downward
}
HTML
<div class="background"></div>
<article class="wrapper">
<header>
<h1 class="pageTitle">Parallax scrolling</h1>
<h2 class="pageSubTitle">With a little bit of jQuery</h2>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat tortor a turpis mattis, in blandit orci venenatis. Quisque justo lacus, rutrum mattis tortor et, aliquam auctor risus. Mauris quis elit turpis. Morbi non nisl nunc. Duis elit quam, lobortis eget pretium sed, eleifend eu dui. Sed molestie ornare suscipit. Phasellus facilisis at quam sed tincidunt. Phasellus eget odio laoreet, dictum augue ac, dictum lorem. Nulla facilisi. Phasellus elit augue, cursus eu ante nec, vestibulum adipiscing mi. Nunc adipiscing nibh risus, sed auctor sapien sodales in. Morbi in purus diam. In id consequat velit, eget sodales enim. Nam a massa sed orci blandit interdum eget et ligula. Pellentesque laoreet semper vulputate.</p>
<p>Proin laoreet molestie mi ac mattis. Curabitur velit lorem, euismod eget leo sed, imperdiet ullamcorper mauris. Fusce posuere dapibus eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper massa lectus, et tempor orci dapibus non. Pellentesque id enim commodo, scelerisque augue in, pharetra purus. Donec leo odio, consequat non tellus tincidunt, rhoncus porta urna.</p>
<p>Aenean tincidunt sed metus et mollis. Pellentesque tristique risus ac suscipit ornare. Sed a tempor nisl. Nam imperdiet mauris vel nunc varius, id volutpat elit porta. Etiam eu consectetur dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean sollicitudin fermentum nulla, eu ultricies orci imperdiet sed. Cras vitae quam blandit quam volutpat tincidunt vel vel quam. Ut id dictum nisl, nec commodo augue. Donec sed imperdiet arcu, nec ullamcorper ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis id egestas est. Pellentesque eleifend, nisi quis eleifend blandit, lacus ligula tempus quam, non sagittis eros tortor vel massa. Duis posuere pellentesque arcu in sollicitudin.</p>
</section>
</article>
<article class="wrapper">
<header>
<h1 class="pageTitle">Another title</h1>
<h2 class="pageSubTitle">With just another subtitle</h2>
</header>
<section>
<p>Proin laoreet molestie mi ac mattis. Curabitur velit lorem, euismod eget leo sed, imperdiet ullamcorper mauris. Fusce posuere dapibus eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper massa lectus, et tempor orci dapibus non. Pellentesque id enim commodo, scelerisque augue in, pharetra purus. Donec leo odio, consequat non tellus tincidunt, rhoncus porta urna.</p>
<p>Aenean tincidunt sed metus et mollis. Pellentesque tristique risus ac suscipit ornare. Sed a tempor nisl. Nam imperdiet mauris vel nunc varius, id volutpat elit porta. Etiam eu consectetur dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean sollicitudin fermentum nulla, eu ultricies orci imperdiet sed. Cras vitae quam blandit quam volutpat tincidunt vel vel quam. Ut id dictum nisl, nec commodo augue. Donec sed imperdiet arcu, nec ullamcorper ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis id egestas est. Pellentesque eleifend, nisi quis eleifend blandit, lacus ligula tempus quam, non sagittis eros tortor vel massa. Duis posuere pellentesque arcu in sollicitudin.</p>
</section>
</article>
<article class="wrapper">
<header>
<h1 class="pageTitle">Again another title</h1>
<h2 class="pageSubTitle">And again another subtitle</h2>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat tortor a turpis mattis, in blandit orci venenatis. Quisque justo lacus, rutrum mattis tortor et, aliquam auctor risus. Mauris quis elit turpis. Morbi non nisl nunc. Duis elit quam, lobortis eget pretium sed, eleifend eu dui. Sed molestie ornare suscipit. Phasellus facilisis at quam sed tincidunt. Phasellus eget odio laoreet, dictum augue ac, dictum lorem. Nulla facilisi. Phasellus elit augue, cursus eu ante nec, vestibulum adipiscing mi. Nunc adipiscing nibh risus, sed auctor sapien sodales in. Morbi in purus diam. In id consequat velit, eget sodales enim. Nam a massa sed orci blandit interdum eget et ligula. Pellentesque laoreet semper vulputate.</p>
<p>Proin laoreet molestie mi ac mattis. Curabitur velit lorem, euismod eget leo sed, imperdiet ullamcorper mauris. Fusce posuere dapibus eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper massa lectus, et tempor orci dapibus non. Pellentesque id enim commodo, scelerisque augue in, pharetra purus. Donec leo odio, consequat non tellus tincidunt, rhoncus porta urna.</p>
<p>Aenean tincidunt sed metus et mollis. Pellentesque tristique risus ac suscipit ornare. Sed a tempor nisl. Nam imperdiet mauris vel nunc varius, id volutpat elit porta. Etiam eu consectetur dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean sollicitudin fermentum nulla, eu ultricies orci imperdiet sed. Cras vitae quam blandit quam volutpat tincidunt vel vel quam. Ut id dictum nisl, nec commodo augue. Donec sed imperdiet arcu, nec ullamcorper ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis id egestas est. Pellentesque eleifend, nisi quis eleifend blandit, lacus ligula tempus quam, non sagittis eros tortor vel massa. Duis posuere pellentesque arcu in sollicitudin.</p>
</section>
</article>
CSS
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900);
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,600,700,300,200);
body {
font-family: 'Roboto', sans-serif;
font-size: 14px;
letter-spacing: 1px;
line-height: 1.6em;
font-weight: 300;
color: #555;
}
p {
margin-bottom: 2em;
}
header {
border-bottom: solid 1px #e0e0e0;
margin: 0 0 20px 0;
}
.pageTitle,
.pageSubTitle {
font-family: 'Titillium', sans-serif;
text-transform: uppercase;
color: #333;
}
.pageTitle {
color: #FF7600;
}
.pageTitle {
font-size: 2em;
font-weight: 700;
line-height: 2em;
}
.pageSubTitle {
margin-bottom: 1em;
font-size: 1.4em;
font-weight: 300;
}
.background {
background:
url("http://img.talkandroid.com/uploads/2013/03/htc-sense-5-wallpaper-3.jpg")
repeat;
background-size: 100% auto;
position: fixed;
width: 100%;
height: 300%;
top: 0;
left: 0;
z-index: -1
}
.wrapper {
width: 520px;
padding: 40px;
margin: 20px auto;
background: #fff;
box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.25);
}
.slogan {
position: fixed;
display: block;
top: 700px;
width: 100%;
padding: 20px 0;
text-align: center;
background: #222;
}
.sloganTitle {
font-size: 70px;
font-weight: 700;
line-height: 80px;
color: #fff;
text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.25);
}
关于html - 背景附件 : fixed - Reverse scroll?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22866131/
我想使用 overflow: scroll(或 auto)完成比屏幕宽的图库预览。在右侧,与最后一张可见图像重叠的阴影应该表示右侧可以看到更多图像。 这是一个 fiddle :http://jsfid
我的网格面板的滚动条有问题。当我滚动到底部并试图再次向上滚动时,滚动条会自动向下滚动,防止我滚动到列表的顶部。。。我试着设置布局“合适”,或给面板一个特定的宽度和高度大小,但这些解决方案都不起作用。。
这段代码的作用是什么? var oldScrollPos = $(window).scrollTop(); $(window).on('scroll.scrolldisabler', fu
..对于这个元素,我会在某个时候烧脑。 10 小时后仍然没有任何消息。 溢出的元素在 Android stock 浏览器(目前在 s3 mini,android 4.1.2 上测试)中没有任何平滑度。
基本上,我想要的是固定标题、卡住 Pane 、表格,例如 http://www.cssplay.co.uk/menu/tablescroll.html 。然而,他的 table 有一个主要弱点。标题不
我在我的一个项目中使用 Twitter Bootstrap,但是我的内容超出了浏览器 View 的问题。通常您会在屏幕右侧看到滚动条,但在我的情况下没有。我在 overflow: hidden; 之后
是否有一个“有效”的解决方案可以使对话框随滚动条滚动,而不是仍然从内部窗口边界的中心固定? 在某些情况下,用户的分辨率可能太小而无法包含对话框,在这种情况下,部分对话框可能会被隐藏。您可能在隐藏部分有
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: hide scrollbar while still able to scroll with mouse/k
我希望能够水平滚动浏览一些文章,但它不起作用。我尝试在内容周围放置一个边框,这样一些内容就会被截断,这样我就可以滚动,但是当我这样做时文章会垂直对齐... 这是我正在使用的代码: HTML:
我已经使用 HSROLL 成功创建了一个组合框,如下所示: HWND find = CreateWindowEx(0, WC_COMBOBOX, _T(""), CBS_DROPDOWN | WS_V
我有一个 定位于 position:fixed .当窗口在水平方向上太小而无法容纳 div 时,不会出现滚动条,div 的右侧会被简单地切断。 如果我更改为 position:absolute,滚动条
我对这两个参数完全感到困惑, es.scroll.size es.scroll.limit 我做了一些测试,仍然不知道。 es.scroll.limit = es.scroll.size * num_
我正在尝试使用 skrollr 构建网站.这是jFiddle link对于我已经尝试过的。但是正如您所见,当 smoothScrolling 设置为 true 时,它不会按预期工作。当设置 smo
最近,我在一个网站上工作,我想在不同的滚动位置拍摄特定的效果。我正在使用 Velocity JS 制作动画。有一个元素我想自动滚动到另一个特定的滚动位置。这可以使用 Velocity JS 轻松实现。
继续追加,您会看到最新的聊天消息出现,但在某个点后它会停止自动向下滚动。我怎样才能解决这个问题?谢谢。 http://jsfiddle.net/VMcsU/ $("#button1").click(f
在我的代码中,y 滚动位置(以像素为单位)是滚动 Pane 的顶部: stage = new Stage(new StretchViewport(480, 800)); Image m
我有一个模态对话框,里面有一个可滚动的 div。 div 设置为 overflow: scroll; 但是,当用户在 div 中一直向下滚动时,弹出窗口后面的内容开始向下滚动。 问题:当弹出窗口打开时
我正在使用 AutoCompleteTextView 让我的 Android 应用程序的用户使用自定义网络服务搜索内容:它按预期工作,但目前我找不到实现“无尽滚动”的方法"在下拉 ListView 上
我在我的应用程序中使用工具栏并使用这个 link我隐藏了工具栏,它按预期完美工作。但是当列表只有一个/两个项目时,不需要滚动工具栏,因为底部有足够的空间。 隐藏工具栏背后的想法是当列表项超出屏幕高度时
我是 Ios 开发的新手,我在导航项中添加了一个 Searchbar我想要实现的是当我向上滚动 tableview我想隐藏 Searchbar 并在向下滚动时显示它 类似于 iPAD/Iphone 上
我是一名优秀的程序员,十分优秀!