CU3OX : Free 3D Flash Gallery : 3D Flash Slideshow Parallax Scrolling and Its Usage in Web Design The parallax effect, also called parallax scrolling, is a special technique used in computer graphics at first, where background images move by the camera slower than foreground images. This is the actual concept where websites with parallax scrolling started. It was widely used in the gaming industry more than 10-15 years ago and it is still used today in different domains. In the past years the parallax effect started to be used widely in web design. The design concept started to be used because it is actually quite cool. Parallax Scrolling Examples Although this is usually the case, utilizing the parallax scrolling effect doesn’t have to limit you to a fake 3D effect. When they see it for the first time, people use to think that the effect is nice. Performance Issues Although the effect looks brilliant, there are some downsides to it, such as the performance issues. This JavaScript performs heavily because it has to manipulate the position of all the elements throughout the page.
Merging Image Boxes with jQuery Today we will show you a nice effect for images with jQuery. The idea is to have a set of rotated thumbnails that, once clicked, animate to form the selected image. You can navigate through the images with previous and next buttons and when the big image gets clicked it will scatter […] View demoDownload source Today we will show you a nice effect for images with jQuery. When the window gets resized, the positions of the thumbnails will automatically adapt to fit the screen. The beautiful photographs are by tibchris and you can find his stunning works on his Flickr page: When navigating through the full images, we will reveal the next or previous image by removing the current image box by box. Have fun with the demo and download the ZIP to experiment with this cool effect! View demoDownload source
Rotating Image Slider with jQuery In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will […] View demo Download source In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. We’ll use the jQuery 2D Transformation Plugin for rotating the images and the jQuery Mousewheel Plugin by Brandon Aaron for the mousewheel control. The beautiful photos are by Andrew and Lili and you can see their Behance profile here: The images are licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License. Allrighty! The Markup First, we will wrap all our slider elements in a wrapper with the class “rm_wrapper”: The CSS The JavaScript
Slicebox - 3D Image Slider Creative Lifesaver Honest Entertainer Brave Astronaut Affectionate Decision Maker Faithful Investor Groundbreaking Artist Selfless Philantropist Example 2: Slideshow with play & pause and horizontal slices
Bomb Girls - GlobalTV.com: Official Site of Global Television Bomb Girls content provided by: Shaw Media Website Producer, GlobalTV.com: Lori Harito Manager, Products, Dramatics & Factual: Zach Feldberg Managing Editor, Branded and Original Content, Shaw Media: Marty Flanagan Video Producer, Shaw Media: Dave Kim Video Producer, Shaw Media: Laura Purchase Manager Video Distribution, Shaw Media: Roy Dos Santos Development Team Lead, Shaw Media: Ehsan Motamedi Sr Quality Assurance Analyst, Shaw Media: Stan Loundine Production Executive, Shaw Media: Susan Alexander Senior Director, Original Drama Content: Tara Ellis Brand Associate, Global TV: Jordena Kraut Publicity Manager, Global TV: Grace Park Website created by: Secret Location The Singapore Sling 2 ounces 3/4 ounce 2 teaspoons 2 teaspoons 2 ounces 3/4 ounce 2 dashes 1 dash to taste Combine all except soda water in an iced cocktail shaker. .75 Cents Gin Cherry Brandy Benedictine Cointreau Pineapple Juice Fresh Lime Juice Grenadine Angostura Bitters Soda Wate The Gimlet Zombie Old Fashioned Kir Royal
26 Useful jQuery Navigation Menu Tutorials - Web Design Blog – DesignM.ag Get the FlatPix UI Kit for only $7 - Learn More or Buy Now In this post, I have collected 26 useful jQuery navigation menu tutorials. Enjoy! Mega Drop Down Menus w/ CSS & jQuery Animated Navigation with CSS & jQuery Create Simple Dropdown Menu Using jQuery Collapsing Site Navigation with jQuery Use Sprites to Create an Awesomeness-Filled Navigation Menu Thumbnails Navigation Gallery with jQuery Sexy Drop Down Menu w/ jQuery & CSS How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery Slide Down Box Menu with jQuery and CSS3 Awesome Bubble Navigation with jQuery Beautiful Background Image Navigation with jQuery Fancy Apple-Style Icon Slide Out Navigation Halftone Navigation Menu With jQuery & CSS3 Beautiful Slide Out Navigation Revised Animated Navigation Menu with CSS3 Create animated vertical Menu Using Jquery Create Bounce out Vertical menu with jQuery jQuery Dropdown Navigation in WordPress Create an apple style menu and improve it via jQuery How to Build a Lava-Lamp Style Navigation Menu
Parallax Content Slider with CSS3 and jQuery Easy management Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. Read more Revolution A small river named Duden flows by their place and supplies it with the necessary regelialia. Warm welcome When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Quality Control Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
joelambert/Flux-Slider - GitHub tubular, a YouTube Background Player jQuery Plugin | Sean McCambridge Design Video controls:Play | Pause | Volume Up | Volume Down | Mute Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Just attach it to your page wrapper element, set some options, and you're on your way. $(page content wrapper element).tubular(options); Tubular's hello, world Assuming you're happy with the default options and you use a wrapper div with the id of wrapper, you simply attach to your wrapper div and specify the video you want to load: and Presto! A word of caution Tubular does not design your website for you. Options and defaults ratio: 16/9 // usually either 4/3 or 16/9 -- tweak as needed videoId: 'ZCAnLxRvNNc' // toy robot in space is a good default, no?
Overlay-like Effect with jQuery A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. 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. Vapour around me 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. O my friend -- but it is too much for my strength -- I sink under the weight of the splendour of these visions! I am so happy, my dear friend I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I sink under the weight
Swiper - Most Modern Mobile Touch Slider Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity. Swiper, along with other great components, is a part of Framework7 - full featured framework for building iOS & Android apps. Swiper is also a default slider component in Ionic Framework Powered With Top Notch Features Library AgnosticSwiper doesn't require any JavaScript libraries like jQuery, it makes Swiper much more smaller and faster. Buy Us A Beer If you like Swiper you can always buy us a bottle of a nice beerso we can continue developement of such amazing product and to keep it always free Donate
BigVideo.js - The jQuery Plugin for Big Background Video The jQuery Plugin for Big Background Video (and Images) This plugin makes it easy to add fit-to-fill background video to websites. It can play silent ambient background video (or series of videos). BigVideo.js is built on top of Video.js from zencoder. You can read about how to use BigVideo.js below. DOWNLOAD: zip tar examples bower install BigVideo.js Setup BigVideo.js uses the Video.js api. To simply play a video that takes up the entire browser window (like in this example), do this: For crossbrowser fallbacks, you can include a source order with different video formats. Ambient Video To play silent video in the background of a page (like in this example), use BigVideo’s ambient setting: Or play a series of ambient background videos (like in this example) Keep in mind that mobile devices do not allow video autoplay. Video.js Because BigVideo.js is built on top of Video.js, you can use the Video.js api. BV.getPlayer().pause(); Tips For best results, I recommend using Vimeo.
Fullscreen Gallery with Thumbnail Flip In this tutorial we will create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where we are navigating to. We will add navigation […] View demoDownload source In this tutorial we will create a fullscreen gallery with jQuery. We will be using Flip! And we will also be using the jQuery Mousewheel Plugin by Brandon Aaron. The beautiful images are by talented Polina Efremova. Let’s get started with the markup! The Markup First, we will add a loading element that we want to show when the images are being loaded: Then, we will create a container for all the images that will be shown in fullscreen: We will use the “longdesc” attribute to indicate the path to the respective thumbnail. Next, we will add a container for the contents that are shown on the left bottom corner of the screen. Let’s take a look at the style. The CSS The JavaScript