-
AuthorPosts
-
December 12, 2018 at 12:06 pm #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.December 12, 2018 at 12:44 pm #1044281There 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, 11 months ago by cg.
December 12, 2018 at 1:20 pm #1044309well 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.December 12, 2018 at 1:57 pm #1044332Hey 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.December 12, 2018 at 3:06 pm #1044359Yes now i see your Nick – which could be definitly a good hint for that
December 16, 2018 at 4:36 pm #1045960well 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, 11 months ago by Guenni007.
-
AuthorPosts
- You must be logged in to reply to this topic.