SOURCE CODE: Hover Fader Color Effects

  
  
  
  
  
  
  
  
  
  
  
  







  
  UIZE JavaScript Framework



  

    JAVASCRIPT EXAMPLES
    Hover Fader Color Effects
    

      
SOURCE
    
  

  

  

    
In this example, an instance of the Uize.Widget.HoverFader class is wiring up a slick JavaScript animation effect to the links in a menu (to the left). A list of links in the "PRESETS" tab lets you preview effect presets. When you choose a preset, the Uize.Widget.HoverFader instance will be configured with those settings, and will be automatically "tickled" to demo the settings. Be sure to also interact with the menu, since "tickling" only demos the fade-out phase, and some effects are interesting in their fade-in phase. To fool around with the settings for a preset, switch over to the "PARAMS" tab to tweak values and click the "PREVIEW HOVER FADER SETTINGS" button to preview changes.
  

  

  

    

      

        

          About Us
          Products
          Services
          Technology
          Solutions
          My Account
          Store Locator
          Investors
          Support
          Contact Us
        
      
      

    
  



Blue Border Ghost Tail That Wobbles / Oscillates
  settings::
    {
      defaultStyle:{
        color:'b',
        backgroundColor:'0',
        borderTopColor:'0',
        borderLeftColor:'0',
        borderRightColor:'0',
        borderBottomColor:'0'
      },
      hoverStyle:{
        color:'b',
        backgroundColor:'0',
        borderTopColor:'5af',
        borderLeftColor:'5af',
        borderRightColor:'5af',
        borderBottomColor:'5af'
      },
      fadeIn:{duration:500},
      fadeOut:{
        duration:2000,
        curve:{
          borderLeftColor:
            Uize.Curve.Mod.blend (
              10,
              1,
              Uize.Curve.Mod.bend (
                Uize.Curve.Mod.repeat (1,25,0,1),
                4
              )
            ),
          borderTopColor:
            Uize.Curve.Mod.blend (
              10,
              1,
              Uize.Curve.Mod.bend (
                Uize.Curve.Mod.repeat (1,25,0,1),
                3.5
              )
            ),
          borderRightColor:
            Uize.Curve.Mod.blend (
              10,
              1,
              Uize.Curve.Mod.bend (
                Uize.Curve.Mod.repeat (1,25,0,1),
                3
              )
            ),
          borderBottomColor:
            Uize.Curve.Mod.blend (
              10,
              1,
              Uize.Curve.Mod.bend (
                Uize.Curve.Mod.repeat (1,25,0,1),
                2.5
              )
            )
        }
      }
    }

Fade to Black on White
  settings::
    {
      defaultStyle:
        {color:'b',backgroundColor:'0',borderColor:'5'},
      hoverStyle:
        {color:'0',backgroundColor:'f',borderColor:'f'},
      fadeIn:{duration:250},
      fadeOut:{duration:1000}
    }

Hot Background Fade In, Cool Background Fade Out
  settings::
    {
      defaultStyle:
        {color:'b',backgroundColor:'0',borderColor:'0'},
      hoverStyle:
        {color:'0',backgroundColor:'f',borderColor:'0'},
      fadeInOut:{
        curve:{
          backgroundColor:[
            Uize.Curve.Mod.band (1,.5,0),
            Uize.Curve.Mod.band (1,.5,.5),
            Uize.Curve.Mod.band (1,.5,1)
          ]
        }
      },
      fadeIn:{duration:500},
      fadeOut:{duration:1250,reverse:false}
    }

Cool Background Fade In, Hot Background Fade Out
  settings::
    {
      defaultStyle:
        {color:'b',backgroundColor:'0',borderColor:'0'},
      hoverStyle:
        {color:'0',backgroundColor:'f',borderColor:'0'},
      fadeInOut:{
        curve:{
          backgroundColor:[
            Uize.Curve.Mod.band (1,.5,1),
            Uize.Curve.Mod.band (1,.5,.5),
            Uize.Curve.Mod.band (1,.5,0)
          ]
        }
      },
      fadeIn:{duration:500},
      fadeOut:{duration:1250,reverse:false}
    }

