jQuery Fullscreen Video Slideshow with BigVideo.js A tutorial about how to create a slideshow-like fullscreen video background using BigVideo.js, a jQuery plugin for big background video. View demo Download source(Please note that the ZIP file does not contain any video files due to their size.) BigVideo.js is a jQuery plugin that makes it easy to create fit-to-fill background video on a web page. It can play silent ambient background video (or series of videos), or used as a player to show video playlist. In this tutorial, we’ll be creating a page that shows a series of video screens, showcasing the free HD stock video footage and animated backgrounds available on Beachfront B-Roll. Before we get started, give some thought as to whether using this technique at all is appropriate for your project. The first thing you’ll need to do is get video content. The Markup First, let’s do the markup for the page: We have a header on the center of the screen. The CSS Before we get into the video, we need to style the page. Note the data-video attribute.
Les Media Queries CSS3 La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc. Approche historique Avec CSS2 et HTML4, il était déjà possible de spécifier un média de destination pour l'application d'une ou plusieurs feuilles de style. <! screen Écrans handheld print Impression
Multiple select with checkboxes and jQuery Updated 17 April 2012 A recent project that we worked on required a <select> element that allowed multiple selections. An example is shown below: The advantages This allows more than one option to be selected if the user holds down the modifier key (the CTRL key in Windows) whilst making their selection. The depth of the select element can also be limited if the list is very long, although generally you’d want more than one option on display. The disadvantages However, there did seem to be a couple of disadvantages. The solution Replacing the select element with checkboxes seemed like the obvious choice, but this would take up more space on the screen and potentially look messy. First of all we changed the select element into a series of checkboxes, wrapped in a div with an appropriate class name: Next we apply some CSS styling to give the desired effect: The final touch We can extend this idea using jQuery to highlight the selections. Don’t forget you need to include the jQuery library too:
Créer un slider pure HTML5 & CSS3 pour wordpress HTML5 et CSS3 ne sont pas encore tout à fait valides et restent encore en cours de transition. Néanmoins, je vous propose aujourd’hui un tutoriel, dont le concept nous vient de Geoffrey Crofte => CreativeJuiz – Html5 & Css3 : Slideshow) permettant de créer un slider (diaporama) en HTML5 / CSS3 et ce, sans JavaScript. Au risque de me répéter, le slider présenté ici, n’est proposé qu’a titre expérimental afin de vous montrer les possibilités du CSS3 /HTML5. Il n’est pas conseillé de l’utiliser dans un cadre de développement cross-browser. Démonstration en ligne / sources Slider HTML5 / CSS3 Fichiers de démonstrations sans utilisation de jQuery. Taille : 3, 0 KiB • Date : 3 juin 2013 • Hits : 4 532 Slider HTML5 / CSS3 (démo) Démonstration en ligne du diaporama en HTML5 présenté dans ce tutoriel. Taille : 1 024 bytes • Date : 3 juin 2013 • Hits : 6 055 #1 – Le pattern HTML5 Ce que j’appelle le pattern, c’est tout simplement ce dont nous aurons besoin pour que notre slider fonctionne. #2 – Le CSS3 <?
Les possibilités offertes par CSS3 La technique en CSS3 Si votre design est bien fait, l'utilisateur ne devrait pas avoir à scroller (c'est-à-dire à faire défiler) horizontalement votre page. En CSS, on va donc se débrouiller pour que notre site ne dépasse pas une largeur minimale que nous avons fixée. Les media queries peuvent être utilisées de deux façons différentes : une fois directement dans le CSS, et l'autre depuis la balise <link> de votre page HTML qui inclut votre feuille de style. Pour la méthode en HTML, voici comment procéder : L'avantage de cette première méthode est qu'un visiteur avec un appareil ne correspondant pas à la requête ne téléchargera pas ce dont il n'a pas besoin. En CSS, il faut englober tout le code que vous destinez aux mobiles dans un bloc, comme ceci : @media votre requete ici { /* Le code pour les mobiles ici */ Valeurs standards Pour adapter votre design, il va falloir prendre en compte la taille réduite de l'écran de votre visiteur. Je vous propose le tableau suivant : max-width: 100%; Quoi ?
WOW Slider : Diaporama jQuery & Galerie D'Image jQuery CSS3 – Créer un slideshow automatique et contrôlable Si vous suivez le compte @NoupeMag sur Twitter (ça marche aussi pour mon compte), vous avez certainement vu passer mon slideshow en CSS3 datant de l’an dernier. Ce n’était pas ma première tentative de slideshow comme le présentent ces premier et second travaux datant de mai 2010. Ce tutoriel ne s’adresse pas aux débutants, il vous faudra un minimum de connaissances techniques pour vous y retrouver dans les tronçons de code qui vont suivre. Cependant, le code commenté reste – je l’espère – accessible. Avant propos La page de démonstration du slideshow full CSS3 vous propose des fichiers sources en téléchargement, profitez-en, notamment si vous souhaitez récupérer les images. Les codes CSS fournis ici sont légèrement différents de ceux fournis dans l’archive zippée téléchargeable. Les codes CSS3 présents sur ce tutoriel ne tiennent pas compte des préfixes parfois nécessaires (-webkit-, -moz-, -ms-, -o-) pour une question de gain de place dans le code. Les défauts des versions précédentes
Cycle2 Overview Cycle2 is a versatile slideshow plugin for jQuery built around ease-of-use. It supports a declarative initialization style that allows full customization without any scripting. Simply include the plugin, declare your markup, and Cycle2 does the rest. Highlights: Supports all browsers Declarative: no scripting needed! How it Works It's very simple really, even your grandmother could use it. Include jQuery and the Cycle2 plugin on your page. Need more details? What's that you say? Responsive Donations Donations are a great way to say "Thank you, malsup". Go ahead, click the button! Please support my open source work while learning from the masters at frontendmasters.com. If you're looking for a jQuery Responsive 'slider', and used to love @malsup's Cycle, go have a look at Cycle2.
Scattered Polaroids Gallery A flat-style Polaroid gallery where the items are scattered randomly in a container. When a specific item is selected, it will move to the middle while the other Polaroids will make space for it by moving to the sides. Optionally, an item can have a backface which will be shown by flipping the Polaroid when clicking on the current navigation dot again. View demo Download source Today we’d like to share a little gallery experiment with you. We use the following structure for the gallery: The “photostack-start” class can be used to show an initial overlay on the gallery container. The div with the class “photostack-back” can be used to insert some more info for the backside of the Polaroid. The shuffle iteration count (the amount of times we want all Polaroids to move around before the next item becomes current) can be controlled with the data-attribute data-shuffle-iteration. Take a look at some screenshots of the gallery: I hope you like this gallery idea and find it inspirational :)