JavaScript: create a button that dynamically changes size and color when scrolling

Question

JavaScript: create a button that dynamically changes size and color when scrolling

I have a pulsing button (#scrollarrow) at the bottom of my website that disappears as I start scrolling. The jQuery code responsible for this effect is as follows:

$(document).ready(function(){

$(window).scroll(function(){              
        if ($(this).scrollTop() > 50) {
            $('#scrollarrow').fadeOut('slow');
        }else{
            $('#scrollarrow').fadeIn('slow');
        } 
    }); 
});

Everything works fine up to this point. However, when I try to add a pulse effect (a simple change of opacity), things get tricky:

function pulse(){
    $('#scrollarrow').delay(200).fadeOut('slow').delay(50).fadeIn('slow',pulse);
}

The problem arises when trying to integrate this function into the existing code. The result I achieve is seeing the button pulse after scrolling, which is the opposite of what I intended. Despite attempting various combinations, none seem to provide the desired outcome.

If anyone has any suggestions or solutions, please share them with me. Thank you!

javascript jquery html css

Answer 1

Answer №1

If you're looking to make the arrow pulse before the user starts scrolling, you can achieve it by following this approach: http://jsfiddle.net/P99Ey/28/

$(document).ready(function(){
    // Function to animate the button and repeat itself after completion
    function pulse() {
        if ($(window).scrollTop() <= 50) {
            $('#scrollarrow').delay(200).fadeOut('slow').delay(50).fadeIn('slow', pulse);
        }
    }

    pulse();

    $(window).scroll(function(){              
        if ($(this).scrollTop() > 50) {
            $('#scrollarrow').clearQueue();
            $('#scrollarrow').fadeOut("slow");
        } else{
            pulse();
        } 
    }); 
});

Answer 2

If you're looking to make the arrow pulse before the user starts scrolling, you can achieve it by following this approach: http://jsfiddle.net/P99Ey/28/

$(document).ready(function(){
    // Function to animate the button and repeat itself after completion
    function pulse() {
        if ($(window).scrollTop() <= 50) {
            $('#scrollarrow').delay(200).fadeOut('slow').delay(50).fadeIn('slow', pulse);
        }
    }

    pulse();

    $(window).scroll(function(){              
        if ($(this).scrollTop() > 50) {
            $('#scrollarrow').clearQueue();
            $('#scrollarrow').fadeOut("slow");
        } else{
            pulse();
        } 
    }); 
});

Answer 3

Answer №2

If you're interested, take a look at CSS3 Animations. This allows you to create keyframes for pulsing buttons without needing JavaScript. Although browser support might not be as extensive with CSS3, there are performance advantages in letting the browser handle animations. Additionally, CSS3 animations will work even when JavaScript is disabled.

Answer 4

If you're interested, take a look at CSS3 Animations. This allows you to create keyframes for pulsing buttons without needing JavaScript. Although browser support might not be as extensive with CSS3, there are performance advantages in letting the browser handle animations. Additionally, CSS3 animations will work even when JavaScript is disabled.

Answer 5

Answer №3

Here is a helpful solution for you:

HTML Code

<div id="scrollarrow">Test</div>

CSS Styling

#scrollarrow
{
    position:fixed;
}

JQuery Implementation

$(function () {
    function trigger_animation($element, delay, duration) {
        $element.delay(delay).fadeToggle(duration, function () {
            trigger_animation($element, delay, duration);
        });
    }
    trigger_animation($('#scrollarrow'), 100, 50);
});

 $(window).scroll(function(){              
        if ($(this).scrollTop() > 50) {
            $('#scrollarrow').fadeOut('slow');
        }else{
            $('#scrollarrow').fadeIn('slow');
            // This code snippet will restart the animation when the user scrolls back to the top of the page
            pulse();
        } 
    });

Demo Link: Check out the live demo here!

Answer 6

Here is a helpful solution for you:

HTML Code

<div id="scrollarrow">Test</div>

CSS Styling

#scrollarrow
{
    position:fixed;
}

JQuery Implementation

$(function () {
    function trigger_animation($element, delay, duration) {
        $element.delay(delay).fadeToggle(duration, function () {
            trigger_animation($element, delay, duration);
        });
    }
    trigger_animation($('#scrollarrow'), 100, 50);
});

 $(window).scroll(function(){              
        if ($(this).scrollTop() > 50) {
            $('#scrollarrow').fadeOut('slow');
        }else{
            $('#scrollarrow').fadeIn('slow');
            // This code snippet will restart the animation when the user scrolls back to the top of the page
            pulse();
        } 
    });

Demo Link: Check out the live demo here!

JavaScript: create a button that dynamically changes size and color when scrolling

Answer №1

Answer №2

Answer №3

Similar questions

How can TailwindCSS be used to wrap a nested flexbox at a specific viewport?

"Utilize the parent component's functionality by extending/inheriting it

Instagram API: Retrieving a list of recently tagged media only displays content that belongs to me

A guide on adding specific rows together in a list

Attempting to extract only the text content from a specific div using XPath

AngularJS $http.post() response function not executing in the correct sequence

Issue with text input field causing the Enter key to not create a new line

Create a string that has been properly formatted

Using jQuery to separate a JSON array that has been retrieved from PHP

Leverage ng-value attribute when working with radio buttons in AngularJS

"Exploring the Mini Drawer feature on Material UI brings up a whole new page for the Link

Determine the mean values to showcase at the center of a D3 donut graph

What causes let to lose significance within the context of React development?

Adjust the size of an image within a container in real-time with jQuery

Is there a way I can retrieve a cookie stored in an Express middleware even if the req.cookies object is returning empty?

`Locating an image alongside text for seamless integration`

React Application Issue 'Error: React is not defined'

What is the method for transforming an array object into an object?

jQuery removes HTML tags from XML documents

The characteristics of angular js Service/Factory and how they influence functionality