Sunrise and Sunset, Bg and Border Through Yellows and Reds
  settings::
    {
      defaultStyle:
        {color:'b',backgroundColor:'0',borderColor:'0'},
      hoverStyle:
        {color:'0',backgroundColor:'f',borderColor:'f'},
      fadeInOut:{
        curve:{
          backgroundColor:[
            Uize.Curve.Mod.band (1,1/3,2/3),
            Uize.Curve.Mod.band (3,1/3,1/3),
            Uize.Curve.Mod.band (1,1/3,0)
          ],
          borderColor:[
            Uize.Curve.Mod.band (3,1/3,2/3),
            Uize.Curve.Mod.band (-2,1/3,1/3),
            Uize.Curve.Mod.band (1,1/3,0)
          ]
        },
        reverse:true
      },
      fadeIn:{duration:750},
      fadeOut:{duration:1500}
    }

A Fading Fusion of Fuchsia and Morning Glory
  settings::
    {
      defaultStyle:{
        color:'b',
        backgroundColor:'0',
        borderLeftColor:'0',
        borderTopColor:'0',
        borderRightColor:'0',
        borderBottomColor:'0'
      },
      hoverStyle:{
        color:'0',
        backgroundColor:'f',
        borderLeftColor:'f',
        borderTopColor:'f',
        borderRightColor:'f',
        borderBottomColor:'f'
      },
      fadeInOut:{
        duration:1250,
        curve:{
          color:Uize.Curve.easeInPow (6),
          borderLeftColor:[
            Uize.Curve.easeInOutPow (8),
            Uize.Curve.easeInPow (2),
            Uize.Curve.easeInPow (3)
          ],
          borderTopColor:[
            Uize.Curve.easeMiddlePow (4),
            Uize.Curve.easeInPow (3),
            Uize.Curve.easeMiddlePow (8)
          ],
          borderRightColor:[
            Uize.Curve.easeInOutPow (8),
            Uize.Curve.easeInPow (3),
            Uize.Curve.easeMiddlePow (5)
          ],
          borderBottomColor:[
            Uize.Curve.easeInOutPow (4),
            Uize.Curve.easeInPow (9),
            Uize.Curve.easeMiddlePow (2)
          ],
          backgroundColor:[
            Uize.Curve.easeInOutPow (2),
            Uize.Curve.easeInPow (4),
            Uize.Curve.easeMiddlePow (7)
          ]
        }
      },
      fadeIn:{duration:300}
    }

Flickering Pastels Background Color Fade Out
  settings::
    {
      defaultStyle:
        {color:'b',backgroundColor:'0',borderColor:'0'},
      hoverStyle:
        {color:'0',backgroundColor:'f',borderColor:'f'},
      fadeIn:{duration:500},
      fadeOut:{
        duration:1250,
        curve:{
          backgroundColor:[
            Uize.Curve.saw (3,.25),
            Uize.Curve.saw (5,.25),
            Uize.Curve.saw (7,.25)
          ]
        }
      }
    }

Spectral Background Fade Out
  settings::
    {
      defaultStyle:
        {color:'b',backgroundColor:'0',borderColor:'0'},
      hoverStyle:
        {color:'0',backgroundColor:'f',borderColor:'0'},
      fadeIn:{duration:500},
      fadeOut:{
        duration:1250,
        curve:{
          backgroundColor:[
            Uize.Curve.Rubber.easeOutBounce (4,1,3),
            Uize.Curve.Rubber.easeOutBounce (3,2,-1.5),
            Uize.Curve.Rubber.easeOutBounce (3,6,1)
          ]
        },
        reverse:true
      }
    }

Peaches and Plums Fade Out
  settings::
    {
      defaultStyle:
        {color:'b',backgroundColor:'0',borderColor:'0'},
      hoverStyle:
        {color:'0',backgroundColor:'f',borderColor:'f'},
      fadeInOut:{
        curve:{
          backgroundColor:[
            Uize.Curve.Rubber.easeOutBounce (10,1,3),
            Uize.Curve.Rubber.easeOutBounce (10,1.5,3.2),
            Uize.Curve.Rubber.easeOutBounce (10,-2,3.4)
          ],
          borderColor:[
            Uize.Curve.Rubber.easeOutBounce (3,2,4),
            Uize.Curve.Rubber.easeOutBounce (3,3,4.2),
            Uize.Curve.Rubber.easeOutBounce (3,-2,4.4)
          ]
        }
      },
      fadeIn:{duration:350},
      fadeOut:{duration:1500}
    }

