CODEWITHSUNDEEP
jqueryvariables
Vlad
Vlad

Reputation: 11

Changing variable gradually

I am making a project where while scrolling, the background of the image changes depending on a scrolled distance. Everything works fine, but there is a small problem with browsers that do not have a native smooth scrolling, because the picture changes too fast and skips too many frames. I had an idea about implementing a smooth scroll with jQuery, but that will hinder the performance too much, and many do not like the effect.

So i thought, if there is a way, to change the value of the variable gradually? For example if the value is 891 and suddenly changes to 1072, first it will go through all the numbers between them?

Thanks in advance.

my current code, everything works, just need to figure out a way to change correntPos/rotPos gradually

// reel on scroll and mouse move

        var rotPos          = 0, // actual coordinates of the image sprite
            scrollAmount1   = 0, // mouse triggered rotation frame counter
            scrollAmount2   = 0, // scroll triggered rotation frame counter
            currentPos      = 0; // total rotation frames counter

        $('#reel').bind('touchmove',function(e){ // touch devices fix
            var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
            var elm = $(this).offset();
            var x = touch.pageX - elm.left;
            if(x < $(this).width() && x > 0){
                relativeX = touch.pageX;
                scrollAmount1       = Math.round( relativeX / 35 ); // get the needed frame depending on amount of mouse movement
                currentPos          = scrollAmount1 + scrollAmount2; // set current frame
                rotPos              = currentPos * 687; // calculate position depending on frame

                $('.reel').css('background-position', '0px ' + '-' + rotPos + 'px' );
            }
        });

        $('#reel').on('mousemove', function(e) {

            relativeX           = e.pageX; // calculate mouse distance from left
            scrollAmount1       = Math.round( relativeX / 35 ); // get the needed frame depending on amount of mouse movement
            currentPos          = scrollAmount1 + scrollAmount2; // set current frame
            rotPos              = currentPos * 687; // calculate position depending on frame

            $('.reel').css('background-position', '0px ' + '-' + rotPos + 'px' );

        });

        $(window).on('scroll', function(){

            var windowScrollCount   = $(window).scrollTop(); // determine amount scrolled
                scrollAmount2       = Math.round( windowScrollCount / 35); // get the needed frame depending on scroll amount
                currentPos          = scrollAmount1 + scrollAmount2; // set current frame
                rotPos              = currentPos * 687; // calculate position depending on frame

            $('.reel').css('background-position', '0px ' + '-' + rotPos + 'px' ); // write into item style

        });

Upvotes: 0

Views: 77

Answers (1)

Mostafa Talebi
Mostafa Talebi

Reputation: 9183

It seems you want to implement a feature named easing , you have to write the rule using a loop:

Code Has Been Updated

    var value = 200; // next value is 800
    var second_value = 800;
    var stepping = 10;

    if( (second_value - value) > stepping )
    {
     for(var i = value; i < (second_value); i++)
     {
        if( i % stepping == 0)
            {
                value = value + stepping;
        doOperation(value); // a custom operation which uses value
            }

      }
    }

function doOperation(value)
{
    console.log("Value is: " + value);
}

But to make it fit into your code, you should write a function which gets a min value, max value as well as an optional third parameter used as stepping_value. and then inside the function you use global variable to add STATE in your execution flow. Something roughly like this:

function getNextStepValue(value , second_value, stepping_amount)
{
        var value = 200; // next value is 800
        var second_value = 800;
        var stepping = 10;

        if(window.stepped_value == second_value)
        {
           window.stepped_value = 0;
           return false; // or any other value you like

        }

        if(!window.stepped_value)
        { 
          window.stepped_value = value;
        }

        if( (second_value - value) > stepping_amount )
        {
            window.stepped_value = window.stepped_value + stepping_amount
            return window.stepped_value;


        }
}

You can use extra conditions and flags in your function through global variables to add more flexibility. Such as a flag which if is set to true then allows the entire range of easing to be done and if false, skips easing.

Upvotes: 1

Related Questions