background preloader

Slider with Sliding Backgrounds

Slider with Sliding Backgrounds
Among the many super nice design features of the Yahoo! Weather app for iOS is the transition between city screens. The background image doesn't just move away as the screen moves from one screen to the next, the background image itself slides. It appears to be hiding some of the "old" screen and revealing more of the "new" screen those closer you have it to being in full view. Let's try and pull it off on the web. The HTML Like any slider, there are three main components: The container that holds everything into shapeA sliding container that is as wide as all the slides in a rowEach individual side container We won't bother too much with content inside the slide. <div class="slider" id="slider"><div class="holder"><div class="slide" id="slide-0"><span class="temp">74°</span></div><div class="slide" id="slide-1"><span class="temp">64°</span></div><div class="slide" id="slide-2"><span class="temp">82°</span></div></div></div> The container might be a <section>, slides might be <article>.

Dive Into HTML5 Tendance du webdesign : double scroll | WebdesignerTrends - Ressources utiles pour le webdesign, actus du web, sélection de sites et de tutoriels - Directement inspirés par les interfaces mobiles, certains sites osent ce que l’on pourrait nommer le « double scroll« … L’utilisation du défilement de page pour créer des effets originaux sur les sites est en vogue depuis maintenant bien 2 ou 3 ans, voir plus. Avec la ligne de flottaison définitivement enterrée, plus de soucis aujourd’hui les gens scrollent. La parallaxe, le scroll « story-telling« , entre autres ont permis d’apporter de la dynamique et de la profondeur dans notre expérience de navigation. Comme toutes les tendances, la parallaxe s’est elle aussi essoufflée après avoir lassé les concepteurs web et les internautes. Une expérience en deux colonnes Découlant directement des ces tendances passées, mixées avec une expérience utilisateur très représentée sur tablette et mobile, voici le double scroll. ACTV/ RCVR de Puma La page d’accueil présente le site avec une double entrée. Fade or Eddy Carles Palacio Vespillo Pour conclure : Ressources : Iscroll 4 Que pensez-vous de cet effet ?

Fullscreen Slideshow with HTML5 Audio and jQuery 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. View demo Download source In today’s tutorial we’ll create a fullscreen photo slideshow to illustrate a New York picture series. 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 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! <div id="title"><h1>New York Gallery</h1><p>Pictures by <a href=" Artini</a></p></div> The CSS The JavaScript

Build an Infinite Scrolling Photo Banner With HTML and CSS Today we’re going to embark on the challenge of creating an animated banner of photos that automatically scrolls horizontally through an infinite loop. The best part: we’re going to do it without a single line of JavaScript. To make this banner truly useful, our goal will be to use individual photos dropped into our HTML, not simply one long CSS background that repeats. This is pretty tricky but we’ll walk you through exactly how it works. Let’s get started! The Idea The concept here is simple. As you can see, we basically just have a strip of images that move their position from left to right. This effect is easy enough with JavaScript or Flash, but as an exercise let’s see if we can pull it off in pure CSS. Hurdles As promised, this is a pretty easy project, but only because I’ve done most of the problem solving for you. The Easy Way The easy way is to take the images that you want to display, import them into Photoshop, then combine them into one long image. The Hard Way Let’s Build It

Les transformations 3D en CSS3 L’une des innovations majeures apportées par le CSS3 est la capacité à “transformer” des éléments. Ces transformations, qui peuvent être effectuées en 2D (sur la plan de la page) ou en 3D, permettent d’enrichir l’expérience utilisateur avec de tout nouveaux types d’effets visuels. Les transformations combinées avec les transitions permettent en effet d’animer des éléments HTML en effectuant des rotations, des transitions ou des changements d’échelle. Nous allons aujourd’hui appliquer ces transformations dans l’espace grâce aux transformations 3D du CSS3 ! Ce tutoriel a été rédigé par Vincent De Oliveira, enseignant et développeur à l’ENSG. Introduction Vous avez déjà entendu parler des transformations en CSS, qu’elles soient 2D ou 3D? Quelles différences entre la 2D et la 3D sur le web? Pour l’affichage d’un site web à l’écran, nous travaillons en 2D: axe X : positif vers la droite de l’écran,axe Y : positif vers le bas de l’écran. Quels navigateurs sont compatibles? Les rotations Matrice

Accordion with CSS3 | Codrops - Using hidden inputs and labels, we will create a CSS-only accordion that will animate the content areas on opening and closing. View demo Download source Today we’ll experiment some more with the adjacent and general sibling combinator and the :checked pseudo-class. Using hidden inputs and labels, we will create an accordion that will animate the content areas on opening and closing. There are many variations of CSS-only accordions around, most of which are implemented using the :target pseudo-class. The problem with using :target is that we can’t really close the content areas again or have multiple sections open at the same time. So, let start! Please note: the result of this tutorial will only work as intended in browsers that support the CSS3 properties in use. The Markup We will be going through an example that uses checkboxes where one content section is open by default (the input needs to be ‘checked’). Let’s have a look at the style. The CSS On hover, we’ll make the label white: Demos

How to Create an Awesome Scrolling Navigation using jQuery - thebeebs I was looking over the .net award nominees this week and stumbled across the flipboard.com website. I loved the scrolling navigation so much I just had to open up visual studio and try and recreate it myself. DemoView Demo The main thing flipboard do differently is to have the logo and logo background elements move at different animation speeds from each other and the main content. This effect is is similar to Parallex scrolling and gives the website more interest, depth and flair. I’ve documented the main steps to recreate my demo below: Step 1 First we need to make reference to the jQuery Library as we are going to use it alot. Step 2 Next we will want to add our HTML to the page this HTML will hold all of the layers and links that we will need to get the example running. The background triangle moves at a slightly different speed to the logo and so needs it’s own <div>. I have added the nav layer and placed 4 links into it so that the user can navigate between the different contentItems.

Menu Slides avec CSS3 - Créer des blocs dépliables animés en CSS3 Attention : Un bug étrange a été détecté sous Chrome/Safari sur Mac. Observez-vous cela ? Dans cet exemple, on utilise les transformations CSS afin de faire subir une rotation aux liens contenus dans les éléments de liste (li). <div class="menu"><ul><li><a href="">Home</a><div><h3>Home</h3><p>Bienvenue sur le site CSS3Create</p></div></li><li><a href="">News</a><div><h3>News</h3><p>Pleins de news sur CSS3 et sur HTML5</p></div></li> ... Réglage de la taille d’un li et application de la transition sur la taille. 0.15s correspond au retardement de la transition, afin d’éviter un déclenchement trop rapide de chaque slide. overflow:hidden permet d’éviter le débordement des éléments masqués. Ensuite au :hover, la taille des li est modifiée en utilisant les transitions CSS. L’effet de transition fonctionne avec le moteur Webkit (Safari-Chrome) , le moteur Gecko 2.0 (Firefox 4) et Opéra11+. Voir aussi : Menu avec slider effet transition

Jquery fancybox onload + delay avant fermeture + cookie Voici un script permettant d’ouvrir une popup à l’ouverture d’une page html, de paramétrer la fermeture automatique, créer un cookie et ainsi pouvoir spécifier que cette popup s’ouvrira qu’une fois toutes les 24heures par exemple. voir l’exemplesource Voir les commentaires dans le script : Dans le body :

Related: