Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Johannes Herrmann
Johannes Herrmann
6,783 Points

jQuery Product Animation

Hi guys, I am a beginner in jQuery and currently working on a project for my company. We want to achieve a similar effect like the one on this website: http://agencysurvivalkit.com/. So basically, our product package should slide open and afterwards the user can scroll the rest of the content of the site. Does anyone of you know how to do this? Thank you so much!

4 Answers

Zhihao Wang
Zhihao Wang
9,687 Points

No jQuery is required for this; it can all be done with css.

The concept of this is to layer the images, and then have the box itself be fixed, so that it seems as if it is still while the user scrolls and the cover moves up. Then apply a bottom padding to give the cover space to move up, how much depends on your preference. Lastly, set a background color to the rest of your site text so that it will cover up the box contents and make it seem as if it went behind the site.

<div id="hero">
<div class="cover">
   <div class="box-contents"></div>
</div>
</div>

<div id="main">
<!-- Your rest of the site -->
</div>

#hero{
   padding-bottom: /** add enough padding for the cover to scroll up **/
}

.cover{
background-image: /** add cover image **/
}

.box-contents{
background-image: /** add box image **/
position: fixed;
z-index: -1;
}

#main{
background-color: /** whatever color you want it to be **/
}

Here's a live demo: https://jsfiddle.net/beu1kpoa/

Cheers!

Neil Docherty
Neil Docherty
10,418 Points
Neil Docherty
Neil Docherty
10,418 Points

Codrops has a good demo that might give you some pointers.

As mentioned by Zhihao Wang you can use CSS to achieve the opening of the box's lid. You may also find some jQuery plugins like SUPERSCROLLORAMA to be useful.

It also looks like the website you point to makes use of jQueryUI. Have a look at the Draggable interactions. You could use the event options to control the horizontal scrolling. For example, when the div is dragged a certain amount trigger the next/previous div to be positioned in the window with a CSS transition effect such as Animate.css.

Johannes Herrmann
Johannes Herrmann
6,783 Points
Johannes Herrmann
Johannes Herrmann
6,783 Points

Zhihao and Neil, thanks a lot for your suggestions! I will read up on the links and I am sure I will get a solution out of those. Will keep you updated :)

Johannes Herrmann
Johannes Herrmann
6,783 Points
Johannes Herrmann
Johannes Herrmann
6,783 Points

So I went almost only with a solution in CSS like Zhihao proposed. I only added the following javascript to push the lower part of the package out of the page after revealing it: 

$(window).scroll(function(){
    var scroll_top = $(this).scrollTop(); // get scroll position top
    var height_element_parent =  $("#parent-div").outerHeight()-130; //get high parent element
    var height_element = $(".lower-box").height(); //get high of element
    var position_fixed_max = height_element_parent - height_element; // get the maximum position of the element
    var position_fixed = scroll_top < 0 ? 0 - scroll_top : position_fixed_max > scroll_top ? 0 : position_fixed_max - scroll_top;
    $(".lower-box").css("top",position_fixed);
});

Thanks again to the two of you for your help!

Zhihao Wang
Zhihao Wang
9,687 Points

Glad you could arrive at a solution!

I wish you the best as you further develop your company's website!