0

http://www.webdesignerdepot.com/2013/03/how-to-create-a-resizing-menu-bar/ is a fairly simple and typical, easy to use resizing menu bar. The image scales down as well, but how can I make the image swap completely with a transition? This (JS/jQuery swap image on scroll event) is a very simple solution to swap the image, yes, but fade in/out transitions seem much harder to put in place when scrolling down and back up.

Community
  • 1
  • 1
lapingultah
  • 196
  • 4
  • 17

1 Answers1

1

You can use css transitions to transition the opacity with classes.

.visible {
  transition: .3s opacity;
  opacity: 1;
}

.hidden {
  opacity: 0;
}

just have the first image as .visible and the second image as .visible.hidden Then as the menu transitions swap the classes so the first image has .visible.hidden and the second image has only .visible

You can tweak the timings to create a nice looking crossfade.

Acburst
  • 424
  • 3
  • 4
  • You mean roughly like http://jsfiddle.net/nf6f2vmy/? It seems to behave as intended, but am I doing it overly complicated (especially the jQuery part)? Also, is there a reason I should use .visible.hidden instead of just .hidden? – lapingultah Sep 20 '15 at 11:37
  • Its because the way I wrote it I had the transition on visible. It's fine the way you did it. I updated a couple things in your jsfiddle to make it animate the height of the image as well. http://jsfiddle.net/nf6f2vmy/1/, Is this more of what you are looking for? – Acburst Sep 20 '15 at 17:49