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

should image be 100% width? and if so what should be height of visible part? — NoOorZ24
– NoOorZ24, Commented Apr 25, 2017 at 10:35

web-tiki · Accepted Answer · 2017-04-26 12:30:14Z

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>

NoOorZ24 · Accepted Answer · 2017-04-25 14:16:46Z

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

That is a very creative solution, but still in my case position:fixed is not the solution, as it ruins all the design. I will accept your answer if no any feasible solution found

Ismail Farooq · Accepted Answer · 2017-04-25 06:40:15Z

2

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>

answered Apr 25, 2017 at 6:40

Ismail Farooq

6,9372 gold badges32 silver badges47 bronze badges

6 Comments

Nishant Solanki Over a year ago

thanks for your answer, I will integrate it with my code and let you know if it works or not.. thanks :)

Nishant Solanki Over a year ago

this is not working in my case, i tried many different calculations in the JS you provided, also tried doing some CSS patches.. but no luck

Ismail Farooq Over a year ago

what problem you are facing ?

Nishant Solanki Over a year ago

I have created a fiddle, check it here: jsfiddle.net/2owd5fm9/6

Ismail Farooq Over a year ago

what you actually want to do ? in the fiddle has different code

|

NoOorZ24 · Accepted Answer · 2017-04-25 12:07:34Z

So this is the working example that was approved by Nishant Solanki and it should work in all browsers

function myFunction() {
	speed = 0; 
  speed2 = -1;
  /**
  @ speed
  positive: moves up faster than background
  0: scrolls same as background
  negative: moves down faster
  -1: same as position: fixed
  try different ones to see it in action and you should figure it out
  
  P.S.
  you can apply different speeds to multiple alements to achieve what ever you desire
  */
	y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  cont = document.getElementById("prl");
  cont.style.top = (0 - Math.round(y * speed)) +"px";
  img = document.getElementById("image");
  img.style.top = (0 - Math.round(y * speed2)) +"px";
}

*{
  margin: 0;
  padding: 0;
}

#image {
  width: 100%;
  position: relative;
}
#prl {
  position: relative;
  background-color: white;
}

<body onscroll="myFunction()">

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

<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>
</body>

I'm not sure about that "keep scrolling" bug that others might be experiencing on SO as I am. On jsFiddle it works perfectly

Lieutenant Dan · Accepted Answer · 2017-04-28 14:26:23Z

2

Can't you just use something as simple as $(window).scroll to detect window scroll and then simply .addClass .removeClass or .toggleClass- Then with the new styles attached with the scroll, simply change the position of your img element?

$(document).ready(function(){
    $(window).scroll(function(){
        $('img').toggleClass('scrolled'); 
    })
})

.scrolled { 
  position: absolute;
  z-index: 777; // find correct value to use
  top: 102px; // adjust to customization
  left: 3px; // adjust to customization
}

Note:// It is much cleaner practice to create this effect with a background image, and adjusting it's position with the .scroll. If you have an ability to rewrite some code to achieve this it could be worth it in the long wrong. If not, you should be able to use jQuery .scroll and .toggleClass with adjusting z-index: property and position: property. You should be using pure CSS3 for responsive layouts; if position: property isn't working, then there is a conflict somewhere else with likely too much CSS or JS for the relevant elements.

edited Apr 28, 2017 at 14:26

answered Apr 28, 2017 at 14:14

Lieutenant Dan

8,30928 gold badges99 silver badges220 bronze badges

1 Comment

Nishant Solanki Over a year ago

I had thought about this type of solution, but it is quite tough to maintain it in responsive design.. As the image size changes according to the screen size

Yash Yadav · Accepted Answer · 2017-05-01 17:27:37Z

Try to avoid fixed & absolute in css . Hope you find it liberating.

function myFunction() {
  fixIt = document.getElementById('project-image');
  fixIt.style.top = 2 * Math.round(document.body.scrollTop) + "px";
}

* {
  margin: 0;
  padding: 0;
}

#project-image {
  width: 100%;
  position: relative;
}

.project-description,
.project-details>h1 {
  position: relative;
  z-index: 1;
  background: white;
}

.project-details {
  overflow: hidden
}

<body onscroll="myFunction()">


  <div class="project-details">
    <div id="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>
</body>

I personally love this modern plugin. Here

@NishantSolanki I ran the snippet works fine. Is it not showing on your desktop ?
@NishantSolanki forget it anyway, i like the answer you chose even better than mine.

Collectives™ on Stack Overflow

Parallax background image scroll without using css background property

6 Answers 6

Comments

1 Comment

6 Comments

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

6 Comments

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related