Shadow After Head, With Tinges of Blue in Tail
  settings::
    {
      defaultStyle:
        {color:'b',backgroundColor:'0',borderColor:'0'},
      hoverStyle:
        {color:'0',backgroundColor:'f',borderColor:'f'},
      fadeIn:{duration:500},
      fadeOut:{
        duration:1250,
        curve:{
          borderColor:
            Uize.Curve.Mod.blend (
              Uize.Curve.Mod.bend (
                Uize.Curve.Mod.repeat (
                  Uize.Curve.easeInOutSine (),
                  3,
                  0,
                  true
                ),
                -3.9
              ),
              1,
              Uize.Curve.linear
            ),
          backgroundColor:[
            Uize.Curve.Mod.blend (
              Uize.Curve.Mod.bend (
                Uize.Curve.Mod.repeat (
                  Uize.Curve.easeInOutSine (),
                  3,
                  0,
                  true
                ),
                -3
              ),
              1,
              Uize.Curve.linear
            ),
            Uize.Curve.Mod.blend (
              Uize.Curve.Mod.bend (
                Uize.Curve.Mod.repeat (
                  Uize.Curve.easeInOutSine (),
                  3,
                  0,
                  true
                ),
                -3.3
              ),
              1,
              Uize.Curve.linear
            ),
            Uize.Curve.Mod.blend (
              Uize.Curve.Mod.bend (
                Uize.Curve.Mod.repeat (
                  Uize.Curve.easeInOutSine (),
                  3,
                  0,
                  true
                ),
                -3.5
              ),
              1,
              Uize.Curve.linear
            )
          ]
        }
      }
    }

Prismatic Border (each side has different color transition)
  settings::
    {
      defaultStyle:{
        color:'b',
        backgroundColor:'0',
        borderTopColor:'0',
        borderLeftColor:'0',
        borderRightColor:'0',
        borderBottomColor:'0'
      },
      hoverStyle:{
        color:'b',
        backgroundColor:'0',
        borderTopColor:'c',
        borderLeftColor:'c',
        borderRightColor:'c',
        borderBottomColor:'c'
      },
      fadeInOut:{
        curve:{
          borderTopColor:[
            Uize.Curve.Mod.band (1,.5,0),
            Uize.Curve.Mod.band (1,.5,.5),
            Uize.Curve.Mod.band (1,.5,1)
          ],
          borderRightColor:[
            Uize.Curve.Mod.band (1,.5,1),
            Uize.Curve.Mod.band (1,.5,.5),
            Uize.Curve.Mod.band (1,.5,0)
          ],
          borderBottomColor:[
            Uize.Curve.Mod.band (1,.5,.5),
            Uize.Curve.Mod.band (1,.5,0),
            Uize.Curve.Mod.band (1,.5,1)
          ],
          borderLeftColor:[
            Uize.Curve.Mod.band (1,.5,.5),
            Uize.Curve.Mod.band (1,.5,1),
            Uize.Curve.Mod.band (1,.5,0)
          ]
        }
      },
      fadeIn:{duration:500},
      fadeOut:{duration:1250,reverse:false}
    }

Blueish Border, Clockwise Fade In, Counter-Clockwise Fade Out
  settings::
    {
      defaultStyle:{
        color:'b',
        backgroundColor:'0',
        borderTopColor:'0',
        borderLeftColor:'0',
        borderRightColor:'0',
        borderBottomColor:'0'
      },
      hoverStyle:{
        color:'f',
        backgroundColor:'247',
        borderTopColor:'06a',
        borderLeftColor:'5af',
        borderRightColor:'139',
        borderBottomColor:'136'
      },
      fadeInOut:{
        curve:{
          backgroundColor:Uize.Curve.resolve (-3),
          borderLeftColor:Uize.Curve.Mod.band (1,.25,0),
          borderTopColor:Uize.Curve.Mod.band (1,.25,1/3),
          borderRightColor:Uize.Curve.Mod.band (1,.25,2/3),
          borderBottomColor:Uize.Curve.Mod.band (1,.25,1)
        }
      },
      fadeIn:{duration:700},
      fadeOut:{duration:1000}
    }

Orange Border Blink Three Times, Then Background Lighten
  settings::
    {
      defaultStyle:{
        color:'b',
        borderColor:'0',
        backgroundColor:'0'
      },
      hoverStyle:{
        color:'fd9',
        borderColor:'ffa200',
        backgroundColor:'752'
      },
      fadeIn:{
        duration:1500,
        curve:{
          borderColor:
            Uize.Curve.Mod.band (
              Uize.Curve.Mod.repeat (1,5,0,true),
              1/3,
              0
            ),
          backgroundColor:Uize.Curve.Mod.band (1,2/3,1)
        }
      },
      fadeOut:{duration:1250}
    }

Light Green Border Slowing Blinking, Late Background Fade In
  settings::
    {
      defaultStyle:{
        color:'b',
        backgroundColor:'0',
        borderColor:'0'
      },
      hoverStyle:{
        color:'0',
        backgroundColor:'afc',
        borderColor:'afc'
      },
      fadeIn:{
        duration:1500,
        curve:{
          backgroundColor:Uize.Curve.resolve (-9),
          color:Uize.Curve.resolve (-6),
          borderColor:Uize.Curve.Mod.bend (
            Uize.Curve.Mod.blend (
              Uize.Curve.Mod.repeat (1,17,0,1),
              Uize.Curve.linear,
              Uize.Curve.resolve (-3)
            ),
            -3
          )
        }
      },
      fadeOut:{duration:1500}
    }

Gold Ingots, Bevel And Background Fade at Different Rates
  settings::
    {
      defaultStyle:{
        color:'b',
        backgroundColor:'0',
        borderTopColor:'0',
        borderLeftColor:'0',
        borderRightColor:'0',
        borderBottomColor:'0'
      },
      hoverStyle:{
        color:'0',
        backgroundColor:'eb4',
        borderTopColor:'eb4',
        borderLeftColor:'eb4',
        borderRightColor:'eb4',
        borderBottomColor:'eb4'
      },
      fadeInOut:{
        curve:{
          color:Uize.Curve.resolve (-2),
          borderLeftColor:Uize.Curve.Mod.band (1,.25,1/3),
          borderTopColor:Uize.Curve.Mod.band (1,.25,0),
          borderRightColor:Uize.Curve.Mod.band (1,.25,1/3),
          borderBottomColor:Uize.Curve.Mod.band (1,.25,1)
        }
      },
      fadeIn:{duration:700},
      fadeOut:{duration:1500}
    }

Bronze to Gold Ingot Alchemy
  settings::
    {
      defaultStyle:{
        color:'eda',
        backgroundColor:'753',
        borderTopColor:'974',
        borderLeftColor:'974',
        borderRightColor:'642',
        borderBottomColor:'642'
      },
      hoverStyle:{
        color:'0',
        backgroundColor:'eb4',
        borderTopColor:'fd8',
        borderLeftColor:'fec',
        borderRightColor:'972',
        borderBottomColor:'972'
      },
      fadeInOut:{
        curve:{
          color:Uize.Curve.resolve (-2),
          borderLeftColor:Uize.Curve.Mod.band (1,.25,1/3),
          borderTopColor:Uize.Curve.Mod.band (1,.25,0),
          borderRightColor:Uize.Curve.Mod.band (1,.25,1/3),
          borderBottomColor:Uize.Curve.Mod.band (1,.25,1)
        }
      },
      fadeIn:{duration:250},
      fadeOut:{duration:1000}
    }

3.5 Slow Blue Background Throbs on Fade In
  settings::
    {
      defaultStyle:{
        color:'b',
        backgroundColor:'0',
        borderColor:'0'
      },
      hoverStyle:{
        color:'7cf',
        backgroundColor:'246',
        borderColor:'248'
      },
      fadeIn:{
        duration:4000,
        curve:Uize.Curve.Mod.repeat (1,7,0,true)
      },
      fadeOut:{duration:1000}
    }

Flickery Spectral Border Color Fade Out
  settings::
    {
      defaultStyle:{
        color:'b',
        backgroundColor:'0',
        borderTopColor:'0',
        borderLeftColor:'0',
        borderRightColor:'0',
        borderBottomColor:'0'
      },
      hoverStyle:{
        color:'b',
        backgroundColor:'0',
        borderTopColor:'c',
        borderLeftColor:'c',
        borderRightColor:'c',
        borderBottomColor:'c'
      },
      fadeIn:{duration:500},
      fadeOut:{
        duration:1500,
        curve:{
          borderTopColor:[
            Uize.Curve.saw (5,.25),
            Uize.Curve.saw (7,.25),
            Uize.Curve.saw (11,.25)
          ],
          borderRightColor:[
            Uize.Curve.saw (3,.25),
            Uize.Curve.saw (13,.25),
            Uize.Curve.saw (6,.25)
          ],
          borderBottomColor:[
            Uize.Curve.saw (4,.25),
            Uize.Curve.saw (9,.25),
            Uize.Curve.saw (15,.25)
          ],
          borderLeftColor:[
            Uize.Curve.saw (11,.25),
            Uize.Curve.saw (13,.25),
            Uize.Curve.saw (8,.25)
          ]
        }
      }
    }

