小编Nis*_*nki的帖子

没有使用css背景属性的视差背景图象滚动

是否可以在不使用css backgroundbackground-attachment属性的情况下添加视差效果?

我在img里面有一个标签div,想要为图像添加视差滚动效果,下面是代码

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();
});
Run Code Online (Sandbox Code Playgroud)
.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%;
}
Run Code Online (Sandbox Code Playgroud)
<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 …
Run Code Online (Sandbox Code Playgroud)

html css scroll css3

11
推荐指数
1
解决办法
1362
查看次数

标签 统计

css ×1

css3 ×1

html ×1

scroll ×1