UIkit Scroll Bounce Effect

Inspect the full details and code of a selected snippet

<header class="demo-header uk-light uk-padding uk-margin-bottom">
        <div class="uk-container">
            <h1 class="uk-heading-medium">UIkit Scroll Bounce Effect</h1>
            <p class="uk-text-lead">Scroll to the top or bottom to see the bounce effect</p>
        </div>
    </header>

<div class="uk-container uk-margin-medium-bottom">
        
        <div class="uk-alert-primary" uk-alert>
            <p>This demo shows a bounce effect when scrolling reaches the boundaries of the content. Try scrolling with your mouse, trackpad, or keyboard to see the effect.</p>
        </div>
        
        
        <div class="scroll-container uk-box-shadow-medium" id="scrollContainer">
            <div class="uk-padding">
                <div class="content-card uk-card uk-card-default uk-card-body uk-margin-bottom">
                    <h3 class="uk-card-title">Understanding Scroll Bounce</h3>
                    <p>Scroll bounce, also known as rubber banding, is a UI effect where content appears to stretch and bounce back when a user scrolls beyond the content boundaries. This creates a more natural and intuitive scrolling experience.</p>
                </div>
                
                <div class="content-card uk-card uk-card-default uk-card-body uk-margin-bottom">
                    <h3 class="uk-card-title">UIkit Integration</h3>
                    <p>This implementation combines UIkit's components with custom CSS animations to create a bounce effect that triggers when scrolling reaches the edges of the container.</p>
                </div>
                
                <div class="content-card uk-card uk-card-default uk-card-body uk-margin-bottom">
                    <h3 class="uk-card-title">User Experience Benefits</h3>
                    <p>Bounce effects provide clear visual feedback that users have reached the end of content, preventing confusion and creating a more polished, engaging interface.</p>
                </div>
                
                <div class="content-card uk-card uk-card-default uk-card-body uk-margin-bottom">
                    <h3 class="uk-card-title">Implementation Details</h3>
                    <p>The bounce effect is achieved through CSS animations triggered by JavaScript when the scroll position reaches the top or bottom of the container.</p>
                </div>
                
                <div class="content-card uk-card uk-card-default uk-card-body uk-margin-bottom">
                    <h3 class="uk-card-title">Mobile vs Desktop</h3>
                    <p>This effect is most commonly associated with mobile interfaces, but it can enhance the desktop experience as well, especially when using trackpads or mouse wheels.</p>
                </div>
                
                <div class="content-card uk-card uk-card-default uk-card-body uk-margin-bottom">
                    <h3 class="uk-card-title">Performance Considerations</h3>
                    <p>CSS-based animations are generally performant as they can leverage hardware acceleration. However, complex animations should be tested across devices.</p>
                </div>
                
                <div class="content-card uk-card uk-card-default uk-card-body uk-margin-bottom">
                    <h3 class="uk-card-title">Customization Options</h3>
                    <p>The bounce effect can be customized in terms of duration, intensity, and easing functions to match your application's design language.</p>
                </div>
                
                <div class="content-card uk-card uk-card-default uk-card-body uk-margin-bottom">
                    <h3 class="uk-card-title">Browser Compatibility</h3>
                    <p>CSS animations have excellent browser support, making this technique viable for most modern web applications.</p>
                </div>
                
                <div class="content-card uk-card uk-card-default uk-card-body uk-margin-bottom">
                    <h3 class="uk-card-title">Alternative Approaches</h3>
                    <p>For more complex interactions, JavaScript libraries can provide finer control over scroll behavior and bounce physics.</p>
                </div>
                
                <div class="content-card uk-card uk-card-default uk-card-body uk-margin-bottom">
                    <h3 class="uk-card-title">Accessibility Considerations</h3>
                    <p>When implementing scroll effects, ensure they don't interfere with user navigation or cause discomfort for users with vestibular disorders.</p>
                </div>
            </div>
        </div>
        
        
        <div class="uk-margin-medium-top">
            <div class="uk-grid-small" uk-grid>
                <div>
                    <button class="uk-button uk-button-primary" id="toggleBounce">Toggle Bounce Effect</button>
                </div>
                <div>
                    <button class="uk-button uk-button-default" id="scrollToTop">Scroll to Top</button>
                </div>
                <div>
                    <button class="uk-button uk-button-default" id="scrollToBottom">Scroll to Bottom</button>
                </div>
            </div>
        </div>
        
        
        <div class="settings-panel uk-margin-medium-top">
            <h3>Bounce Settings</h3>
            <div class="uk-grid-small" uk-grid>
                <div class="uk-width-1-3">
                    <label class="uk-form-label" for="bounceDuration">Bounce Duration (ms)</label>
                    <input class="uk-range" id="bounceDuration" type="range" value="600" min="300" max="1000" step="100">
                    <div class="uk-text-small">Current: <span id="durationValue">600</span>ms</div>
                </div>
                <div class="uk-width-1-3">
                    <label class="uk-form-label" for="bounceIntensity">Bounce Intensity</label>
                    <input class="uk-range" id="bounceIntensity" type="range" value="15" min="5" max="30" step="5">
                    <div class="uk-text-small">Current: <span id="intensityValue">15</span>px</div>
                </div>
            </div>
        </div>
    </div>
    
    
    <div class="bounce-indicator" id="bounceIndicator">
        <div class="uk-alert-success" uk-alert>
            <p>Bounce Effect Triggered!</p>
        </div>
    </div>

