Add animations to certain areas?

whitts

Hello,

Is there anyway to add animations to certain areas of the site?

Like if i add the css file from https://daneden.github.io/animate.css/ to the custom header file could i then add some animations to the custom css section?

I basically want to see what it looks like to have topics slide in or fade in one by one, same for posts. Can the css that adds the topics / post be overridden (in the custom css section without altering the them)?

Im using the default persona theme

Thanks,

pichalite

@whitts you should be able to do it using custom css section

whitts

@pichalite

Thanks.. Do you happen to know what css is needed to override the persona theme to animate the loading of topics / posts (or even the loading of categories)- I am pretty useless at css. Im not sure if i even want to do it since too much animation is worse than none but thought it might give the forum some energy.

Thanks

pichalite

@whitts you probably need to add some javascript too to detect scroll and apply fadein effects. Not sure how well it's going to work with infinite scroll.

pichalite

@whitts here's a quick hack... the script probably needs to be modified to work better or optimized

add this in the custom css section

[component="category/topic"] { opacity: 0; }

add this in the custom header section

<script type="text/javascript">
$(function() {
    
    fadeIn();
    
    $(window).scroll( function(){
    
       fadeIn();
        
    });
    
    function fadeIn() {
        
        $('[component="category/topic"]').each( function(i){
            
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            
            bottom_of_window = bottom_of_window + 10;  
          
            if( bottom_of_window > bottom_of_object ){
                
                $(this).animate({'opacity':'1'},500);
                    
            }
        }); 
    }
});
</script>

whitts

@pichalite

Thanks for this, it works if you hit refresh on the browser for each route you visit, but it doesnt if you just navigate via clicking the categories etc.. The opacity of the topics remains at zero until you hit refresh.. After that the topics will nicely fade in as they come into view.

EDIT:

Guess i need to do something like this:

$(window).hashchange( function(){

   fadeIn();
    
});

This works but errors when the back button is pressed

pichalite

@whitts this should work without need for refresh

<script type="text/javascript">
$(function() {
    $(window).on('action:ajaxify.end', function(ev, data) {
        fadeIn();
        
        $(window).scroll( function(){
        
           fadeIn();
            
        
        });
        
        function fadeIn() {
            
            $('[component="category/topic"]').each( function(i){
                
                var bottom_of_object = $(this).position().top + $(this).outerHeight();
                var bottom_of_window = $(window).scrollTop() + $(window).height();
                
                /* Adjust the "200" to either have a delay or that the content starts fading a bit before you reach it  */
                bottom_of_window = bottom_of_window + 10;  
              
                if( bottom_of_window > bottom_of_object ){
                    
                    $(this).animate({'opacity':'1'},500);
                        
                }
            }); 
        }
    });
});
</script>

Arc

(Alternatively, scripts placed in a footer widget will always load without issue or refresh, since they'll be run every page load)

whitts

Thanks @pichalite it works great. @ARC also a good idea.. I will remember that for future addons..

I replaced your fadein animation with one from animate.css (FadeInBottom) which slides the rows up and fades in at the same time which looks great when scrolling normally but looks a bit crazy when you page jump (since they all slide up at the same time causing the scrollbar to go a bit crazy ) so i set it back to the one you added. I will experiment with it to see if the users like it or not.. Thanks for your help.