是否可以添加视差效果而不使用CSS背景和背景附件属性？
我在div里面有一个img标签,想要给图像添加视差滚动效果,下面是代码
function resize_div()
{
var image_height = $('.project-image img').height();
var div_height = $('.project-image').height();
var window_height = $(window).height();
var window_width = $(window).width();
$('.project-image').css('height',window_height - 80);
}
$(window).resize(function () {
resize_div();
});
.project-details
{
width:100%;
}
.project-image{
text-align:center
}
.project-description
{
line-height:15px;
margin:0 0 10px
}
.img-responsive
{
height: auto;
max-width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="project-details"> <div class="project-image"> <img src="http://placehold.it/350X225" class="img-responsive"> </div> <h1> Project Title </h1> <p class="project-description"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <br/> <br/> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div>
问题：我不能将图像放在div的背景中,所以只能使用img标签来执行.
编辑：图像在div中水平居中,并且使用自定义javascript在浏览器调整大小或移动/平板电脑轮换上更新图像和div大小.已经尝试了位置：绝对和位置：固定但似乎没有工作
Edit-2这是fiddle link
解决方法
前段时间,我建立了这两个例子,其parralax效果非常类似于你正在寻找的：
> this example使用简单的jQuery来更新图像的位置和滚动的标题
> this example仅使用CSS与3D定位来模拟图像上的parralax效应
在任何情况下,我不认为你需要JS来加载图像大小.这里有一个例子,你的代码使用我在这里分享的第一个笔的jQuery代码：
$( document ).ready(function() {
var $window = $(window);
function scroll_elements(){
var scroll = $window.scrollTop();
var scrollLayer = scroll/1.4;
$(".project-image").css(
"-webkit-transform","translate3d(0," + scrollLayer + "px,0)","transform",0)"
);
}
$window.scroll(scroll_elements);
});
.project-image {
position:relative;
z-index:1;
}
.img-responsive {
display:block;
max-width:100%;
height:auto;
margin:0 auto;
}
h1,.project-description {
position:relative;
max-width:500px;
z-index:2;
background:rgba(255,255,.7);
margin:0 auto;
padding:10px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="project-details"> <div class="project-image"> <img src="http://placehold.it/350X225" class="img-responsive"> </div> <h1> Project Title </h1> <p class="project-description"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div>
