By
One of the problems with portfolio sites is figuring out how to let your users drill down to the content without it being hidden beneath many layers. The GunSmoke Productions site does the opposite and brings the content to the user but hides it away until they want to see it.
Clicking on small images causes them to fade out, while the container expands to show the video content –perfect for GunSmoke, as video is its main trade. The video is delivered via Vimeo and fits the full width of the screen. These transitions are applied to the rollovers, which are faded between background and text colours. Because they wrap images, it has more prominence and provides a very slick interface to the site
TECHNIQUE
Setting up the document
We are going to make an image fade out and be replaced by a larger Vimeo video. To do that, we need to create a new HTML page in Dreamweaver and add the code to the head section. This links to the jQuery library and sets up the page document ready for us to input all the necessary content.
Rollover animation
The GunSmoke website has a smooth fading rollover effect which we can achieve using CSS3. Here we set the block class for the link so that the background and text colour change as the user rolls their mouse over the links.
001 .block a{
002 display: block; text-align: center;
003 width: 94%; padding: 20px 3%;
004 background: #666; color: #fff;
005 text-decoration: none;
006 -webkit-transition-property:- webkit- transform, color, background;
007 -webkit-transition-duration: 0.2s;
008 -webkit-transform: translate3d(0px,0,0);
009 -webkit-transition-timing- function:ease;
010 }
011 .block a:hover{
012 background: #fff; color: #333;
013 -webkit-transition-property: color, background;
014 -webkit-transition-duration: 0.2s;
015 -webkit-transform: translate3d(0px,0,0);
016 -webkit-transition-timing-function: ease;
017 }
Full-width video
The following lines of CSS ensure that the video remains at the full width of the browser. Initially, we set the video to be hidden. We’ll use jQuery later on to achieve that nice effect of showing the video in the page, but only after the image has faded out when the user has clicked on the image.
001 .vid {
002 position: relative;
003 padding-bottom: 56.25%;
004 padding-top: 30px; height: 0;
005 overflow: hidden; display: none;
006 }
007 .vid iframe, .vid object, .vid embed 008 {
009 position: absolute;
010 top: 0; left: 0;
011 width: 100%; height: 100%;
012 }
013 </style>
Page content
In the body section of the document, add the following code into the page. Instead of the comment, replace with embed code from a video on either YouTube or Vimeo. The ‘still.jpg’ would be an image taken from the video, but crop it so it’s wide and thin.
001 <article class=”block”> 002 <a id=”click” href=”#”> 003 <img src=”still.jpg” class=”full”/> 004 <div class=”vid”> 005 <!-- Embed code here --> 006 </div> 007 <p>Awesome Video</p> 008 </a> 009 </article>
Show the right content
Add the final piece of jQuery at the bottom of the page. This makes the image fade out and then the video will fade in. Save the document and view it in the browser so that you can see the rollover effect working and the fade out of the image when you click on it.
001 <script>
002 $(“#click”).click(function () {
003 $(‘.full’).fadeOut(‘fast’, function() {
004 $(“.vid”).fadeIn(‘slow’);
005 });
006 });
007 </script>
