News

Create transparent cut-out effects with jQuery

French designer Vivien Wack adds a touch of class to the preloader on her site

g02

Screen shot 2014-12-23 at 17.33.28

INSPIRATION: www.vivienwack.fr

This tutorial takes a look at the portfolio of French designer Vivien Wack. The site contains some very interesting loading animations that keep the user entertained while the site loads.

When loaded the main image fades in and some line art triangles are drawn in place which cleverly spell out the initials VW. Once past this, the rest of the site is straightforward enough and uses the AngularJS library to load content, using the XMLHttpRequest to load the new content to the page. Altogether it gives a very slick web presence for an individual designer and is more akin to the kind of studio sites that they would produce for themselves.

CREATE ROLLOVER EFFECTS

Body content

There are so many ways to create rollover effects, we are going to take a relatively straightforward approach. In the body of the web page add the following div structure which will just hold our content in the page. Inside here we have an image which is the rollover image.

001 <div>
002 <div id="img1"><img id="top-over"     class="top" src="img/over.png"></div>
003 </div>

Head section

At the top of the document in the head section add the following code which creates a link to the jQuery library then, we can start styling our page up. Our container is made to be centred in the page then we set the dimensions for our top image which will be the rollover part.

001 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
002 <style>
003         .container{
004             width: 862px; margin: 0 auto;
005         }
006         .top{
007             width: 862px; height: 450px;
008 }

Final styling

Next we set the image rollover to be invisible by using the opacity property. Following that we set the dimensions for the background image which will have the original image within it. We are setting the image as a background image for the div.

001 #top-over{
002         opacity: 0;            
003 }
004 #img1{
005     background-image: url(img/bg.jpg);
006     height: 450px;
007 }
008 </style>

jQuery hover

Just below the div in the body section add the following script tag. This just runs a jQuery document ready function to ensure the content has finished loading. Now we detect if the mouse is hovering over the rollover section of the page. If so we animate the opacity moving to full opacity of the rollover.

001 <script>
002     $(function() {            
003          $( "#top-over" ).hover(
004             function() {
005                 $(this).animate({"opacity":     "1"}, "slow");
006 },

Roll out

Finally we add the rollout function and this obviously takes the image back to being fully transparent. Save the page now and test this in your browser. You will see the image rollover fully working. We are using a semitransparent PNG image as the rollover image for this.

001         function() {
002                   $(this).animate({"opacity": "0"}, "slow");
003              }
004             ); 
005    });
006
×