SOURCE CODE: Basic Mask

VIEW EXAMPLE




  Basic Mask | JavaScript Examples | UIZE JavaScript Framework
  
  
  
  
  
  
  








  
  UIZE JavaScript Framework





  

    JAVASCRIPT EXAMPLES
    Basic Mask
    

      
SOURCE

    

  


  

  

    
In this example, an instance of Uize.Widget.Mask has been created and positioned over the layout of images below. When you move the mouse over the buttons above the layout, the mask's coordinates are set so that the highlight area is positioned over the corresponding image and everything outside the image is masked out. The Uize.Fade.Factory module is used to create a JavaScript animation for a smooth transition to the new coordinates.

  


  

    

      Pink Pacifica Sunset
      Flock of Clouds
      Driving Through the Rain
      Heavens Open Over Pedro
      Show All
    

  


  

    
    

      
Sun Sets Soon at Sweeney

      

        The sun bursts out beneath a bank of clouds in this sunset, seen from Sweeney Ridge in San Bruno, California. It casts a path of shimmering orange on the ocean and lights up the air between two hills.
      

    


    

      
Heavens Open Over Pedro

      

        On a stormy winter day in Pacifica, shafts of light burst through the blackened sky to warm the sands of Pedro Point beach.
      

    


    

      
Flock of Clouds

      

        It was on a trip to the U.S. Virgin Islands in the Caribbean that this majestic flock of fluffy clouds was spotted grazing across the clear turquoise waters hugging the shallow sandbanks of a nearby island. It seemed like I was witnessing a great migration from the high altitudes of my plane window seat.
      

    


    

      
Driving Through the Rain

      

        I captured this evocative picture one day driving through a torrential downpour in San Bruno, California - towards Pacifica. I was, of course, in the passenger seat at the time (and not steering the car from it, either, for that matter). There's just something intensely moody about the colors and the motion blur effect in the picture that evokes those braving-the-storm feelings. It feels stark and looks blistering cold.