CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapparallax
lopu
lopu

Reputation: 172

Creating a parallax effect for a non full width image in a container

I have this section of my site dedicated to acts which are going to be at the event. One of the acts' given picture is ridiculously vertical but the supplied info is little to none. So I thought I could make the picture extend vertically outside the constraints of the section and give it a parallax scroll effect.

Here is the whole section code: 

<section id="acts">
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-2 kujopad">
                <p>The Kujo Kings
                Known for their Ska/Punk anthems and high energy packed out shows, this 20 something band has built a strong Australian-wide following since forming in 2010.  The six-piece band are dedicated to entertaining fans with their catchy and humorous tunes, with dangerous amounts of energy, dancing, costumes and gratuitous fun being a consistent feature of their shows, the Kujo Kings are an act not to be missed!</p>
        </div>
        <div class="col-lg-4 kujoimgpos" data-scroll-speed="6">
            <img style="height: 700px; width: auto;" src="img/Kujo%20Kings%20image.jpg">
        </div>
    </div>
</div>
</section>

I tried to accomplish the effect by giving the div which holds the image a negative margin, which worked for hiding part of the top and bottom of the image above and below the section, and then applying a scroll speed to the div, which didn't work, and then the image, which also didn't work. I know of all the parallax.js and equivalents out there but in all the demos they do this for fullscreen backgrounds and I can't get it to work for my use case.

I can already see the flaws in my logic for the effect as giving a div a different scrolling speed would change the scroll speed right from the start and so would make it either disappear or be positioned totally wrong once the user scrolls to that section. Hopefully you guys can help :) I don't mind using js

I also gave the image a z-index of -10 just in case that might help with the parallax effect but as I said the logic there is flawed.. 

.kujoimgpos {
    margin-top: -50px;
    margin-bottom: -50px;
    z-index: -10;
}

And I can't use position: fixed; because I only want the image to scroll slightly when it's scrolled past. Not completely which looks unrealistic.

Upvotes: 1

Views: 1363

Answers (1)

Anton Kastritskiy
Anton Kastritskiy

Reputation: 1333

Generally you should create a codepen or a jsfiddle with your code to make it easier for people to help you.

Here is my quick fix with jQuery. I did edit the html a little and added a couple of styles, please see the codepen for a working example.

Here is the jQuery that makes it work

//get heigth of the article part
var pContainerHeight = $('.kujopad').height();
console.log(pContainerHeight);
// assign same height to image part
$('.kujoimgpos').css({'height' : pContainerHeight + 'px'});

$(window).scroll(function(){

  var wScroll = $(this).scrollTop();

  if (wScroll <= pContainerHeight) {
//pull bg image of kujoimgpos wScrill*1.6 pixels up
    $('.kujoimgpos').css({
          'background-position' : '0 -'+ wScroll *1.6 +'px'
    });
  }
});

http://codepen.io/antonk52/pen/YwzqQN

this guy personally troubleshot and developed a solution for my site which you can see the result of here

He changed a bit of the javascript to include an offset for when the scrolling starts and how the height is decided.

Here's the script and all classes

$(document).ready(function(){

    //get heigth of the article part
    var pContainerHeight = $('#heightid').outerHeight(true);
    console.log(pContainerHeight);
    // assign same height to image part
    $('.kujoimgpos').css({'height' : pContainerHeight + 'px'});

    $(window).scroll(function(){

      var wScroll = $(this).scrollTop();
      console.log($(this).scrollTop());
      if (wScroll => 1000) {
    //pull bg image of kujoimgpos wScroll*1.6 pixels up
        $('.kujoimgpos').css({
              'background-position' : '0 -'+ wScroll *0.2 +'px'
        });
      }
    });

});


.kujoimgpos {
    background-image: url('/img/kujokings.jpg');
    background-repeat: no-repeat;
}

.kujopad {
    padding-top: 180px;
    padding-bottom: 200px;
}

and the html section

<section id="acts" class="acts">
<div class="container-fluid" >
    <div class="row">
        <div class="col-sm-4 col-sm-offset-2 kujopad" id="heightid">
                <h1>The Kujo Kings</h1>
                <p>The Kujo Kings
                Known for their Ska/Punk anthems and high energy packed out shows, this 20 something band has built a strong Australian-wide following since forming in 2010.  The six-piece band are dedicated to entertaining fans with their catchy and humorous tunes, with dangerous amounts of energy, dancing, costumes and gratuitous fun being a consistent feature of their shows, the Kujo Kings are an act not to be missed!</p>
        </div>
        <div class="col-sm-4 kujoimgpos">
        <! the image is here >
        </div>
    </div>
</div>
</section>

Upvotes: 2

Related Questions