Closing the Gap between the Entry Title and a Slideshow
-
-
^^and…Noticed a gap open up under my top sidebar image widget, between the image and its caption, giving it proper separation for the purpose it serves there. Sweet!
-
^^^More important stuff higher up, but just wanted to mention that the owner and his wife (most likely just the Mrs.) were the reason I had to scrap that large slideshow window repair you had put together. They pulled in the reins on my creative overzealousness, and asked for a simpler home page. Made several other changes to match the new cleaner look site-wide.
-
This will fade in the container on page loads. I’ve set things at 1 second, but that can be adjusted. On page fade ins, I would suggest not over 1 second since web surfers have a short attention span.
@-webkit-keyframes fadein { from {opacity: 0;} to {opacity: 1;} } @-moz-keyframes fadein { from {opacity: 0;} to {opacity: 1;} } @keyframes fadein { from {opacity: 0;} to {opacity: 1;} } #container { -webkit-animation:fadein ease-in 1s; -moz-animation: fadein ease-in 1s; animation: fadein ease-in 1s; }The caveat: IE 9 and older will not see the fade in because they do not support animations. Only 10 and later support animations.
-
It looks VERY cool!!! Thank you! It needed something, after the drastic regression (in my opinion). I’m just concerned with the opening home page. Can I set it up to filter that page out?
-
-
That time change actually negated my concern about the Homepage load, because it seems to be working fine with the start of the load animation now. What a cool effect!! This may be a bold request, but do you recommend anything to jazz this site up some? Are there other things, as insanely cool as this animation, that I’m missing out on?
-
Asking if you would recommend anything, other than the hiring of an actual Web Designer? Lol
-
Sorry about all this, but I guess my time adjustment didn’t clear up my concern. There’s seemed to be a slight delay in the load of the slideshow, that worked great with my load animation, but it went away. Can I delay of the load of the slideshow, by 1 or 1/2 a second?
-
No, there is no way to delay the slideshow loading.
We can exclude the home page from the animation by changing the #container rule to this.
body:not(.home) #container { -webkit-animation: fadein ease-in .75s; -moz-animation: fadein ease-in .75s; animation: fadein ease-in .75s; }Note: the above exclusion will not seem to work in the customizer preview, but will after you save and go to the site itself.
-
-
Don’t hate, Man! I’ve got a question that ties to this last thing. I used the code a little differently, splitting up the two parts of the #container (#content & #main). 1) To vary the animation in the two parts, and 2) Because of the importance of the safety pages. I would still like to exclude .home as well. Can I exclude both .home & .page-template-full-width-page for #content’s load timeframe? Here’s how I’ve got it setup, now. Would like .home ↓there, too.
body:not(.page-template-full-width-page) #content {
-webkit-animation: fadein ease-in .5s;
-moz-animation: fadein ease-in .5s;
animation: fadein ease-in .5s;
}body:not(.home) #main {
-webkit-animation: fadein ease-in .75s;
-moz-animation: fadein ease-in .75s;
animation: fadein ease-in .75s;
} -
^That’s how it’s setup now, but…Sheesh! My bad. Would like to exclude all posts from the grouping, as well. They can have the same animation as the main, but I’d like to keep the content’s opacity at max for .page-template-full-width-page, .home and all posts (products) pages combined. Can this be done, Sir?
-
Okay, scratch all of that^. I’ve got everything setup, as I’d like it to be. Thank you for all pointers and patience! Wish there were some way to repay you directly. You’ve assisted me, beyond any annual fee’s coverage; that’s a fact. You are The Man, Richard…THE MAN!
-
^and…Noticed the web address field goes to a dark gray and the font goes to white on mobile devices. That compensates very well for the absence of a site title, which only seemed possibly problematic on those devices. Very cool!! :)
-
You don’t have a “blog” page set, so I would assume you are talking about the categories pages? The CSS selector to exclude categories/tag/archive pages would be this.
body:not(.archive) #content
If you wished to exclude single post pages, this would be for that.
body:not(.single) #content -
I’m actually trying to include the posts pages (ex: http://hudsonchemicals.com/2015/11/17/extremely-powerful/), that have tabs on the upper left hand of the page and are under the “Posts” tab in my admin menu for editing. I want to have both those pages that fall under (.page-template-full-width-page) and those that fall under whatever designates the “Posts” as separate from other types of pages. If (.single) applies to all of them, that’s the code I need. Just need to know how to include it in the stack of code, so they’re both doing a white to content fadein without the drops showing through; like any of the full-width-page template pages are (ex: http://hudsonchemicals.com/current-compliance-information/) when they load.
-
^and….Yeah, I’m sorry. I did forget to mention that I have most “Posts” labeled pages set-up in a way, that you have to click one of the text lists (on either the “Products” page or on any of the industry pages in the sidebar custom menu labeled “Select Your Industry”) to find them anywhere. Ooops! Lol
-
body:not(.single) #content
would exclude all posts from the animation.
If you want to exclude all msds sheets, then this should do it.
body:not(.page-template-full-width-page) #content
I’m totally confused now.
- The topic ‘Closing the Gap between the Entry Title and a Slideshow’ is closed to new replies.
WordPress.com Forums 