/* Custom bounce animations */
        @keyframes bounceTop {
            0%, 100% { transform: translateY(0); }
            25% { transform: translateY(15px); }
            50% { transform: translateY(-8px); }
            75% { transform: translateY(4px); }
        }
        
        @keyframes bounceBottom {
            0%, 100% { transform: translateY(0); }
            25% { transform: translateY(-15px); }
            50% { transform: translateY(8px); }
            75% { transform: translateY(-4px); }
        }
        
        .bounce-top {
            animation: bounceTop 0.6s ease;
        }
        
        .bounce-bottom {
            animation: bounceBottom 0.6s ease;
        }
        
        /* Custom styling */
        .scroll-container {
            height: 400px;
            overflow-y: auto;
            border: 1px solid #e5e5e5;
            border-radius: 8px;
            position: relative;
        }
        
        .bounce-indicator {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .bounce-indicator.show {
            opacity: 1;
        }
        
        .content-card {
            transition: transform 0.3s, background-color 0.3s;
        }
        
        .content-card:hover {
            transform: translateY(-5px);
            background-color: #f8f8f8;
        }
        
        .demo-header {
            background: linear-gradient(135deg, #1e87f0 0%, #0f6ecd 100%);
        }
        
        .settings-panel {
            background-color: #f8f8f8;
            border-radius: 8px;
            padding: 20px;
        }

document.addEventListener('DOMContentLoaded', function() {
  const scrollContainer = document.getElementById('scrollContainer');
  const bounceIndicator = document.getElementById('bounceIndicator');
  const toggleBounceBtn = document.getElementById('toggleBounce');
  const scrollToTopBtn = document.getElementById('scrollToTop');
  const scrollToBottomBtn = document.getElementById('scrollToBottom');
  const bounceDurationInput = document.getElementById('bounceDuration');
  const bounceIntensityInput = document.getElementById('bounceIntensity');
  const durationValue = document.getElementById('durationValue');
  const intensityValue = document.getElementById('intensityValue');

let bounceEnabled = true;
  let isAtTop = false;
  let isAtBottom = false;

// Update bounce settings display
  bounceDurationInput.addEventListener('input', function() {
    durationValue.textContent = this.value;
    updateBounceAnimation();
  });

bounceIntensityInput.addEventListener('input', function() {
    intensityValue.textContent = this.value;
    updateBounceAnimation();
  });

// Update bounce animation with new settings
  function updateBounceAnimation() {
    const duration = bounceDurationInput.value;
    const intensity = bounceIntensityInput.value;

// Remove existing styles
    const existingStyle = document.getElementById('bounceStyles');
    if (existingStyle) {
      existingStyle.remove();
    }

// Create new styles with updated values
    const style = document.createElement('style');
    style.id = 'bounceStyles';
    style.textContent = '@keyframes bounceTop { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(' + intensity + 'px); } 50% { transform: translateY(-' + (intensity/2) + 'px); } 75% { transform: translateY(' + (intensity/4) + 'px); } } @keyframes bounceBottom { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-' + intensity + 'px); } 50% { transform: translateY(' + (intensity/2) + 'px); } 75% { transform: translateY(-' + (intensity/4) + 'px); } } .bounce-top { animation: bounceTop ' + duration + 'ms ease; } .bounce-bottom { animation: bounceBottom ' + duration + 'ms ease; }';

document.head.appendChild(style);
  }

// Toggle bounce effect
  toggleBounceBtn.addEventListener('click', function() {
    bounceEnabled = !bounceEnabled;
    toggleBounceBtn.textContent = bounceEnabled ? 'Disable Bounce Effect' : 'Enable Bounce Effect';

if (bounceEnabled) {
      toggleBounceBtn.classList.remove('uk-button-default');
      toggleBounceBtn.classList.add('uk-button-primary');
    } else {
      toggleBounceBtn.classList.remove('uk-button-primary');
      toggleBounceBtn.classList.add('uk-button-default');
    }
  });

// Scroll to top
  scrollToTopBtn.addEventListener('click', function() {
    scrollContainer.scrollTop = 0;
  });

// Scroll to bottom
  scrollToBottomBtn.addEventListener('click', function() {
    scrollContainer.scrollTop = scrollContainer.scrollHeight;
  });

// Handle scroll events
  scrollContainer.addEventListener('scroll', function() {
    if (!bounceEnabled) return;

// Check if at top
    if (scrollContainer.scrollTop === 0 && !isAtTop) {
      isAtTop = true;
      scrollContainer.classList.add('bounce-top');
      showBounceIndicator();

setTimeout(function() {
        scrollContainer.classList.remove('bounce-top');
        isAtTop = false;
      }, parseInt(bounceDurationInput.value));
    }

// Check if at bottom
    const bottomThreshold = scrollContainer.scrollHeight - scrollContainer.clientHeight - 1;
    if (scrollContainer.scrollTop >= bottomThreshold && !isAtBottom) {
      isAtBottom = true;
      scrollContainer.classList.add('bounce-bottom');
      showBounceIndicator();

setTimeout(function() {
        scrollContainer.classList.remove('bounce-bottom');
        isAtBottom = false;
      }, parseInt(bounceDurationInput.value));
    }
  });

// Show bounce indicator
  function showBounceIndicator() {
    bounceIndicator.classList.add('show');
    setTimeout(function() {
      bounceIndicator.classList.remove('show');
    }, 1500);
  }

// Add keyboard support
  document.addEventListener('keydown', function(e) {
    if (!bounceEnabled) return;

if (e.key === 'ArrowUp' && scrollContainer.scrollTop === 0) {
      scrollContainer.classList.add('bounce-top');
      showBounceIndicator();
      setTimeout(function() {
        scrollContainer.classList.remove('bounce-top');
      }, parseInt(bounceDurationInput.value));
    }

if (e.key === 'ArrowDown') {
      const bottomThreshold = scrollContainer.scrollHeight - scrollContainer.clientHeight - 1;
      if (scrollContainer.scrollTop >= bottomThreshold) {
        scrollContainer.classList.add('bounce-bottom');
        showBounceIndicator();
        setTimeout(function() {
          scrollContainer.classList.remove('bounce-bottom');
        }, parseInt(bounceDurationInput.value));
      }
    }
  });

// Initialize bounce animations
  updateBounceAnimation();
});

Information

Detailed overview of a selected code snippet

yaneony

04.11.2025, 16:08:04

04.11.2025, 16:58:07

uk-alert, uk-box, uk-button, uk-card, uk-container, uk-form, uk-grid, uk-heading, uk-light, uk-margin, uk-padding, uk-range, uk-text, uk-width

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!