Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Michael Robertson
Michael Robertson
6,160 Points

Animate a widget area or the widget icon.

Hello,

I am trying to animate the first widget area on the home page of my theme. This is located right below the test-slider area on dev.robertsonwebdesigns.com. There are three "services" areas below the slider with a rain drop at the top of each widget. The problem is that the service areas are not defined as widgets and I am having a hard time locating the file folders for the code.. I am new to using chrome dev tools(but that is another topic), so now I am lost. What I would like to do is use animate.css to animate the whole service area or at least the rain drops for each area.

Any help would be greatly appreciated!

4 Answers

Andreas Anastasiades
Andreas Anastasiades
2,916 Points
Andreas Anastasiades
Andreas Anastasiades
2,916 Points

I see,

You'll need to take the part

<i class="icon-facebook animated bounceInDown"></i>

add animated and bounceInDown to it.

Unfortunately I'm guessing it's part of a plugin that generates the icons with fontawesome? So I don't think you'll be able to edit it, unless you go in the plugin itself and change the code there.

Note that when you update your plugin, your changes will be gone.

What you can try, not sure if this will work, add the class with js / jquery

$(function() {
  $('.iconcircle i').addClass('animated bounceInDown');
});

This should give all i elements in .iconcircle these classes, so the 3 blocks.

Try it this way and let me know.

Michael Robertson
Michael Robertson
6,160 Points

Thanks Andeas,

Would I put that into the functions.php folder?

Thanks for your help!

Andreas Anastasiades
Andreas Anastasiades
2,916 Points
Andreas Anastasiades
Andreas Anastasiades
2,916 Points

Michael,

No it's not a WP function

Try and go to Appearance > Editor

There select your header.php file

In the <head> </head> tags try adding

<script>
$(function() {
  $('.iconcircle i').addClass('animated bounceInDown');
});
</script>

and check if it works :)

If you already have a .js file with scripts you use, just add this to it

$(function() {
  $('.iconcircle i').addClass('animated bounceInDown');
});

PS you seem to have lost your connection to the fontawesome font, might want to check this :)

Brandon Mowat
Brandon Mowat
8,186 Points
Brandon Mowat
Brandon Mowat
8,186 Points

I suggest you read the README.md docs for animate.css. That will help you a lot. https://github.com/daneden/animate.css/blob/master/README.md

When you say "animate", it's pretty vague. Can you be a little more specific as to what you're trying to do?

Michael Robertson
Michael Robertson
6,160 Points

Thanks Brandon,

By animate I would like to have each individual service area icon drop into the page upon scroll. The animate.css is bounceInDown, I am aware of which animate.css class to use, but I can't find where to put it. The theme has 17+ different layouts and I can't seem to locate the correct folders to place the animate.css into.

Thanks for your interest in the topic!

Andreas Anastasiades
Andreas Anastasiades
2,916 Points
Andreas Anastasiades
Andreas Anastasiades
2,916 Points

Hi Michael,

What exactly is the problem? Just the position where to place the animate.css file?

To make it easy for testing, just copy the content of the animate.css file on the bottom of your style.css, located through the backend at appearance > editor

Try pasting it there and see if you can get the animation you want in working order.

Michael Robertson
Michael Robertson
6,160 Points

OK I guess I am confusing this a bit. I have the animate.css file already uploaded and in use on various parts of the site. I want to animate the service area icons but i don't know where to put the code. I have used dev tools but cannot decipher where to insert the bounceInDown class to achieve the desired results.

I have found the icon ids, but not there location within the website. So where to place the class "animate bounceInDown" to animate the service area icons is my question! Thanks for you help, I know I am confusing..

Michael Robertson
Michael Robertson
6,160 Points
Michael Robertson
Michael Robertson
6,160 Points

Thanks Andres,

That unfortunately did not work. I inserted the code above the </head> tag. Thanks for pointing out the origins of the icons. They are located directly on the theme developers website. So I am not sure if this is even possible..