background preloader

Expanding Image Menu with jQuery

Expanding Image Menu with jQuery
In today’s tutorial we will create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when we click on them. We will also slide in the colored version of the image, creating a neat […] View demoDownload source In today’s tutorial we will create an expanding image menu with jQuery. The photography is by talented Robert Bejil, check out his awesome photos on his Flickr photostream. So, let’s get started! The Markup The HTML structure consists of a main container and an unordered list where each item is one of the columns. Let’s take a look at the style. The CSS We are going to stretch the container for the list over the page and hide the overflow. We will give enough width to the ul so that the li elements which will be floating, don’t wrap to the next “line” when they expand: The overflow of the li elements is going to be hidden as well because our content inside is actually much bigger. The JavaScript Related:  JqueryGeradores & Códigos

Effet de transition de couleur sur les liens avec jQuery L'idée est similaire à celle que j'ai déjà utilisée pour d'autres scripts. J'ai écrit une fonction qui sélectionne les liens (balises <a>), place leur contenu dans un <span> avec le nom de classe ".one" et ajoute un élément <span> avec le nom de classe ".two". <span> ".two" contient le même texte que <a> et est placé juste au-dessus à droite du texte du lien. Au départ, le deuxième <span> est caché. Lorsque le lien est survolé, le <span> ".two" transite en utilisant l'effet fadeTo de jQuery, pendant que <span> ".one" disparaît. Cela crée un effet de fondu en douceur vers une autre couleur. Bien sûr, IE est à l'origine de problèmes et nous avons eu à appliquer une solution de contournement. II-1. Téléchargez le fichier zip contenant mon script et la bibliothèque jQuery et placez-les sur votre site. II-2. Ajoutez ces lignes à votre fichier CSS. II-3. Assurez-vous que les sélecteurs CSS sont correctement écrits de sorte que vous pouvez appliquer ce script sur des éléments précis.

Elastic Image Slideshow with Thumbnail Preview Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option. View demo Download source To make this slideshow responsive, we will use a mixture of JavaScript and CSS techniques. The fabulous photography used in the demo is by Bartek Lurka and it is licensed under the Attribution-NonCommercial-NoDerivs 3.0 Unported License. So, let’s do it! The Markup We will create two unordered lists, one for the main slider and one for the thumbnail navigation beneath the large image. The list for the thumbnail preview navigation will contain an absolute element (the first list element with the class ei-slider-element and the thumbnail list elements which consist of an anchor and an image (the thumbnail). Now, let’s add the style. The CSS First, we will define the style for the main wrapper. The JavaScript

jquery.mb.bgndGallery | Pupunzi With this jQuery plugin you can make suggestive slide show of images as background of your page; the images will adapt their size to the window size fitting always at the best. You can either navigate the gallery with your keyboard or with a control panel displayed where you whant in the page. Help Pupunzi‘s development! see the demoread the doc What’s new in 1.9.0 : Bugfix: just fixed a bug with the changeGallery method that didn’t return the new array correctly. What’s new in 1.8.9 : Added two new methods: addImages(Array, goto, shuffle) and removeImages(Array). What’s new in 1.8.8 : Updated the mb.CSSAnimate and the mb.browser components used by this plugin. What’s new in 1.8.5+ : Feature: Added a thumbs option to create a thumbnailed navigation bar. What’s new in 1.8.0 : Bug-fix: solved a bug that was afflicting the play if the next or the prev button was pressed multiple time. What’s new in 1.7.5 :

4 Ways to Start a Small Business Edit Article Setting Out the BasicsWriting a Business PlanCovering the Legal SideManaging Your FinancesMarketing Your BusinessLaunching your Business Edited by Ben Bardot, Elizabeth Douglas, Aunt B., Ben Rubenstein and 100 others Are you one of those who dream of owning your own business? Ad Steps Part 1 of 6: Setting Out the Basics 1Have an idea. 5Choose wisely. Part 2 of 6: Writing a Business Plan 1Create a business plan. 8Cover the financials. Part 3 of 6: Covering the Legal Side 1Consider finding an attorney or other legal advisor. 3Form a business entity. Part 4 of 6: Managing Your Finances 1Cover your startup costs. 7Find a way to get paid. Part 5 of 6: Marketing Your Business 1Get a website. 5Implement your marketing and distribution plans. Part 6 of 6: Launching your Business

IxEdit Fullscreen Background Image Slideshow with CSS3 Happy new year, everybody! Today we will create a CSS-only fullscreen background image slideshow. We'll create different image transitions and also make a title appear using CSS animations. View demo Download source Happy new year, everybody! The images are by Mark Sebastian and they are licensed under the Creative Commons Attribution-ShareAlike 2.0 Generic License. Note that this will only work in browsers supporting CSS animations. This tutorial is a part of our latest CSS3 experiments; you can find more of those here: The Markup We’ll use an unordered list for the slideshow and we’ll add a span for each image and a division with a heading: <ul class="cb-slideshow"><li><span>Image 01</span><div><h3>re·lax·a·tion</h3></div></li><li></li><li></li></ul> The spans are going to be the elements that will have the background images of the slideshow. The CSS Let’s style the unordered list first. The animation for each span will last 36 seconds and run an inifinite number of times. Demos

Portfolio Zoom Slider with jQuery In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin. The idea is to give the user the option to view details of […] View demoDownload source In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin. The idea is to give the user the option to view details of a portfolio item by zooming it on hover, and to allow a full view by clicking. When integrating jQuery scripts, it sometimes happens that there are conflicts, be it because of some shared attribute or because of some specific structure that is needed by each jQuery plugin. So, let’s start with the markup! The Markup For each item we will have a div element. Let’s look at the styling. The CSS The JavaScript

9 Inspirational Website Effects Deconstructed As you may know, there are lots of great tutorials out there which can definitely help you practice, learn and achieve amazing results. The good thing about having so many tutorials to learn from is precisely that – you have a large variety of sources to choose from. Sometimes though, the tutorials aren’t clear, or difficult to understand or you just can’t apply it in the real world. Have you ever come across a website with such a great design or effects that your inner voice screams wow, making you wonder how it would be possible for you to recreate the effect? So let’s get started! 1. Click the image above to visit the Nike website and scroll-down the page. How to recreate Ian Lunn wrote an amazing tutorial on how to recreate the Nike’s Parallax Effect. 2. Yess BMX uses one of my favourite functionalities on a website which is mouse drag. Dragdealer is a drag-based JavaScript component that embraces endless front-end solutions. The solution is called Dragdealer. 3. 4. 5. 6. 7. 8. 9.

Related: