background preloader

Tutos divers

Facebook Twitter

A jQuery slideshow plugin. Light Trails Bokeh Blossoms Funky Painting Vintage Chandelier Why Craftyslide?

A jQuery slideshow plugin

Craftyslide was created first and foremost as an experiment, but secondly out of frustration with many plugins being written today. I found many slideshow plugins too bloated for my needs and code supplied was often superfluous and non-semantic. This prompted me to go about writing my own plugin, with the result being Craftyslide. Usage Using Craftyslide on your site is easy. Files to include: Basic initialization: <script> $("#slideshow").craftyslide(); </script> Show CSS Show jQuery Options width (number) Set a custom width for your slideshow. height (number) Set a custom height for your slideshow pagination (true/false) Select whether to display pagination or not. Fadetime (number) Define the fade animation speed of slides. Create Image Slider (Photoshop & jQuery) Undoubtedly, image slider is one of the most commonly used elements in the business web design, due to its relatively large size that is able to draw the visitor’s attention once they arrive the site.

Create Image Slider (Photoshop & jQuery)

Though the web has started to rethink about the usability of the image slider, it’s still considered as a must-learn for the newcomer of the web design industry. In this web design tutorial, we will learn to create custom image slider above using Photoshop, which you can preview the final result from here. Not only will we illustrate it in Photoshop, we will also turn it into a functional design by converting it into HTML/CSS and adding jQuery for its awesome sliding effect. Sounds like a lot of complicated bits involved, but in fact it’s pretty straightforward and very easy to understand, let’s get started then!

More interested about adopting an image slider and customize it on the way? Getting Started For this tutorial you will need the following resources: Part I – Designing Image Slider <! jVectorMap. Vertical Sliding Panel. More and more we see people using horizontal sliding panels on their websites.

Vertical Sliding Panel

And they usually look very nice! Some will put a contact or login form in there, others will put some information about them and their website, or even things like a tag cloud or social networking buttons. Horizontal sliding panels are great for many situations, but like everything else, they’re not always ideal. Alsacréations. TUTO . com. Codrops. A proof-of-concept effect recreation of the animation seen in a prototype app by Marcus Eckert.


The idea is to flip a grid item in 3D, expand it to fullscreen and reveal some associated content. We've created two demos with a vertical and a horizontal rotation. read more Some inspiration and ideas for item transitions considering different scenarios and use cases, including a small component, a full-width image header and a product image with a transparent background. State transitions are done using CSS Animations. read more A tutorial on how to recreate the slideshow seen on the FWA landing page with 3D effects involving random animations. read more A set of simple stack effects for inspiration.

The website of Carl Philipe Brenner has some very creative and subtle animations and today we want to explore how to recreate a border animation effect using CSS transitions on SVG lines. read more. Elastic Image Slideshow. Circular Content Carousel. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.

Circular Content Carousel

I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;

On-Scroll Sliding. After getting the request, we are going to show you how to create a "slide-in on scroll" effect.

On-Scroll Sliding

You've probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from "outside" of the page to the center when they are in the viewport. Contact Form with jQuery. Here’s an implementation of a contact form with PHP and jQuery.

Contact Form with jQuery

Usually, one would only want the message posted by the user to be sent to an email address. This script does that and also saves all these messages in the database for the admin to keep track of them. The table […] View demoDownload source Here’s an implementation of a contact form with PHP and jQuery. The table to store this data is the following: CREATE TABLE CONTACT( pk_contact INT UNSIGNED NOT NULL auto_increment, name VARCHAR(120) NOT NULL, email VARCHAR(120) NOT NULL, website VARCHAR(120) NOT NULL DEFAULT "", message VARCHAR(300) NOT NULL, added_date TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, primary key(pk_contact) )type=innodb DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;