By
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
