CSS3 Headline Changer

CSS3 Headline Changer: Using CSS3 keyframes to animate a headline changer. Degrades well in browsers that do not support keyframes

Supersized 3.2 - Fullscreen Slideshow jQuery Plugin

Supersized 3.2 - Fullscreen Slideshow jQuery Plugin: "

Introducing Supersized 3.2

Features

• Resizes images to fill browser while maintaining image dimension ratio
• Cycles backgrounds via slideshow with transitions and dynamic preloading
• Core version is available for those that just want background resizing.
• Navigation controls with keyboard support
• Integration with Flickr – pull photos by user, set, or group
• Head over to the project page for all the details.

New in Supersized 3.2

• Complete rewrite of the Supersized script.
• More options, including ability to prevent slides from being cut off.
• Link directly to slides
• API lets you call functions directly (eg. play/pause, next, previous, and jump directly to a slide)
• Theme files are now separate from base files, which will make upgrades much easier. The Shutter theme is included in each download.
• Flickr is not yet updated to 3.2 (it’s on it’s way)

Inspiration / Sites Using Supersized

I’ve put together a small sample of Supersized sites that I’ve come across recently. Keep in mind, these sites are not necessarily running the latest version, and some are heavily customized. I will be putting together a more extensive list for the project page, so feel free to shoot your site to sam@onemightyroar.com!

Plans for WordPress

I’ve noticed quite a few WordPress themes based on Supersized floating around – I plan on entering into the ring with an official Supersized WordPress theme. While I’m still at the early stages at this point, in the meantime, you should check out WP Supersized developed by the talented Ben De Boeck from World In My Eyes. Note: This plugin is currently using version 3.1.3

Comments and Feedback

Just a reminder, you can follow Supersized on Github, which is were I will publish minor point releases and field any bug reports.

If you have an urgent problem and/or would like to contact me directly to hire for custom work, please email me at sam@onemightyroar.com. For troubleshooting, make sure you have first checked the documentation and FAQ sections on the project page.

Enjoyed this project? Have a look at our Build Internet Projects page for some other stuff you make fancy as well.

Banner image provided by Colin Wojno.

Other photography by Brooke Shaden and Maria Kazvan.

"

Vertical Sliding Accordion with jQuery

Vertical Sliding Accordion with jQuery: "

View demo Download source
Today we want to share a slick and flexible vertical jQuery accordion with you. The main idea is to expand the accordion slices on click and show some more information. The other slices will become less opaque and squeezed. When navigating to the next slice using one navigation arrows, a new slice will slide in from the top or the bottom. Once a slice is open and we navigate, the subsequent slice will open on slide.
The beautiful portrait photography is by Images by Alan Turkus. Check out his Flickr Photostream. The images are licensed under the Creative Commons Attribution 2.0 Generic (CC BY 2.0) License.
We also use the jQuery Mousewheel Plugin by Brandon Aaron which allows us to navigate through the accordion using the mouse wheel.
The options for this plugin allow to customize the height and width, the number of slices visible, the height of an expanded slice and others. Let’s first see some examples before we explain each option.

Examples

Take a look at all the examples (you can also navigate from them to all the other demos):

• 3 visible slices / Default
• With easing
• 5 visible Slices and higher transparency
• 2 visible slices and slower animation
• Fullscreen example

For the HTML structure we have the accordion container, the navigation spans and the wrapper with the slices:

<div id="va-accordion" class="va-container">
<div class="va-nav">
<span class="va-nav-prev">Previous</span>
<span class="va-nav-next">Next</span>
</div>
<div class="va-wrapper">
<div class="va-slice va-slice-1">
<h3 class="va-title">Marketing</h3>
<div class="va-content">
<p>Henry Watson</p>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="va-slice va-slice-2">
...
</div>
</div>
</div>

We give each slice a different class to define a background image for them. In the last fullscreen example we have color classes to assign a different background color to each slice.
Let’s take a look at the example with just 2 slices and a slower animation speed:

$('#va-accordion').vaccordion({
expandedHeight : 350,
animSpeed  : 400,
animOpacity  : 0.7,
visibleSlices : 2
});

The following options are available:

// the accordion's width
accordionW  : 1000,
// the accordion's height
accordionH  : 450,
// number of visible slices
visibleSlices : 3,
// the height of a opened slice
// should not be more than accordionH
expandedHeight : 350,
// speed when opening / closing a slice
animSpeed  : 250,
// easing when opening / closing a slice
animEasing  : 'jswing',
// opacity value for the collapsed slices
animOpacity  : 0.2,
// time to fade in the slice's content
contentAnimSpeed: 900,
// if this is set to false,
// we collapse any opened slice
// before sliding
savePositions : true

If you, for example, would like to show a slice fully on expansion, using the whole height of the accordion container, then you set the expandedHeight to the same value like the accordionH (the height of the accordion). In our last example we used the full window width and height and also adjusted some style (see inline style in the example) in order to remove any margins:

$('#va-accordion').vaccordion({
accordionW  : $(window).width(),
accordionH  : $(window).height(),
visibleSlices : 5,
expandedHeight : 450,
animOpacity  : 0.1,
contentAnimSpeed: 100
});

We hope you like this accordion and find it useful!
View demo Download source

Share and Enjoy:

"

Fullscreen Slideshow with HTML5 Audio and jQuery

Fullscreen Slideshow with HTML5 Audio and jQuery: "

View demo Download source
In today’s tutorial we’ll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in order to give life to the gallery and try to recreate the ambient of this vibrant city.
To create the slideshow and the fullscreen picture display, we’ll use the Vegas jQuery plugin that compiles many ideas previously shared in Codrops articles in one plugin. The audio elements will be controlled with Buzz, a JavaScript audio library. You can find out more about these two plugins that I wrote on my website: Jay Salvat’s website.
The thumbnails navigation will be spiced up with a custom scrollbar using jScrollPane by Kelvin Luck and some easing effects provided by the jQuery easing plugin by George McGinley Smith.
The New York photography is by Alessandro Artini, check out his photos on his Flickr photostream.

The Markup

Let’s set the stage! First we create a placeholder to contain the picture title and credits.

<div id="title">
<h1>New York Gallery</h1>
<p>Pictures by <a href="http://www.flickr.com/">Alessandro Artini</a></p>
</div>

Then the thumbnails are placed in an unordered list. Each thumbnail is linked to a big representation of the picture and carry the title of the picture. Note that we add a data attribute to some links to adjust the vertical alignment of the displayed fullscreen picture to avoid cropping an important part.
Two empty divs are added to hold the pointer and the flash effect when the slides change.

<div id="flash"></div>
<div id="thumbnails">
<ul>
<li>
<a href="01.jpg">
<img src="01b.jpg" title="New York moving" data-valign="top">
</a>
</li>
<li>
<a href="02.jpg">
<img src="02b.jpg" title="New York traffic" data-valign="bottom">
</a>
</li>
<li>
<a href="03.jpg">
<img src="03b.jpg" title="Street dancers">
</a>
</li>
...
</ul>
<div id="pointer"></div>
</div>

Finally, we place the links for the pause and volume management.

<div id="pause"><a href="#">Paused</a></div>

<div id="volume"><a href="#">Sounds</a></div>

The CSS

First, we’ll define the style of the title part which is placed at the bottom of the screen with a black background. We use the “rgba” notation which allow us to set the opacity of the color. Note that we prepend it by the standard hex notation #000 for older browsers.
The heading will be in the nice Ultra font from the Google fonts collection:

#title {
background: #000;
background: rgba(0, 0, 0, 0.8);
bottom: 0px;
font: 11px Arial, Helvetica, sans-serif;
padding: 10px 20px;
position: fixed;
right: 0px;
text-align: right;
width: 100%;
}
#title h1 {
font: 30px 'Ultra', Arial, serif;
margin: 0;
padding: 0;
}

We’ll follow the same technique for the thumbnails. The elements of the list are floated to display the pictures as an horizontal bar.

#thumbnails {
background: #000;
background: rgba(0, 0, 0, 0.8);
height: 90px;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
#thumbnails ul {
margin: 0;
padding: 0;
}
#thumbnails li {
float: left;
list-style: none;
margin: 5px;
padding: 0;
}
#thumbnails a {
outline: none;
}
#thumbnails img {
width: 112px;
}

The pointer is placed out of the page. It will be animated at the beginning of the slideshow and moved under the currently displayed slide.

#pointer {
border: 2px solid #F30;
cursor: pointer;
height: 75px;
left: -100px;
margin: 3px;
position: absolute;
width: 112px;
}

The flash effect is done with a pure white div fixed over the whole screen. By default it is hidden. It will be shown and faded out dynamically.

#flash {
background: #FFF;
display: none;
height: 100%;
position: fixed;
width: 100%;
}

The same idea holds for the pause text. It is hidden by default.

#pause {
display: none;
font: 100px 'Ultra', arial, serif;
height: 100%;
opacity: 0.4;
position: absolute;
text-align: center;
text-shadow: 0 0 5px #000;
width: 100%;
}
#pause a {
color: #FFF;
height: 100px;
left: 50%;
margin: -50px 0 0 -250px;
position: absolute;
text-transform: uppercase;
top: 50%;
width: 500px;
}

For the volume links we’ll use some nice icons. The volume button has three states defined by three classes showing different icons. We use the CSS sprites technique to reduce the number of png files loaded. Read more about the CSS image replacement and CSS sprites technique on Css-tricks.

#volume {
left: 10px;
opacity: 0.8;
position: absolute;
top: 100px;
}
#volume a {
background: transparent url(../img/icons.png) no-repeat;
display: block;
height: 30px;
text-indent: -9999px;
width: 30px;
}
#volume.all a {
background-position: 0 0;
}
#volume.some a {
background-position: -30px 0;
}
#volume.none a {
background-position: -60px 0;
}

Finally, we’ll customize some Vegas default styles to adjust the overlay pattern and the position of the loading indicator.

.vegas-loading {
top: auto;
bottom: 40px;
left: 40px;
}
.vegas-overlay {
background-image: url(../js/vegas/overlays/02.png);
}

And we’ll also make some adjustments to the jScrollPane default styles in order to get a nice scrollbar fitting our gallery.

.jspHorizontalBar {
height: 5px;
}
.jspHorizontalBar .jspTrack {
background: #333;
}
.jspHorizontalBar .jspDrag {
background: #666;
cursor: ew-resize;
}
#thumbnails:hover .jspHorizontalBar .jspDrag {
background: #F30;
}

The JavaScript

We are reaching the main part: the JavaScript. Let’s start by caching some elements. The picture array will hold all the slides and their title and vertical alignment.

var pictures = [],
$pointer = $( '#pointer' ),
$thumbnails = $( '#thumbnails' ),
$title = $( '#title' ),
$pause = $( '#pause' ),
$flash = $( '#flash' ),
$volume = $( '#volume' );

It’s time to define the sounds of our gallery with Buzz. The HTML5 audio element is now supported by all modern browsers. Sounds are supported in a native way without the need for Flash. Unfortunately, there is not a single audio format supported by all of them. MP3 would have been a good choice, but Firefox doesn’t support it. We have to convert our sounds to several formats. The best combination is OGG and MP3 formats. To convert our audio elements we used the free online file converter Online Convert.
Buzz allows us to group sounds in order to easily control them. This is what we do with all the camera sounds.
If the user’s browser doesn’t support the HTML5 audio element, Buzz degrades properly. In that case, we’ll simply hide the volume button.
The traffic sound is played and looped as soon as it is loaded.

buzz.defaults.formats = [ 'ogg', 'mp3' ];

var trafficSound = new buzz.sound( 'sounds/traffic' ),
clickSound = new buzz.sound( 'sounds/click' ),
focusSound = new buzz.sound( 'sounds/focus' ),
rewindSound = new buzz.sound( 'sounds/rewind' ),
cameraSounds = new buzz.group( clickSound, focusSound, rewindSound );

if ( !buzz.isSupported() ) {
$volume.hide();
}

trafficSound.loop().play().fadeIn( 5000 );

Now, let’s work on our thumbnails. We have to adjust the total width of the thumbnails bar. Without this step, the thumbnails would be display in more than one row.

$thumbnails.find( 'ul' ).width( function() {
var totalWidth = 0;
$( this ).find( 'li' ).each( function() {
totalWidth += $( this ).outerWidth( true );
});
return totalWidth;
});

We’ll now apply jScrollPane to the thumbnails container. jScrollPane provides an easy way to work with its API. We use that in order to render a proper scrollbar when the window is resized. This API will be useful in a further step.

$thumbnails.jScrollPane();

var jScrollPaneApi = $thumbnails.data( 'jsp' );

$( window ).bind( 'resize', function() {
jScrollPaneApi.reinitialise();
});

Now, the Vegas plugin needs to be set. We’ll fill the picture array by grabbing some information from the thumbnails list and pass it to Vegas in order to start the slideshow. A four second delay is applied between the slides.

$thumbnails.find( 'a' ).each( function() {
pictures.push({
src: $( this ).attr( 'href' ),
title: $( this ).find( 'img' ).attr( 'title' ),
valign: $( this ).find( 'img' ).data( 'valign' )
});
})

$.vegas( 'slideshow', {
backgrounds: pictures,
delay: 4000
})( 'overlay' );

Vegas triggers a bunch of events. The one we need now is the onload event trigger when a slide is loaded and displayed. With the src attribute of the loaded image, we’ll get the number of the currently active thumbnail. Also, a sound is played.

$( 'body' ).bind( 'vegasload', function( e, img ) {
var src = $( img ).attr( 'src' ),
idx = $( 'a[href='' + src + '']' ).parent( 'li' ).index();

focusSound.play();

// ...
});

The title is modified in order to hold the picture title and is displayed with a nice fade-out/fade-in effect.

$title.fadeOut( function() {
$( this ).find( 'h1' ).text( pictures[ idx ].title );
$( this ).fadeIn();
});

The flash is fired…

$flash.show().fadeOut( 1000 );

The pointer has to move over the current thumbnail. The jScrollPane API is used to automatically scroll the bar as the pointer is off the screen, but not if the user hovers over the bar.

var pointerPosition = $thumbnails.find( 'li' ).eq( idx ).position().left;

$pointer.animate({
left: pointerPosition
}, 500, 'easeInOutBack' );

if ( ( pointerPosition > $thumbnails.width()
|| pointerPosition < jScrollPaneApi.getContentPositionX() )
&& !$thumbnails.is( ':hover' ) ) {
jScrollPaneApi.scrollToX( pointerPosition, true );
}

$pointer.click( function() {
$thumbnails.find( 'a' ).eq( idx ).click()
});

Let’s see what we have to do with our volume button. The idea is to mute or unmute some sounds as the button is clicked. We change the class of the button and set the muting or playing of the sounds accordingly.

$volume.click( function() {
if ( $( this ).hasClass( 'all' ) ) {
cameraSounds.unmute();
trafficSound.mute();

$( this ).removeClass( 'all' ).addClass( 'some' );
} else if ( $( this ).hasClass( 'some' ) ) {
cameraSounds.mute();
trafficSound.mute();

$( this ).removeClass( 'some' ).addClass( 'none' );
} else {
cameraSounds.unmute();
trafficSound.unmute();

$( this ).removeClass( 'none' ).addClass( 'all' );
}
return false;
});

Our gallery is almost set. Now we want that clicking a thumbnail displays a new slide and pauses the slideshow. Its cursor is set to the current number of the clicked thumbnail. That way the slideshow will restart at the right position. All the elements of the page are hidden and we display a “paused” message.
Another sound is played.

$thumbnails.find( 'a' ).click( function() {
$pause.show();
$pointer.hide();

$volume.animate( { top: '20px' });
$thumbnails.animate( { top: '-90px' });
$title.animate( { bottom: '-90px' });   

var idx = $( this ).parent( 'li' ).index();
$.vegas( 'slideshow', { step: idx } )( 'pause' );

rewindSound.play();

return false;
});

A click on the “paused” word restarts the slideshow and the thumbnails and title are shown again.

$pause.click( function() {
$pause.hide();
$pointer.show();

$volume.animate( { top:'100px' });
$title.animate( { bottom:'0px' });
$thumbnails.animate( { top:'0px' });

$.vegas( 'slideshow' );

clickSound.play();

return false;
});

That’s it! We hope you enjoyed the tutorial of mashing up some plugins and like the noisy result!
View demo Download source

Share and Enjoy:

"