jquery - Fading between svg sprite background-position using background-check.js -


i have logo on site need fade between light , dark version. logo on moving slider, , using brilliant 'background-check' script (http://www.kennethcachia.com/background-check/) determine logo should displayed. script achieves applying class logo, either 'background--light' or 'background--dark'. these classes determine solely background-position of svg sprite si displaying logo.

currently, change of classes means logo 'moves' place rather fades, , none of standard solutions have found online such adding state change work working these classes. can point me in right direction? pure css solution preferable, open jquery if required.

thanks

markup

<a href="#" class="logo check">logo</a> 

css

.logo.background--dark { background: url(images/ui-sprite.svg) no-repeat -120px 0; } .logo.background--light { background: url(images/ui-sprite.svg) no-repeat 0 0; } 

this has been solved, adding second logo element (not ideal best option in situation). hope useful solution others.

html

<a href="#" class="logo check">logo</a> <a href="#" class="logo-invert">logo</a> 

css

.logo {     width: 85px;     height: 35px;     background: url(images/ui-sprite.svg) no-repeat 0 0;     text-indent: -9999px;     display: block;     z-index: 999; }  .logo-invert {     width: 85px;     height: 35px;     background: url(images/ui-sprite.svg) no-repeat -119px 0;     text-indent: -9999px;     display: block;     position: absolute;     z-index: 999;     opacity: 0; }  /* background check */ .logo.background--dark { opacity: 0; } .logo.background--dark ~ .logo-invert { opacity: 1; }  .logo.background--light { opacity: 1; } .logo.background--light ~ .logo-invert { opacity: 0; } 

Comments

Popular posts from this blog

css - SVG using textPath a symbol not rendering in Firefox -

Java 8 + Maven Javadoc plugin: Error fetching URL -

datatable - Matlab struct computations -