Parallax background image scroll without using css background property

Question

Is it possible to add parallax effect without using css background and background-attachment properties?

I have an img tag inside a div and want to add parallax scroll effect to the image, below is the code

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, 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, 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.
  </p>
</div>

problem: I can not put the image in the background of a div, so have to do it using the img tag only.

Edit: The image is horizontally centered in the div, and image and div sizes are updated on browser resize or mobile/tablet rotation using custom javascript. Have tried position:absolute and position:fixed but it doesn't seems to be working

Edit-2 Here is the fiddle link

Answer 1

Some time ago, I built these two examples with a parralax effect very similar to what you are looking for:

• this example using simple jQuery to update the position of the image and title on scroll
• this example using only CSS with 3D positioning to simulate the parralax effect on the image

In any case, I don't think you need JS to size the image on load. Here is an example with your code using the jQuery code from the first pen I shared here :

$( 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","translate3d(0," +  scrollLayer  + "px,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,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, 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, 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, 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.
  </p>
</div>

Answer 2

Ok, so I kinda tried something else and in this particular case it works and possibly might be best solution:

*{
  margin: 0;
  padding: 0;
}

#image {
  width: 100%;
  position: fixed;
}

#image2 {
  width: 100%;
  position: relative;
  visibility:hidden;
}
#prl {
  position: relative;
  background-color: white;
}

  <img src="http://placehold.it/350X225" id="image">
  <img src="http://placehold.it/350X225" id="image2">

<div id="prl">
  <p>
  sdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsad
  sdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksdghjlsadv  sdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsad
  sdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksdghjlsadv  sdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsad
  sdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksdghjlsadv  sdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsad
  sdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksda klsadsdf sfkdl ksdghjlsadv
  </p>
</div>

In this case no JS is needed, I'm just using same image 2 times: one for actual fixed disappearing one and one is just to reserve empty space

Answer 3

After some searching i found this

$('.img-parallax').each(function(){
  var img = $(this);
  var imgParent = $(this).parent();
  function parallaxImg () {
    var speed = img.data('speed');
    var imgY = imgParent.offset().top;
    var winY = $(this).scrollTop();
    var winH = $(this).height();
    var parentH = imgParent.innerHeight();


    // The next pixel to show on screen      
    var winBottom = winY + winH;

    // If block is shown on screen
    if (winBottom > imgY && winY < imgY + parentH) {
      // Number of pixels shown after block appear
      var imgBottom = ((winBottom - imgY) * speed);
      // Max number of pixels until block disappear
      var imgTop = winH + parentH;
      // Porcentage between start showing until disappearing
      var imgPercent = ((imgBottom / imgTop) * 100) + (50 - (speed * 50));
    }
    img.css({
      top: imgPercent + '%',
      transform: 'translate(-50%, -' + imgPercent + '%)'
    });
  }
  $(document).on({
    scroll: function () {
      parallaxImg();
    }, ready: function () {
      parallaxImg();
    }
  });
});

@import url(https://fonts.googleapis.com/css?family=Amatic+SC:400,700);
html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Amatic SC', cursive;
}
.block{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  font-size: 16px;
}
.block h2{
  position: relative;
  display: block;
  text-align: center;
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10vw;
  color: white;
  font-weight: 400;
}
.img-parallax {
  width: 100vmax;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,0);
  pointer-events: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?image=1005" data-speed="-1" class="img-parallax">
  <h2>Parallax Speed -1</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?image=1067" data-speed="1" class="img-parallax">
  <h2>Parallax Speed 1</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?gravity=center" data-speed="-0.25" class="img-parallax">
  <h2>Parallax Speed -0.25</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?image=1080" data-speed="0.25" class="img-parallax">
  <h2>Parallax Speed 0.25</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?random" data-speed="-0.75" class="img-parallax">
  <h2>Parallax Speed -0.75</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?blur" data-speed="0.75" class="img-parallax">
  <h2>Parallax Speed 0.75</h2>
</div>