News

How to create slick animated transitions using CSS

Use CSS3 transforms and transitions to create smooth expanding containers, ideal for displaying video.

CSS3 Logo

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>
×