background preloader

Fluid CSS3 Slideshow with Parallax Effect

Fluid CSS3 Slideshow with Parallax Effect

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. 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. Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. Let’s start with the HTML. The Markup Every slide will also have some data-attributes that we will use in order to control the effect for each slide. The CSS

Windy – A Plugin for Swift Content Navigation Coco LokoTotal bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat. Vermouth LandVelit chambray fugiat, enim aesthetic esse ullamco typewriter. ElectrodynamicsBefore they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up. Retinal BlissLocavore vero ad, before they sold out food truck bushwick helvetica. Disco FeverCillum laboris consequat, qui elit retro next level skateboard freegan hella. 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:

3D Gallery Room « Previous Demo: 3D Book Showcase Images by Thomas ClaveiroleBack to the Codrops Article 3D Gallery Room Demo 1 Demo 2 x Slicebox - 3D Image Slider Creative Lifesaver Honest Entertainer Brave Astronaut Affectionate Decision Maker Faithful Investor Groundbreaking Artist Selfless Philantropist Example 1: Default settings slidr.js - add some slide effects. Add as many Slidr's as you want - even place them within each other.Dynamic resizing - adapts to the size of its content, unless you don't want it to.Keyboard navigation - move your cursor on top of the demo below, and hit the arrow keys!Touch navigation (mobile) - change the slides below by swiping left, right, up or down! Include either slidr.js or slidr.min.js somewhere at the bottom of your html page, after the body content. slidr.js works on any inline, inline-block or block elements with an id defined. Valid slides include any first-level children elements with the data-slidr attribute set to some unique value within the parent scope. are all valid html markup for creating three different Slidr's within the same page. A global slidr object is available for calling. slidr.create('slidr-id').start(); create() accepts an optional settings parameter as its second argument. Settings Full details on available settings listed below: Global API Slidr API which produces this: Dynamic resize good

slick - the last carousel you'll ever need Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> // Add the new slick-theme.css if you want the default styling <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) Initialize your slider in your script file or an inline script tag When complete, your HTML should look something like: NOTE: I highly recommend putting your initialization script in an external JS file. Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) When complete, your HTML should look something like:

Parallax Content Slider with CSS3 and jQuery Warm welcome When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Read more Easy management Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. Revolution A small river named Duden flows by their place and supplies it with the necessary regelialia. Quality Control Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.

Related: