Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1044272

    Hi, I am trying to set up a One Pager that hat endless scrolling. The aim is to have all content on the first page (home) in the style of “scrollytelling” which is a journalistic way of telling storys online.
    But it seems there is a limit to content on this page. After having put in a good amount of elements, it suddenly stops down the page and eliminates after a certain point content.
    Do I have to give up my plan of endless scrolling? Or do you have an idea how to manage my project?
    Thanks for your support.

    #1044281

    There should be no limit in page content. (theoretically … at some point the browser or server may time out)
    I suspect you inserted open HTML-tags (by copying or by mistake) into your text-elements. That could cause the observed result.

    You should closely examine the contents where it breaks the site. Maybe copy the text without formatting into an external text editor (not MS Word or similar, just plain text like in Windows Notepad), delete the element and create a new one with the unformatted text without any HTML-tags.

    • This reply was modified 5 years, 10 months ago by cg.
    #1044309

    well i guess he means something like this: http://www.nytimes.com/projects/2012/snow-fall/index.html#/?part=tunnel-creek
    which shows different backgrounds or images depending on the scrolling position. These graphic elements then underline the content of the written word.

    In this case you should get familiar with the Greensock Javascript – which is in a small part included in advanced Layerslider Plugin.
    https://oceanschool.nfb.ca/
    you can see here some examples: https://greensock.com/examples-showcases
    but to implement that into a wordpress page will be hard work i guess.

    #1044332

    Hey Guenni007, you found perfect examples of scrollytelling. But my project is not as ambitious.
    I will try to work more with the layerslider. But for the moment I struggle with getting back a revision before the problem started. it ist just not popping up.
    I assume it was the html tag I put in the captionsection of an image, to get a break in a long text. This at least is the only html-tag I remember I put in.
    It will take some time to check the solution cg suggested. Thanks.
    And, by the way, I am female.

    #1044359

    Yes now i see your Nick – which could be definitly a good hint for that

    #1045960

    well Enfold includes for some animation allready the waypoint function. On some cases this will be a good thing to control animation on scroll position dependencies.
    f.e. : you can see on this page that some h3 headings gets red font when scrolling down – scrolling up will make them again black.
    On scrolling down some p-tags content is getting red: https://webers-testseite.de/datenschutzerklaerung/

    On this page the images ( sorry for the quick and dirty way – the resolution is bad on growing up) are sized to 100% container width.:
    https://webers-testseite.de/ostler/beispiel-seite/

    the last page is with this code to guide you in that direction i think you can do some similar effects on scrolling down:

    add_action('wp_footer', 'scroll_up_down_change', 9999);
    function scroll_up_down_change() {
    ?>
    <script>
    (function($) {
        var element_to_animate = $('img.grow');
            element_to_animate.waypoint(function(direction) {
               if (direction === 'down') { $(this.element).css({
    			'max-width': '100vw',
                'width': '100%',
    			'transition': 'width 1s',
                });
             }
            }, { offset: '20%'});   
        element_to_animate.waypoint(function(direction) {
               if (direction === 'up') { $(this.element).css({
    			'max-width': '100vw',
                'width': '100px',
    			'transition': 'width 1s',
                });}
            }, {offset: '20%'});
    })(jQuery);
    </script>
    <?php
    }

    so maybe you can look what you can do with the waypoint function to create some new stunning effects

    • This reply was modified 5 years, 10 months ago by Guenni007.
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.