Aqua Flickery Border Fade Out
  settings::
    {
      defaultStyle:{
        color:'b',
        backgroundColor:'0',
        borderTopColor:'0',
        borderLeftColor:'0',
        borderRightColor:'0',
        borderBottomColor:'0'
      },
      hoverStyle:{
        color:'b',
        backgroundColor:'0',
        borderTopColor:'09f',
        borderLeftColor:'0ff',
        borderRightColor:'0ca',
        borderBottomColor:'099'
      },
      fadeIn:{duration:500},
      fadeOut:{
        duration:1500,
        curve:{
          borderLeftColor:Uize.Curve.saw (13,.2),
          borderTopColor:Uize.Curve.saw (17,.2),
          borderRightColor:Uize.Curve.saw (19,.2),
          borderBottomColor:Uize.Curve.saw (23,.2)
        }
      }
    }

Aqua Border, Oscillating Tail Slows Down Towards End
  settings::
    {
      defaultStyle:{
        color:'b',
        backgroundColor:'0',
        borderTopColor:'0',
        borderLeftColor:'0',
        borderRightColor:'0',
        borderBottomColor:'0'
      },
      hoverStyle:{
        color:'b',
        backgroundColor:'0',
        borderTopColor:'0ab',
        borderLeftColor:'0ab',
        borderRightColor:'0ab',
        borderBottomColor:'0ab'
      },
      fadeIn:{duration:500},
      fadeOut:{
        duration:4000,
        curve:{
          borderLeftColor:
            Uize.Curve.Mod.blend (
              4,
              Uize.Curve.easeMiddlePow (4),
              Uize.Curve.Mod.bend (
                Uize.Curve.Mod.repeat (1,25,0,1),
                -4
              )
            ),
          borderTopColor:
            Uize.Curve.Mod.blend (
              4,
              Uize.Curve.easeMiddlePow (4),
              Uize.Curve.Mod.bend (
                Uize.Curve.Mod.repeat (1,25,0,1),
                -3.5
              )
            ),
          borderRightColor:
            Uize.Curve.Mod.blend (
              4,
              Uize.Curve.easeMiddlePow (4),
              Uize.Curve.Mod.bend (
                Uize.Curve.Mod.repeat (1,25,0,1),
                -3
              )
            ),
          borderBottomColor:
            Uize.Curve.Mod.blend (
              4,
              Uize.Curve.easeMiddlePow (4),
              Uize.Curve.Mod.bend (
                Uize.Curve.Mod.repeat (1,25,0,1),
                -2.5
              )
            )
        }
      }
    }

Wobbly Shape Fade Out
  settings::
    {
      defaultStyle:{
        color:'b',
        backgroundColor:'0',
        borderTopColor:'0',
        borderLeftColor:'0',
        borderRightColor:'0',
        borderBottomColor:'0'
      },
      hoverStyle:{
        color:'0',
        backgroundColor:'f',
        borderTopColor:'f',
        borderLeftColor:'f',
        borderRightColor:'f',
        borderBottomColor:'f'
      },
      fadeIn:{duration:500},
      fadeOut:{
        duration:2000,
        curve:{
          borderTopColor:Uize.Curve.makeEaseOut (
            Uize.Curve.Mod.multiply (
              Uize.Curve.Mod.repeat (1,11,0,true),
              1
            )
          ),
          borderRightColor:Uize.Curve.makeEaseOut (
            Uize.Curve.Mod.multiply (
              Uize.Curve.Mod.repeat (1,13,0,true),
              1
            )
          ),
          borderBottomColor:Uize.Curve.makeEaseOut (
            Uize.Curve.Mod.multiply (
              Uize.Curve.Mod.repeat (1,15,0,true),
              1
            )
          ),
          borderLeftColor:Uize.Curve.makeEaseOut (
            Uize.Curve.Mod.multiply (
              Uize.Curve.Mod.repeat (1,17,0,true),
              1
            )
          )
        }
      }
    }