CODEWITHSUNDEEP
javascriptjqueryscrollscrollmagic
Александр Котов
Александр Котов

Reputation: 99

scrollMagic - How to scroll to the right place?

There is such a thing. https://jsfiddle.net/j6u6wp7x/1/

var scene;
var controller;
$(document).ready(function() {
    parallaxAuto();
    $('.viewer__nav div').click(function(event) {
        var num = $(this).attr('data-num');
        if (num == 'sticky') {
            controller.scrollTo(scene);
        }
        var scrollPos = controller.info("scrollPos");
    });
});

function hideShow(num, block) {
  block.find("div.active").removeClass("active").animate({ opacity: 0,},300);
  block.find("div.slide"+num).addClass("active").animate({ opacity: 1,},300);
}
// init variables
function parallaxAuto() {
    var viewer       = document.querySelector('.viewer.active'),
    frame_count  = 5,
    offset_value = 500;

    // init controller
    controller = new ScrollMagic.Controller({
      globalSceneOptions: {
        triggerHook: 0,
        reverse: true
      }
    });

    // build pinned scene
    scene = new ScrollMagic.Scene({
      triggerElement: '#sticky',
      duration: (frame_count * offset_value) + 'px',
      reverse: true
    })
    .setPin('#sticky')
    //.addIndicators()
    .addTo(controller);

    // build step frame scene
    for (var i = 1, l = frame_count; i <= l; i++) {
      new ScrollMagic.Scene({
          triggerElement: '#sticky',
          offset: i * offset_value
        })
        .setClassToggle(viewer, 'frame' + i)
        //.addIndicators()
        .addTo(controller);
    }
}

Below there are 3 smaller images that create Navigation. I made it to jump to the top, but I cannot figure out how to jump to 2nd or 3rd.

var scrollPos = controller.info ( "scrollPos"); shows the current position, but I cannot imagine how to use it correctly.

Upvotes: 2

Views: 1514

Answers (1)

SamGhatak
SamGhatak

Reputation: 1493

I didn't go through the tit-bits of your code, but in similar situations we used the scrollIntoView() function of JavaScript(not jQuery).

var element = document.getElementById('id of your image');
element.scrollIntoView(false);

This much code should do the trick. Hope it helps.

EDIT :1

Hi, I updated your fiddle, I think we need to store the scenes in a array and then refer it later. I guess you were looking for something like that.

Upvotes: 4

Related Questions