Forums

CSS3 Animations as custom class

Permalink
Hello,

i want to use css3 animationons like here:http://www.justinaguilar.com/animations/#... as custom classes in c5.7. How can i implement it?

And an additional question: I want that the animations are triggered at page load and scrolling to it. short: if the thing with the animaiton came to the viewfield, the animaiton should start.

Thanks
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
HI shaolinsteyr1,

Will you be using the animation and jQuery trigger on every page?

You should be able to just add the animation CSS to your theme CSS. The animation CSS selectors will need to be scoped using .ccm-page (this prevents conflicts with concrete5's CSS).

Example: animation starts based on the scroll
.ccm-page .slideExpandUpAnimation
Example: animation starts as soon as the page loads
.ccm-page .slideExpandUp

The jQuery script can be put in the body, right before the closing </body> tag in your page templates.
(as an alternative to including the script in the template files, I believe you could register the asset with providesAsset() and the asset path)

To make sure that jQuery is loaded with your pages, you will need to require the asset in your page_theme.php.

Example:
public function registerAssets() {
$this->requireAsset('javascript', 'jquery');
}

http://www.concrete5.org/documentation/developers/5.7/designing-for...

In 5.7.3, you can add custom classes to areas or blocks by typing them into the Custom Class section of the Design section.

http://www.concrete5.org/documentation/using-concrete5-7/in-page-ed...
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Here is an example using the scroll triggered slideExpandUp animation.

1. make sure jQuery is required in your page_theme.php
2. add the CSS to your theme CSS
.ccm-page {
    // Add the .slideExpandUpAnimation class to every element that you want to have a slideExpandUp animation
    // the initial state is hidden for this animation, so it appears as you scroll down
    // the jQuery script will add the .slideExpandUp class to the element based on the scroll
    // .slideExpandUp has visibility: visible !important; to override the .slideExpandUpAnimation setting of visibility: hidden;
    .slideExpandUpAnimation {
        visibility: hidden;
    }
    .slideExpandUp {
        animation-name: slideExpandUp;
        -webkit-animation-name: slideExpandUp;
        animation-duration: 1.6s;
        -webkit-animation-duration: 1.6s;
        animation-timing-function: ease-out;
        -webkit-animation-timing-function: ease -out;
Viewing 15 lines of 76 lines. View entire code block.

3. add the jQuery script to your template before the closing </body> tag
<script>
    $(window).scroll(function() {
        // the element, or elements, with the class of .slideExpandUpAnimation are targeted
        // this will target multiple elements, as long as they share the .slideExpandUpAnimation class
        $('.slideExpandUpAnimation').each(function(){
            var imagePos = $(this).offset().top;
            var topOfWindow = $(window).scrollTop();
            if (imagePos < topOfWindow+700) {
                $(this).addClass("slideExpandUp");
            }
        });
        // before this script runs, the element will have the class of .slideExpandUpAnimation
        // after the script runs, it will have .slideExpandUpAnimation and .slideExpandUp
    });
</script>

4. pick a block you want to animate and add the custom class "slideExpandUpAnimation"
Design & Custom Template> Advanced> Custom Class
shaolinsteyr1 replied on at Permalink Reply
Thank you very much, it's easier than i thought. :-)