css transition effect - Support | Kriesi.at

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
March 12, 2015 at 5:14 pm #410589

toctoc123
Participant

hello
Could you let me know how to make a css transition effect : fade from bottom
for box with icon on avia system
the same as the one usable for images !

Thank you for your help
Rgds

March 12, 2015 at 8:02 pm #410694

Elliott
Inactive Moderator

Hi toctoc123!

Are you trying to add a loading animation for the icon box shortcode? Go ahead and send us a link to your page so we can get a better idea.

Best regards,
Elliott

March 12, 2015 at 8:35 pm #410714

toctoc123
Participant

This reply has been marked as private.

March 13, 2015 at 11:10 am #410904

toctoc123
Participant

This reply has been marked as private.

March 13, 2015 at 9:01 pm #411291

Elliott
Inactive Moderator

Hey!

I got past the htaccess block but the screenshot is giving me a 404.

Your link does not appear to have any icon boxes inside it. Are you talking about the “Share this” box?

Cheers!
Elliott

March 13, 2015 at 9:06 pm #411294

toctoc123
Participant

This reply has been marked as private.

March 16, 2015 at 5:06 am #411858
Ismael
Moderator
Hey!

You can place the iconboxes inside a color section. Add a unique id attribute in the Section ID field. Use “custom-section” for example. Add something like this in the Quick CSS field:
```
#top #custom-section .iconbox {
-webkit-animation: avia-icon-btt 0.8s 1 ease;
  animation: avia-icon-btt 0.8s 1 ease;
  opacity: 1;
}
  
 @-webkit-keyframes avia-icon-btt {
  0%   { -webkit-transform:translate(0,300%); opacity: 0;  }
  100% { -webkit-transform:translate(0,0); opacity: 1; }
}
```
Regards,
Ismael
March 16, 2015 at 11:12 am #412021

toctoc123
Participant

Many thank for your help I copy and past the code, but the effect doesn’t work on the scroll .
It works when I refresh the page on the inconbox.

Rgds

March 16, 2015 at 11:13 am #412022

toctoc123
Participant

This reply has been marked as private.

March 16, 2015 at 4:36 pm #412269

Andy
Inactive Moderator

Hey!

can you please provide us admin access so we can take a deeper look into it? you can post login details here as private reply.

Best regards,
Andy

March 16, 2015 at 4:41 pm #412274

toctoc123
Participant

This reply has been marked as private.

March 19, 2015 at 6:44 pm #414731
Yigit
Keymaster
Hi!

Please review your website now. I have added following code to Functions.php file
```
function custom_iconboxes(){
?>
<script>
jQuery(window).scroll(function(){
    jQuery('.custom-box').each( function(i){
        var bottom_of_object = jQuery(this).offset().top + jQuery(this).outerHeight();
        var bottom_of_window = jQuery(window).scrollTop() + jQuery(window).height();
        if( bottom_of_window > bottom_of_object ){
            jQuery(this).addClass('custom-iconbox');
        }
    }); 
});
</script>
<?php
}
add_action('wp_footer', 'custom_iconboxes');
```
and change the code in Quick CSS field to following one
```
.custom-box { opacity: 0; }

.custom-iconbox {
-webkit-animation: avia-btt 2s 1 cubic-bezier(0.165, 0.840, 0.440, 1.000);
-moz-animation:    avia-btt 2s 1 cubic-bezier(0.165, 0.840, 0.440, 1.000); 
animation:         avia-btt 2s 1 cubic-bezier(0.165, 0.840, 0.440, 1.000); 
opacity: 1 !important;
}
```
Regards,
Yigit
March 19, 2015 at 9:44 pm #414860

toctoc123
Participant

Many Thank for your help Yigit … it works perfect
Great service

March 20, 2015 at 1:18 am #414938

Yigit
Keymaster

Hi!

You are welcome, glad we could help :)
For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

Regards,
Yigit
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘css transition effect’ is closed to new replies.