CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2099810
user2099810

Reputation: 381

Firing an animation when aligned

I am creating a splitscrolling website and it's working great. But i have one problem, when the user stops scrolling it fires a function called alignWhenIdle and what this does is align the columns so they become "one".

Now that is working nicely but i can't seem to target a specific part of the column that aligns. let's say when the number 2 column aligns ( see image ) i want to be able to fire an animation. I tried using a callback but that fires a function every time the columns are aligned.

enter image description here

This is my JS:

(function ($) {
var top = 0;
var contentHeight, contents, totalHeight;
var locked = false;
var timeout;

var align = function () {
    var pos = (top + $(window).scrollTop());
    var snapUp = 0 - (pos % contentHeight) < (contentHeight / 2);
    var multiplier = snapUp
        ? Math.ceil(pos / contentHeight)
        : Math.floor(pos / contentHeight);
    var newTop = contentHeight * multiplier;
    $('html, body').animate({ scrollTop: newTop + totalHeight }, 200);
    locked = false;
};

var reset = function () {
    contentHeight = $('.right').height();
    contents = $('.right > .content').length;
    totalHeight = contentHeight * (contents - 1);
    top = (0 - totalHeight);
};

var scrollRight = function () {
    $('.right').css('top', (top + $(window).scrollTop()) + 'px');
};

var alignWhenIdle = function (delay) {
    clearTimeout(timeout);
    timeout = setTimeout(align, delay);
};

$(document).on('ready', function () {
    reset();
    scrollRight();
});

$(window).on('scroll', function () {
    locked = true;
    scrollRight();
});

$(window).on('mouseup', function (e) {
    if (locked) {
        align();
    }
});

$(window).resize(function () {
    locked = true;
    reset();
    scrollRight();
    alignWhenIdle(300);
});

$(window).on('mousewheel', function (e) {
    alignWhenIdle(300);
});

$(window).on("keyup", function (e) {
     alignWhenIdle(300);
});

})(jQuery);

http://jsfiddle.net/ev3B8/

Any help is much appreciated,

Cheers

Upvotes: 0

Views: 49

Answers (2)

smnbbrv
smnbbrv

Reputation: 24561

See http://jsfiddle.net/5T9Y8/

Scroll till the column 2 and see result...

In the method align I've added a callback:

$('html, body').animate({ scrollTop: newTop + totalHeight }, 200, function(){
  $(".animate").animate({ marginLeft: "200px" },300);
});

Works well, did you need exactly that?

EDIT

You should just check for some condition.

E.g. based on this solution Check if element is visible after scrolling you can build this:

$('html, body').animate({ scrollTop: newTop + totalHeight }, 200, function(){
  if (isScrolledIntoView(".animate")) $(".animate").animate({ marginLeft: "200px" },300);
});

See updated solution here http://jsfiddle.net/5T9Y8/1/

This is only one way, I'm really sure there is a way to do it even better. E.g. you can calculate the current elements which are shown and then just find the things only inside of them.

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

I tried using a callback but that fires a function every time the columns are aligned.

Use one method for functioning only once instead of on.

Upvotes: 0

Related Questions