css3 animation in theme's header

kerin2014 · Member · Oct 9, 2014 at 2:31 pm
Copy link

Add topic to favorites
using fontfolio theme and have css upgrage

i created already a lite grey background in my masthead area

now i want to do some cool css3 style animation in that grey panel that you now see

i studied this example code css3 animation example code

the question is, how do i create a div in the background area of my masthead ?

i inspected the background element using firebug and it seems to be in the body of the theme’s HTML code

so this might be okay, yes, but how exactly do i do it?

a hint would be most appreciated!

The blog I need help with is: (visible only to logged in users)
hallluke · Member · Oct 9, 2014 at 2:54 pm
Copy link
Any CSS animation you use will apply to an HTML element already on your site, at the moment if you wanted to animate your grey rectangle you’d have to apply it to the entire header section.

The CSS upgrade won’t let you create a div element in your theme, you could potentially create a text widget and reposition it from a sidebar, but this might not work very well and would be further complicated because you’re using a responsive theme.

Here’s an example when you hover over your site logo:
```
.site-branding img:hover {
  transform: rotate(10deg);
}

.site-branding img {
  transition: transform 1s ease-in-out 0.2;
}
```
kerin2014 · Member · Oct 9, 2014 at 3:24 pm
Copy link
okay cool i copied the code and it works – very funny to see the parrot tilt

but — one sees the grey rectangle does not tilt – even tho it is an image i created using gimp – and pointed to my lib via url reference

so even if i add an image inside the grey rectangle in this background area (to .site header), it appears it would never be recognized as an “animatable” image and would not tilt (like the parrot) because i cannot add html code to make it a “css-able” element on its own

i am probably in way over my head here but that seems to be the situation
hallluke · Member · Oct 9, 2014 at 3:49 pm
Copy link
You could tilt it but because the image has been applied as a background-image with CSS (rather than as an img element in the HTML) you’d be tilting the entire header section and not just the image by itself.
kerin2014 · Member · Oct 9, 2014 at 5:14 pm
Copy link
which brings us back to … again,
how to does one create an animatable image within a wrapper background-image?
within the context of this theme
kerin2014 · Member · Oct 9, 2014 at 5:17 pm
Copy link
i meant i realize you can tilt the whole header
but what i want is to animate an image within the background grey rectangle area
kerin2014 · Member · Oct 9, 2014 at 5:21 pm
Copy link
the other thing is, the parrot only tilts forward when approached by a mouse

it would be rather amusing to have tilt back when the mouse approaches from the left!
hallluke · Member · Oct 9, 2014 at 5:37 pm
Copy link
I’m not sure what you mean by an image within a wrapper background image but it’s not possible to animate the background image separately from the other parts of the header as you’ve set it out currently.

You’d either have to create an image element somewhere else (the repositioned-widget idea I mentioned before – tricky) or re-purpose an existing element that’s already on the page.

*Light bulb moment!*

OK so what we’re going to try to do is use your site description to hold the image that we can apply the animation to, and then add the text back in below your title using another method, give this a shot:
```
h1.site-title:after {
  font-family:arimo-1,arimo-2,"Droid Sans",Arial,Helvetica,sans-serif;
  font-size:11px;
  content:"Where stitching lives!";
  text-transform:capitalize;
  display:block;
}

h2.site-description {
  height:150px;
  width:150px;
  background:url("http://placehold.it/150x150");
  border:0;
  font:0/0 a;
  text-shadow:none;
  color:transparent;
  position:absolute;
  top:100px;
  right:200px;
  transition: transform 1s ease-in-out 0.2;
}

h2.site-description:hover {
  transform:rotate(10deg);
}
```
As with one of the previous topics, you will probably need to set up an @media rule that hides the image on tablets/smartphones.
kerin2014 · Member · Oct 10, 2014 at 5:10 am
Copy link
brilliant! it works great. now i can use the grey background area as a staging area for doing all kinds of animations with thumbnail images. many thx!!!!

btw i changed the transform from rotate to a scale, and added a media query to hide the image, as follows:
```
h2.site-description:hover {
/*	transform: rotate(10deg); */
	transform: scale(1.5,1.5);
}

@media only screen and (max-width : 640px) {
    h2.site-description {
       background-image: none;
   }
}
```
kerin2014 · Member · Oct 10, 2014 at 5:24 am
Copy link
okay i thought this was resolved. it works great on chrome.

however, it does not look right on firefox (the image extends below the grey background image).

the animation does not work at all on safari, and the image sits right on top of the bottom border, instead of in the middle of the grey image.

it looks like I need to add code to perform some sort of positional adjustments per browser.

as always, any thoughts in this regard would be most appreciated.
kerin2014 · Member · Oct 10, 2014 at 5:37 am
Copy link
i tried changing the “top” parameter from 100px to 80px

this brought it up in chrome almost to the menu bar

it looked a little more reasonable in firefox and safari

i wish css had if statements so i could write something like this

if (safari) top:some value;
elseif (firefox) top:some other value;
etc
kerin2014 · Member · Oct 10, 2014 at 5:56 am
Copy link
in that regard, something like the wordpress.org css selector plugin might be quite useful to allow changing the absolute position of the animated image depending on the browser!

CSS WordPress Plugin
hallluke · Member · Oct 10, 2014 at 9:09 am
Copy link
Although there are differences between browsers I would assume that in this case it’s because you’re not logged in to WordPress in all browsers (so not all of them are showing the WordPress admin bar at the top). You can add an extra 32px (the default height of the admin bar) for logged in users using the CSS below, this should go some way to making it appear in the same position, let me know how it goes:
```
.logged-in h2.site-description {
  top:132px;
}
```
kerin2014 · Member · Oct 10, 2014 at 12:52 pm
Copy link
cool. i changed the default top param to 80 and to 100 when logged-in.

this worked reasonably well from an aesthetics perspective as far as i am concerned.

now what is left to do is figure out why the animation does not work at all with safari.

i figure it has to do with this webkit business. so i will attempt to solve this.

in addition, now that you coded the basic template for animating a pic inside the grey rectangle — again, brilliant idea how it was achieved! — i can start to come up with catchy ways to use css3 animations to display my needlepoint canvases.

again, many thanks!

i will keep this open for a bit to see if you have any further ideas re safari.
hallluke · Member · Oct 10, 2014 at 1:18 pm
Copy link
You also have to include the following along with the normal version in your CSS:

-webkit-transform: scale(1.5,1.5);
kerin2014 · Member · Oct 10, 2014 at 2:24 pm
Copy link
perfect. now the scale works on all 3 browsers i care about.

i also added this to make the tilt work on safari.

-webkit -transform: rotate(10deg);

Speaking of the parrot tilting, I am also going to try to get fancy and make the parrot squawk when you tilt him. The example I have studied requires a combination of HTML and CSS3. I will certainly give it a shot.

This is really a lot of fun. Again, many thanks!

No items found.