Using Animate.css in C5.6
Permalink 1 user found helpful
I am doing a site and am trying to implement the Animate.css script into the site. (http://daneden.github.io/animate.css/... ) NOTE: I am using Concrete 5.6
I just thought I could add the animate.css file to the theme's root folder and then pull onto the page using the header link:
Then, by rights, shouldn't it show the animation if I add the class to a given block using block>design>css > css class name
I tried that but it is not working... I guess maybe I did not place the animate.css in the right spot? Anyone know how to do this? Do i need more files than just the animate.css.....
Again, the script I am trying to use is:http://daneden.github.io/animate.css/...
THANKS!!
I just thought I could add the animate.css file to the theme's root folder and then pull onto the page using the header link:
<link rel="stylesheet" href="animate.min.css">
Then, by rights, shouldn't it show the animation if I add the class to a given block using block>design>css > css class name
I tried that but it is not working... I guess maybe I did not place the animate.css in the right spot? Anyone know how to do this? Do i need more files than just the animate.css.....
Again, the script I am trying to use is:http://daneden.github.io/animate.css/...
THANKS!!
I've done some playing with animate.css in 5.6. It can depend on what animation and where on the page it renders. Simply applying the class means the animation happens when the page renders, whether the viewer is looking at that element at the time or not. I will pm you a working starter package in hopes it helps you.
Awesome @enlil, thanks for sharing your block, it worked like a charm... after getting rid of the "." between classes as @Steevb said, it fixed my issue, but adding your block enabled the user to actually see the animation as they scrolled rather than on page load!
To apply the animation you need two classes. Click 'Design', then click the 'CSS' tab, then add the desired animaton. i.e. 'animated shake', DO NOT add the dots, just type the word/effect you want after 'animated'.
Thanks @Steevb That was my problem. I was putting the 'dot' between both classes. I appreciate the fix, and also @enlil's block fixed my other problem which was making the animation appear as the user scrolled onto it.
For future reference, I have actually have found a better solution to use the Animate.css library and it only shows as a user scrolls down the page. I am super excited. It uses the script wow.js found here:http://mynameismatthieu.com/WOW/index.html...
First step is to install the WOW folder (file attached) at the the theme root at /packages/your_theme/themes/theme_name/wow
From there you can call everything onto the page by placing the following code in the header (via dashboard>systems and settings >tracking codes):
This code calls both the js and the css necessary
From there, all one has to do is add class names to individual blocks by using the class option under "design"
each class name should have "wow" as the first word... for example
This method also allows for all the customization options animate.css allows... see the wow documentation at:http://mynameismatthieu.com/WOW/docs.html...
Hope this helps someone out!
First step is to install the WOW folder (file attached) at the the theme root at /packages/your_theme/themes/theme_name/wow
From there you can call everything onto the page by placing the following code in the header (via dashboard>systems and settings >tracking codes):
<link rel="stylesheet" href="/packages/your_theme/themes/theme_name/wow/css/animate.css"> <script src="/packages/your_theme/themes/theme_name/wow/js/wow.min.js"></script> <script> new WOW().init(); </script>
This code calls both the js and the css necessary
From there, all one has to do is add class names to individual blocks by using the class option under "design"
each class name should have "wow" as the first word... for example
wow fadeIn
This method also allows for all the customization options animate.css allows... see the wow documentation at:http://mynameismatthieu.com/WOW/docs.html...
Hope this helps someone out!
Nice. Thanks. Will certainly be having a look.
Okay, looks great, however animations only work one way with CSS and no backup!
Once seen, never seen again?
Try playing with: http://lwiesel.github.io/jquery-fadethis/...
Once seen, never seen again?
Try playing with: http://lwiesel.github.io/jquery-fadethis/...
