iDangero.us jQuery Chop Slider 3. Simplest jQuery Slideshow. A friend was looking at doing a simple slideshow.
The requirements were very straightforward: No animation controls. eg: play, stop. Images should cross-fade. Her instinct was to find an existing jQuery plug-in and revise it to work to her needs. That would seem simple enough but if you do a search for jQuery slideshows, you'll find that there are plenty of them and they are filled with plenty of functionality. Using an existing plug-in wasn't very practical and hard to work with.
I put my thinking cap on and decided to write a script from scratch. (If you're a TL;DR kinda person, check out the demo.) HTML and CSS The HTML was very straightforward: a DIV with some IMGs in it. In thinking about the CSS, I decided to just lock all the images into the same place using absolute positioning. jQuery Slideshow Now to think about the slideshow. $('.fadein img:gt(0)').hide(); You have to remember that the image index starts at 0. An Introduction to CSS3 Transitions. Home / CSS3 Previews / An Introduction to CSS3 Transitions CSS3 Transitions are a presentational effect which allow property changes in CSS values, such as those that may be defined to occur on :hover or :focus, to occur smoothly over a specified duration – rather than happening instantaneously as is the normal behaviour.
Transition effects can be applied to a wide variety of CSS properties, including background-color, width, height, opacity, and many more. Keep reading for further details of supported properties. At present the CSS3 Transitions module is at the working draft stage of development, and as such elements of the specification and syntax could still be liable to change. Although browser support is relatively widespread, for the time being you’ll need to use several vendor prefixes in your code for a cross-browser solution.
Here’s a basic example. Example 1: No Transition Example 2: 5 Second Transition The code for this example can be found later in the article. The Syntax: or ease. Fonction scrollTo pour les ancres nommées ( jQuery ) Je vais aujourd’hui vous parler d’une fonction jQuery très utilisée.
C’est le script scrollTo qui permet donc de donner un effet de déplacement sur une page internet pour se rendre sur une ancre nommée. Les ancres nommées sont en fait des balises positionnées à un endroit spécifique d’une page et vers laquelle on peut faire un lien directement. Du coup en cliquant sur ce lien on se dirige directement vers la balise en question mais tout ceci sans transition et le rendu est plutôt . Avec le script scrollTo on va se rendre à la balise supposée mais avec une certaine vitesse de déplacement. On retrouve souvent cet effet sur les sites one page. Je vous propose donc maintenant soit de voir une démo soit de télécharger les fichiers sources. Youtube like Rating with Jquery and Ajax. Suivre le défilement vertical avec CSS et jQuery. Dans ce tutoriel, nous allons apprendre à créer un élément qui reste affiché à l'écran en permanence même lorsqu'on scroll (barre de défilement) en "suivant" le défilement de l'écran.
Tester/ressources/exemple/jquery-rocket/step5.html Résultat final La fusée suit le défilement de la souris L'intérêt est d'attirer l'attention tout en gardant cet élément en dehors du contenu principal de la page, on peut par exemple l'utiliser pour afficher un lien vers les réseaux sociaux : Facebook "like", Twitter, Google +1... Cette technique est notamment utilisée sur l'Apple Store, pour afficher le panier d'achats en permanence - ex: Pour réaliser cet effet, on va utiliser le positionnement CSS "fixed" ainsi que jQuery.
Voilà les sources du résultat final pour les gens pressés : jQuery Rocket Sources + bonus + fichier Photoshop du sprite CSS Télécharger Avant tout, on va partir sur avec cette page de base : Mais cette div porte également une propriété CSS position:relative . Fixed Floating Elements. Watch Watch jQuery Fixed Floating Elements screencast (Alternative flash version) QuickTime version is approximately 45Mb, flash version is streaming.
View the demo used in the screencast Understanding the effect When I scrolled down the Apple store when I had something in my basket I found that the summary and what I had selected would follow me down the page. Apple’s version was very smooth and didn’t jump when I kept scrolling. Upon firing up Firebug I can see that once the scrollbar gets to the point where the basket is at the top of the page, the basket has a class applied to it which gives it a position: fixed – which explains why it holds still while I continue to scroll down. Other ways to do it Like I said, I’ve seen this effect before, for example on Simon Willison’s web site (see the comments form) (one of the speakers for my Full Frontal conference).
So I’ve taken the style of Simon’s site for the example and added the jQuery we need to make this a nice smooth effect. Akordeon-A Stylo Modern jQuery Accordion Plugin.