Create an image that repeats vertically with endless scrolling

Question

Create an image that repeats vertically with endless scrolling

Is it possible to create a never-ending vertical image scrolling effect as the user scrolls down?

I am aware of how to repeat an image horizontally or vertically, however, I want the image to continuously repeat as the user continues to scroll down the page.

If possible, I would like to achieve this using CSS or HTML.

Here is what I have so far, but I need help figuring out how to make the div infinitely carry on:

CSS:

.slide {
    width:30px;
    height:1000px;
    background-image:url(http://paulbourke.net/fractals/noise/noise2d.gif);
    background-repeat:repeat-y;
    margin:0 auto;
}

HTML:

<div class="slide"></div>

Fiddle

html css image repeat

Answer 1

Answer №1

While creating HTML elements with infinite height may not be feasible, one workaround is to utilize javascript to enlarge an element when a user reaches the bottom of the page.

Answer 2

While creating HTML elements with infinite height may not be feasible, one workaround is to utilize javascript to enlarge an element when a user reaches the bottom of the page.

Answer 3

Answer №2

Using just HTML, achieving infinite scrolling is theoretically impossible. You can either set an absolute height and min/max height values or use "auto" to adjust the box height based on content size.

To simulate infinite scrolling, one could set an extremely high absolute height like 100000px; but this would negatively impact browser performance.

Implementing Ajax to respond when the scrollbar reaches the bottom and appending hidden content can create the illusion of infinite scrolling.

A possible implementation:

$(window).scroll(function () {
    //- 10 = desired pixel distance from the bottom of the page while scrolling)
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        var box = $("#myBoxId");
        //Just append some content here
        box.html(box.html() + "<br /><br /><br /><br /><br /><br /><br />");
    }
});

This method allows for expanding content as the user scrolls, possibly loading additional content using Ajax.

An image set to repeat-y will also expand with this effect.

Answer 4

Using just HTML, achieving infinite scrolling is theoretically impossible. You can either set an absolute height and min/max height values or use "auto" to adjust the box height based on content size.

To simulate infinite scrolling, one could set an extremely high absolute height like 100000px; but this would negatively impact browser performance.

Implementing Ajax to respond when the scrollbar reaches the bottom and appending hidden content can create the illusion of infinite scrolling.

A possible implementation:

$(window).scroll(function () {
    //- 10 = desired pixel distance from the bottom of the page while scrolling)
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        var box = $("#myBoxId");
        //Just append some content here
        box.html(box.html() + "<br /><br /><br /><br /><br /><br /><br />");
    }
});

This method allows for expanding content as the user scrolls, possibly loading additional content using Ajax.

An image set to repeat-y will also expand with this effect.

Create an image that repeats vertically with endless scrolling

Answer №1

Answer №2

Similar questions

What is the process for implementing custom CSS styles in Cognos?

What is the process for terminating a prototype ajax request?

Organize information before making a choice in the dropdown menu

Chrome is experiencing a rendering problem as a result of using @Font-Face

How to display HTML string in iOS using Swift without using UIWebView

Why is the col-1 in Bootstrap stacking up instead of flowing horizontally as intended?

Achieving navigation bar functionality in Bootstrap using jQuery

Create spacing on the right side of a div with Bootstrap 4 offset, instead of the typical left side offset

Trouble with z-index property within the confines of the <ion-segment-button></ion-segment-button> tag

angularjs reset file input form

Absolute positioning of a div relative to its immediate parent element

What is the best way to integrate HTML code within a JavaScript function?

What is the best way to incorporate annotations onto a website without impacting the overall design and layout?

Creating a unique Web Component that spans the full height of the page

Words existing outside of an element

Experiencing data loss while utilizing BeautifulSoup

JavaScript code that triggers when a checkbox is not selected

What is the best way to incorporate an options tabbed menu into a mega drop-down menu?

How can you hide specific elements in HTML/CSS based on window size without relying on media queries?

The newly implemented "secret bottom section" is causing some content to overlap at the bottom of the page