Sliding Header Animation

robertkety
robertkety
edited June 2013 in Campaign Portal Building
I've been putting the finishing touches on my campaign, "Autumn Dragons":http://www.obsidianportal.com/campaigns/autumn-dragons, and I couldn't situate the header in a way that made me happy. So I decided to hide it. The following code minimizes the header into a small square with the Obsidian Portal logo. When you hover the mouse over the logo, it expands. For the coding example, I expanded the width so the minimized header would shift to the left of the content frame. The code is also designed for a campaign with no other CSS formatting so you'll need need to customize it. Feel free to take a look at how I tailored the code on my page. Happy coding!

@#header {
border: 1px solid white;
border-radius: 5px;
width: 42px;
margin: 5px 0px -50px -50px;
opacity: .5;
transition: all 0.3s ease-in-out;
}
#header:hover {
width: 1090px;
margin: 5px 0px 5px -50px;
opacity: 1;
transition: all 0.3s ease-in-out;
}
@


Robert
"Autumn Dragons":http://www.obsidianportal.com/campaigns/autumn-dragons

Comments

  • Basileus
    Basileus
    Posts: 589 edited June 2013
    Very slick! I'll have to play with this.


    Edit: Hmm, may be a browser issue here. Works great at home, but from work the contents of the header never appear after it expands upon hovering over it. Will have to continue testing.
    Post edited by Basileus on
  • Kallak
    Kallak
    Posts: 1,090
    Not sure how I personally feel about the page body sliding down to accommodate the menu pop, but I like the concept. I think for myself if I were to do it, I'd leave the space at the top. IDK. Still pretty nice.

    As a side note, using a hover-expand approach on say the fans sidebar box might be an improvement over my "jury-rigged fans box scroll":http://forums.obsidianportal.com/comments.php?DiscussionID=2985&page=1#Item_4, worth playing around with.
    All the best,
    - Kallak
  • robertkety
    robertkety
    Posts: 55
    You can tailor the margin-top part of the code to prevent the page body sliding down. I chose not to do that because it either leaves an awkward gap along the top (if you use margin-top:0px in both elements) or overlaps other frames (margin-top:50px in both elements).

    Robert
    "Autumn Dragons":http://www.obsidianportal.com/campaigns/autumn-dragons
  • robertkety
    robertkety
    Posts: 55
    Here is the code you're looking for Kallak:

    @#campaign-fans-sidebar {
    height: 69px;
    overflow: hidden;
    }
    #campaign-fans-sidebar:hover {
    height: auto;
    }@

    I tried the code on your DANgerous Kalamar 4 page. The max-height and h4 adjustments you have on that element will require some tweaking; otherwise, you're all set.

    Robert
    "Autumn Dragons":http://www.obsidianportal.com/campaigns/autumn-dragons
  • Kallak
    Kallak
    Posts: 1,090 edited June 2013
    It's just off because of the alterations I made for the scrolling one I'm sure.

    EDIT: Put it on there to do the old trial and error, 69px left a sliver of the top row of avatars showing for me. 64px covers it up on my test run here.
    Post edited by Kallak on
    All the best,
    - Kallak
  • robertkety
    robertkety
    Posts: 55
    Looks great!
  • Kallak
    Kallak
    Posts: 1,090 edited June 2013
    Adding one tweak and then I'll put this on my other thread

    EDIT: There, mouseover message added for completeness.
    EDIT 2: Added to "Tidbits Compilation Thread":http://forums.obsidianportal.com/comments.php?DiscussionID=2985&page=1#Item_20
    Post edited by Kallak on
    All the best,
    - Kallak
  • robertkety
    robertkety
    Posts: 55
    Sweet! Bad news though, I had to make a change. After checking out our implementations, I noticed a weird "bounce" effect that occurred in our sidebar sliders that was not present in the header slider. This is most likely due to my Chrome browser, but I have a solution! In the header slider we specified exact px limits for the width instead of using a percentage. The transition interpreter doesn't seem to like this, so it resets the element height to 0px and expands until it reaches 100% (hence the "bounce"). Instead of height, use max-height, and set the hover to something larger than you'd ever expect the element to become:
    @#campaign-fans-sidebar {
    max-height: 69px;
    overflow: hidden;
    }
    #campaign-fans-sidebar:hover {
    max-height:3000px;
    }@
    I've implemented and tested the code and it works great!

    Robert
    "Autumn Dragon":http://www.obsidianportal.com/campaigns/autumn-dragons
  • Kallak
    Kallak
    Posts: 1,090 edited June 2013
    Are you seeing that same bounce on my "kalamar site":http://www.obsidianportal.com/campaigns/dangerous-kalamar-4 with chrome? I'm wondering because I added that :after pseudo element to put the message on and I'm not seeing it - although admittedly I'm also using Firefox and not Chrome.

    EDIT: As an aside/afterthought, wouldn't it be better to keep the original code, and then set a "min-height" for the "collapsed" window? then even if it bounced it would be to the "min-height" only as the smallest. rather than having to make up an arbitrary max-height value for the non-collapsed window setup.
    Post edited by Kallak on
    All the best,
    - Kallak
  • robertkety
    robertkety
    Posts: 55
    I tested your "min-height" hypothesis. Min-height will get it to change height, but not with the cool animation effect of ease-in-out. For some reason the ease-in-out transition doesn't like height:auto or height:100%.

    Robert
    "Autumn Dragons":http://www.obsidianportal.com/campaigns/autumn-dragons
  • robertkety
    robertkety
    Posts: 55
    Yes, the Kalamar site has the same bounce effect.

    Robert
    "Autumn Dragons":http://www.obsidianportal.com/campaigns/autumn-dragons
  • robertkety
    robertkety
    Posts: 55
    Here's some code you can cut and paste if you want all sidebar elements (expect the login/welcome element) to minimize and slide down on rollover:
    @.sidebar { overflow:hidden; }
    #campaign-controls-sidebar, #campaign-party-info-sidebar, #campaign-search-sidebar, #campaign-latest-updates-sidebar, #campaign-quick-stats-sidebar, #campaign-fans-sidebar, #wiki-page-tags-sidebar, #wiki-filter-by-tag-sidebar, #social-sharing-sidebar, #model-versions-sidebar, #wiki-page-tools-sidebar, #add-npc-sidebar, #sort-by-tag-sidebar, #manage-forums-sidebar, #calendar-next-event-sidebar, #calendar-subscribe-webcal-sidebar, #game-character-tools-sidebar {
    max-height:15px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    }
    #campaign-controls-sidebar:hover, #campaign-party-info-sidebar:hover, #campaign-search-sidebar:hover, #campaign-latest-updates-sidebar:hover, #campaign-quick-stats-sidebar:hover, #campaign-fans-sidebar:hover, #wiki-page-tags-sidebar:hover, #wiki-filter-by-tag-sidebar:hover, #social-sharing-sidebar:hover, #model-versions-sidebar:hover, #wiki-page-tools-sidebar:hover, #add-npc-sidebar:hover, #sort-by-tag-sidebar:hover, #manage-forums-sidebar:hover, #calendar-next-event-sidebar:hover, #calendar-subscribe-webcal-sidebar:hover, #game-character-tools-sidebar:hover {
    max-height:3000px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    }
    #secondary-column #campaign-controls-sidebar h4, #secondary-column #campaign-party-info-sidebar h4, #secondary-column #campaign-search-sidebar h4, #secondary-column #campaign-latest-updates-sidebar h4, #secondary-column #campaign-quick-stats-sidebar h4, #secondary-column #campaign-fans-sidebar h4, #secondary-column #wiki-page-tags-sidebar h4, #secondary-column #wiki-filter-by-tag-sidebar h4, #secondary-column #social-sharing-sidebar h4, #secondary-column #model-versions-sidebar h4, #secondary-column #wiki-page-tools-sidebar h4, #secondary-column #add-npc-sidebar h4, #secondary-column #sort-by-tag-sidebar h4, #secondary-column #manage-forums-sidebar h4, #secondary-column #calendar-next-event-sidebar h4, #secondary-column #calendar-subscribe-webcal-sidebar h4, #secondary-column #game-character-tools-sidebar h4 { margin:0px; }@

    Enjoy!

    Robert
    "Autumn Dragons":http://www.obsidianportal.com/campaigns/autumn-dragons
  • Basileus
    Basileus
    Posts: 589
    Ah, just what I needed!

    I award you two beers, sir! (or beverage of your choice)
  • robertkety
    robertkety
    Posts: 55
    One of my player pointed out that I missed a sidebar element that I hadn't used previously, the "where we play" element/frame. Here is the updated code:
    @.sidebar { overflow:hidden; }
    #campaign-controls-sidebar, #campaign-party-info-sidebar, #campaign-search-sidebar, #campaign-latest-updates-sidebar, #campaign-quick-stats-sidebar, #campaign-fans-sidebar, #wiki-page-tags-sidebar, #wiki-filter-by-tag-sidebar, #social-sharing-sidebar, #model-versions-sidebar, #wiki-page-tools-sidebar, #add-npc-sidebar, #sort-by-tag-sidebar, #manage-forums-sidebar, #calendar-next-event-sidebar, #calendar-subscribe-webcal-sidebar, #game-character-tools-sidebar, #campaign-where-we-game-sidebar {
    max-height:15px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    }
    #campaign-controls-sidebar:hover, #campaign-party-info-sidebar:hover, #campaign-search-sidebar:hover, #campaign-latest-updates-sidebar:hover, #campaign-quick-stats-sidebar:hover, #campaign-fans-sidebar:hover, #wiki-page-tags-sidebar:hover, #wiki-filter-by-tag-sidebar:hover, #social-sharing-sidebar:hover, #model-versions-sidebar:hover, #wiki-page-tools-sidebar:hover, #add-npc-sidebar:hover, #sort-by-tag-sidebar:hover, #manage-forums-sidebar:hover, #calendar-next-event-sidebar:hover, #calendar-subscribe-webcal-sidebar:hover, #game-character-tools-sidebar:hover, #campaign-where-we-game-sidebar:hover {
    max-height:3000px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    }
    #secondary-column #campaign-controls-sidebar h4, #secondary-column #campaign-party-info-sidebar h4, #secondary-column #campaign-search-sidebar h4, #secondary-column #campaign-latest-updates-sidebar h4, #secondary-column #campaign-quick-stats-sidebar h4, #secondary-column #campaign-fans-sidebar h4, #secondary-column #wiki-page-tags-sidebar h4, #secondary-column #wiki-filter-by-tag-sidebar h4, #secondary-column #social-sharing-sidebar h4, #secondary-column #model-versions-sidebar h4, #secondary-column #wiki-page-tools-sidebar h4, #secondary-column #add-npc-sidebar h4, #secondary-column #sort-by-tag-sidebar h4, #secondary-column #manage-forums-sidebar h4, #secondary-column #calendar-next-event-sidebar h4, #secondary-column #calendar-subscribe-webcal-sidebar h4, #secondary-column #game-character-tools-sidebar h4, #secondary-column #campaign-where-we-game-sidebar h4 { margin:0px; }@

    Cheers!

    Robert
    "Autumn Dragons":http://www.obsidianportal.com/campaigns/autumn-dragons
  • NikMak
    NikMak
    Posts: 379
    many thanks for this!
Sign In or Register to comment.

July 2022
Signs and Portends

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions