background preloader

Fullscreen Slit Slider with jQuery and CSS3

Fullscreen Slit Slider with jQuery and CSS3
A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements. View demo Download source In this tutorial we’ll create a fullscreen slideshow with a twist: we’ll slice the current slide open in order to reveal the next or previous slide. Using different data-attributes, we’ll define the type, rotation angle and scale of a slide’s parts, giving us the possibility to create unique effects of each slide transition. We’ll be using jQuery cond, jQuery plugin by Ben Alman for chainable “if-then-else” statements. The animal icon font that we’ll be using is by Alan Carr and you can find it here. The images in the second demo are by Majownik and they are licensed under a Creative Commons Attribution License. Let’s start with the HTML. The Markup So, our first slide will have something like this: Now, let’s style it!

3D Thumbnail Hover Effects A tutorial about how to create 3D thumbnail hover effects with CSS 3D transforms and jQuery. View demo Download source Today we want to show you how to create some exciting 3D hover effects using CSS3 and jQuery. This idea is inspired by the cool hover effect that you can find on the page of the Google SketchUp Showcase. In our examples, we’ll use thumbails that will reveal some more information on hover. We will create a structure with jQuery that will allow making the image appear as folded or bended when we hover over it. Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. The images used in the demos are by Angelo González and they are licensed under the Creative Commons Attribution 2.0 Generic (CC BY 2.0) License. We will omit vendor prefixes in this tutorial. The Markup The markup for the thumbnail structure will be as follows: Each thumbnail goes into a division with another division for the details (view-back).

How to create animated tooltips with CSS3 How to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after View demo Download source In today’s tip we’ll show you how to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after. The idea is to have a list with links or in our case, social icons, that reveal a little tooltip on hover. The unordered list will look like this: <ul class="tt-wrapper"><li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li><li><a class="tt-twitter" href="#"><span>Twitter</span></a></li><li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li><li><a class="tt-facebook" href="#"><span>Facebook</span></a></li><li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li><li><a class="tt-forrst" href="#"><span>Forrst</span></a></li></ul> The list elements will be floating left and the anchors will have the following style: Each anchor will have a different background position for the background image:

Slideshow with jmpress.js Today we will create a slideshow using jmpress.js. The jQuery plugin that is based on impress.js will allow us to use some interesting 3D effects for the slides. View demo Download source You have for sure already seen impress.js, a really great JavaScript library for creating extraordinary 3D presentations. The icons used in the demo is by Artcore Illustration and they are licensed under theCreative Commons BY-NC-ND 3.0 license. So, let’s start! The Markup We will have a main container which is a section with the class jms-slideshow. Let’s take care of the style. The CSS Since we want to make the slideshow responsive, we will give the main container a percentage width, with some min and max values: The next wrapper is dynamically added, and this will be the visible slideshow wrapper: The background color classes will be applied to the previous wrapper. The steps will have the following style: Inactive steps will have 0 opacity. The inner parts of the slides will have the following style:

Triple Panel Image Slider with jQuery and CSS3 Animated Content Menu with jQuery Today we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, he background image is going to change according to which menu item was clicked. The main idea is to […] View demoDownload source Today we will create a slick animated content menu with jQuery for a restaurant theme. The main idea is to have a restaurant menu with the different menu categories displayed. So, let’s get started. The Markup The HTML structure is going to contain some elements for the background image, the grid overlay, the loading icon and the main menu. As a default background image when the page loads, we will have the image Default.jpg. The menu content will be wrapped by a div with the class “ac_content”. For each menu item, we will have a div “ac_subitem” which will contain the submenu content box. Let’s take a look at the style. The CSS @import url('reset.css'); The JavaScript

Slicebox - 3D Image Slider Creative Lifesaver Honest Entertainer Brave Astronaut Affectionate Decision Maker Faithful Investor Groundbreaking Artist Selfless Philantropist Example 1: Default settings Vertical Showcase Slider with jQuery and CSS Transitions Bernhard With restful springiness in the seat; prevents static sitting and provides enhanced seating comfort. Padded seat and back for enhanced seating comfort. Soft, hardwearing and easy care leather, which ages gracefully. Buy this item Tobias For increased stability, re-tighten the screws about two weeks after assembly. Buy this item Pöang Frame made of layer-glued bent birch; a very strong and durable material. Buy this item Mellby Easy to keep clean; removable, machine washable cover. Buy this item Torbjörn Height adjustable for a comfortable sitting posture. Buy this item

Little Boxes Menu with jQuery Today we will create a menu out of little boxes that animate randomly when a menu item is clicked. The clicked menu item expands and reveals a content area for some description or links. When the item is clicked again, the boxes will come back, reconstructing the initial background image. View demoDownload source Today we will create a menu out of little boxes that animate randomly when a menu item is clicked. Let’s get started! The Markup The HTML will be made up of a main container with div elements inside. <div id="littleBoxes" class="littleBoxes"><div class="boxlink bg1" style="top:0px;left:0px;"><a href="">About</a><div class="boxcontent"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. The positioning values are calculated from the width and height of the boxes which is 90px plus its border (2px) and some margin (1px). Let’s have a look at the style. The CSS The description box will have the following style:

5 jQuery Background Video Plugins We have seen websites that have images as its background, and let’s all agree that they are pretty cool looking sites. If they can use images, why not use videos also? Here we are giving you our collection of 5 jQuery Background Video plugins that can help you fulfill that! These plugins enables you to easily integrate some of your favorite videos as your website/blog background. Have fun! Related Posts: This plugin makes it easy to add fit-to-fill background video to websites. Source + Demo This jQuery plugin enables you to very easily use an HTML5 video as a background to a website or any div. SourceDemo 3. jQuery Video Background plugin Will place a resizable video in to the background of the page or designated element. SourceDemo 4. jQuery tubular A plugin that places a YouTube video of your choice into your page as a background. SourceDemo This jquery component let you have a chromeless, customizable player for your favorite YT movies. SourceDemo AUTHOR: Sam Deering.

Slide Down Box Menu with jQuery and CSS3 In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left […] View demoDownload source In this tutorial we will create a unique sliding box navigation. We will be using the jQuery Easing Plugin and some beautiful photos by tibchris. The Markup For the HTML structure we will be using an unordered list where each menu item will contain the main link item and a div element for the submenu: <ul id="sdt_menu" class="sdt_menu"><li><a href="#"><img src="images/1.jpg" alt=""/><span class="sdt_active"></span><span class="sdt_wrap"><span class="sdt_link">Portfolio</span><span class="sdt_descr">My work</span></span></a><div class="sdt_box"><a href="#">Websites</a><a href="#">Illustrations</a><a href="#">Photography</a></div></li> ... If there is no submenu, the div can simply be left out. The CSS

jQuery HTML5 video background demo | George Paterson Code available for download on Github. Example of the jQuery Video Background plugin. Will place a resizable video in to the background of the page or designated element. If the containing element's width and height does not match the aspect ration of the video, the video will not alter it's aspect ratio but will render based on the largest dimension. Public methods play: Trigger a play/pause event on the chosen video background. mute: Trigger a mute/unmute event on the chosen video background. destroy: Will destroy the chosen video background. resize: When invoked this will resize the video background to the height of the document or window. Plugin parameters videoSource: Either an array of strings of video URL's or a two-dimensional array containing video URL's and type. poster: The URL string of the image used for the video poster attribute. autoplay: Video autoplay attribute boolean. preload: Video prelod attribute string. loop: Video loop attribute boolean. controlPosition: controlText:

Image map with CSS3 & jQuery tooltips Tooltips can play a big role in your web designs and that isn't new anymore. Just use them correctly and they will help you improve user experience. We have seen before how to create some good looking CSS3 tooltips and today you'll learn how to create an image map with pins and tooltips. View demo The idea A while ago, I had to create an image map with tooltips and, being inspired by some cool tooltips I noticed on Firefox's website, I decided to create these ones. The principal purpose was to have something that is easy to use and update, without needing any developing knowledge. As you will see further, you won't need any developer skills to add pins with tooltips to an image. HTML5 data attributes and jQuery HTML5 has a cool feature named "custom data attributes", which can help you store arbitrary snippets of metadata for the purpose of making your Javascript code simpler. Here's how the syntax looks: ... and this is how you can get the above value with jQuery: The HTML The CSS The jQuery

BigVideo.js - The jQuery Plugin for Big Background Video The jQuery Plugin for Big Background Video (and Images) This plugin makes it easy to add fit-to-fill background video to websites. It can play silent ambient background video (or series of videos). Or use it as a player to show video playlist. BigVideo.js can also show big background images, which is nice to have for showing big background images for devices that don’t have autoplay for ambient video. BigVideo.js is built on top of Video.js from zencoder. You can read about how to use BigVideo.js below. DOWNLOAD: zip tar examples bower install BigVideo.js Setup BigVideo.js uses the Video.js api. To simply play a video that takes up the entire browser window (like in this example), do this: For crossbrowser fallbacks, you can include a source order with different video formats. Ambient Video To play silent video in the background of a page (like in this example), use BigVideo’s ambient setting: Or play a series of ambient background videos (like in this example) Video.js BV.getPlayer().pause();

Related: