Breaking News: Grepper is joining You.com. Read the official announcement!

2 column parallax scrolling html

Anthony Cornell answered on October 18, 2022 Popularity 2/10 Helpfulness 1/10

answer 2 column parallax scrolling html

2 column parallax scrolling html

Comment

$(window).on("load resize scroll",function(e){
var col1 = $("#left").outerHeight();
var col2 = $("#right").outerHeight();
var travel = col1 - col2;

var topOfColumns = $('.parallax').offset().top;
var columns = $('.parallax').outerHeight() - $(window).innerHeight();
var scrollInterval = columns / travel;

    var e = Math.round( ($(window).scrollTop() - topOfColumns ) / scrollInterval);
    //find the bottom of the right column and give a Bool (true)
    var b = $(window).scrollTop() >= $('#right').offset().top + $('#right').outerHeight() - window.innerHeight;

    //if the user scrolls to the top of the columns and the user has not scrolled to the bottom of the right column
    if ($(window).scrollTop() >= topOfColumns && b == false ) {
        $("#right").css({
            "-webkit-transform": "translate3d(0px, " + e + "px, 0px)",
               "-moz-transform": "translate3d(0px, " + e + "px, 0px)",
                "-ms-transform": "translate3d(0px, " + e + "px, 0px)",
                 "-o-transform": "translate3d(0px, " + e + "px, 0px)",
                      transform: "translate3d(0px, " + e + "px, 0px)"
        });
    }
});

Popularity 2/10 Helpfulness 1/10 Language html

Source: stackoverflow.com

Tags: html parallax

Link to this answer
Share Copy Link