Back to Top
The nuts and bolts for
Creative web development

HTML5 Parallax Slider

“Slide any content and create stunning 3D depth illusion”

Create stunning presentations with the HTML5 Parallax Slider. Divide your content into different slides and add multiple elements in each one to create awesome 3D depth illusion for your users, fully visual within Dreamweaver. Add any content in your slides like images, text, video, and any HTML content and more. The extension has full touch support so you can swipe between slides with your fingers when you are using mobile devices.

Choose one of the 7 designs or just customize them through the CSS to fit your page. The integrated DMXzone Image Resizer will help you set all your images in one size. Choose the duration of the slides as their transition - vertically or horizontally. Add as many elements as you need in every slide and adjust their position by dragging them fully visual in Dreamweaver design view. You can easily arrange the order of appearance and time transitions to create stunning 3D depth illusion effect.

With the Behavior Connector you can combine the HTML5 Parallax Slider with other DMXzone extensions such as CSS Image Gallery, HTML5 Video Player, HTML5 MP3 Player, HTML5 3D Flipping Gallery and many more.

Features

  • Present your content in amazing Parallax slides - Create stunning presentations and organize your content slide by slide.

  • Awesome 3D depth illusion effect - Add multiple elements in every slide and create a 3D feeling for your customers.

  • Add any content - In your slide you can add whatever you want - images, text, video, HTML tags, URLs and more.

  • CSS3 Transforms - Uses CSS3 Transforms to deliver smooth animations with hardware acceleration on mobile devices and the latest browsers that support the CSS3 Transforms.
  • Full touch devices support - You can slide by swiping with your finger touch when using a mobile device.
  • Full visual drag & drop design in Dreamweaver - Simply hover over the container, click and drag it in order to move it.

Parallax Slider General Properties



  • Customize your slides - You can add and remove slides, set the starting slide and rearrange the order. Adding and deleting images takes only a second or you can just import a whole folder. It has integrated DMXzone Image Resizer to help you with your images.
 
 
 
  • 7 Amazing designs - Choose one of 7 stunning designs which are CSS based, so if you need you can customize them to meet your needs.
 
    • Default
 
    • Dark
 
    • Ebony
 
    • Fancy
 
    • Fresh
 
    • Light
 
    • Nice
 
 
  • Set direction - Choose how you slides slide - horizontally or vertically.
 
  • Slide duration - Set the duration for each slide before going to the next one.
 
 
  • Effect duration - Use this option to set the time transition between the slides change.
 
 
  • Control the slides - Choose how your slides will be controlled - allow keyboard navigation, put auto play, pause on hover and more.
 

Paralax Slider Element Properties


 
  • Add Elements - In every slide you can add as much elements as you want. Inside every div container you can use any content - images, video, text, HTML tags, URLs and more.
 
    • Z-Index - Slide elements are easily controllable by the Z-index! The higher the Z-index, the more an element is on the foreground and the faster it slides! The lower the Z-index , the more an element is on the background and the slower it goes! All calculated and animated automatically for you!
 
    • Speed - Set the time when your element will show on  the slide. For example if you put 2000ms the element will appear 2000ms after the Slide comes on screen.
 
    • Add images - Add images to the element.
 
    • Background color - Choose a background color for your element.
 
    • Transitions - Control the appearance and the outgoing for each element in your slide.
 
    • Set size - Set the size for the div element.
 
    • Position - Set the position for the element in the slide by entering values or just drag the container.
 
    • Element ID - Pick up a name for your div.
 
    • Full support for the DMXzone Behavior Connector - Bind your elements with other DMXzone extensions to trigger on show/hide element.
 
 
  • Container size - Set the dimensions for the slides.
 
 
  • ID name - Set the ID for your slider.
 
  • Full support for the DMXzone Behavior Connector - Set slide change to be a trigger and attach other DMXzone extensions.
 
  • Fully controllable by behaviors - Set different elements to control the Parallax slider with one of these actions - Go to next, play, stop, go to previous and jump to slide.
 
 
  • Great Dreamweaver design preview - You can preview your parallax slider directly in Dreamweaver and see how it looks.
  • Powered by HTML5, CSS3 and jQuery - Full cross-browser support to deliver the best user experience across all browsers and devices! Uses No Flash at all!

Showcases


  • Online Bicycles Catalog Showcase

    For this showcase we used HTML5 Parallax Slider with four static slides in it. Each slide shows a record from four different datasets - dynamic image, name, category and text. In order to connect our ...

  • Bootstrap 3 Landing Page Template Showcase

    This showcase has been created with the Bootstrap 3 Landing Page Template and customized with DMXzone Bootstrap 3 and HTML5 Parallax Slider. The slider is visible on any screen device except for ...

  • Web Agency Showcase

    For this showcase we used DMXzone Parallax Slider in order to create a stunning presentation of the agency offered services.

  • Mountain Equipment Showcase

    For this showcase we used one of the predefined HTML5 Parallax Slider designs and used four text and image elements that slide with different duration in order to create this amazing 3D depth ...

  • Travel Agency Showcase

    For this showcase we used the HTML5 Slideshow to display beautiful images on the background and two HTML5 Parallax Sliders for the content. One is vertical and the other one horizontally oriented.

  • Creative Studio Showcase

    For this showcase we used a vertical and a horizontal HTML5 Parallax Sliders in order to design a stunning website for a creative studio. Within the HTML5 Parallax Slider we have a DMXzone Nivo ...

  • Seasonal Photography Showcase

    For this showcase we only used the HTML5 Slideshow for the background images, which are coordinated with the HTML5 Parallax Slider once on the foreground through the behavior connector.

  • IT Company Website Showcase

    For this showcase we used the HTML5 Slideshow that's connected with the HTML5 Parallax Slider through the behavior connector and both together bring an amazing user experience when browsing the ...

  • Online PayPal Store Template Showcase

    For this showcase we used the Online PayPal Store Template in order to create web merchant for sports equipment, with great product presentation and easy navigation.

  • Amazing Game Store Showcase

    In this showcase we used the DMXzone Supersized for the background images, which change along with the HTML5 Parallax Slider elements, when clicked to match the game info and image. The purchase ...

  • Furniture Store Showcase

    For this product page showcase we used 5 DMXzone extensions to complete it and make it fully functional. the discounted items are presented in a HTML5 Parallax Slider with button navigation. The ...

  • 3D Flipping Gallery within a Parallax Slider Showcase

    In this showcase we added four HTML5 3D Flipping Galleries as elements in the HTML5 Parallax Slider in order to design even greater 3D depth illusion. Also we added DMXzone Accordion on the right ...

  • Car Presentation Showcase

    For this showcase we used the Parallax Product Presentation Template that features the HTML Parallax Slider and the free DMXzone LESS CSS Compiler, which allows you to customize the CSS easily.

  • Design Studio Showcase

    For this showcase we used two DMXzone extensions - the HTML5 Parallax Slider and the HTML5 Image Enhancer. With the first we made a slideshow with 3 slides and added different images and texts which ...

  • Dresses Online Store Showcase

    For this showcase we used our Simple Online Store Template. On the Home Page we made two slides with an image and a text created with the HTML5 Parallax Slider and below them added some images for ...

  • Flower Shop Showcase

    For this showcase we used only two DMXzone extensions in order to create a simple front page for an online flower shop. The HTML5 Parallax Slider is presenting images with content and the Universal ...

  • Facebook Video Presentation Showcase

    For this showcase we designed a Facebook Fan Page with our Dreamweaver extension of the same name. The video presentation is executed with the HTML5 Video Player and wrapped up in a HTML5 Parallax ...

  • Forecast Showcase

    For this showcase we used our HTML5 Parallax Slider in order to create three sliding slides. In each one we have four elements with different text, images and background colors. The speed and ...

  • Spa and Relax Center Showcase

    To show images of our Spa center, we used the HTML5 Parallax Slider extension and made four slides with different images and elements inside them. Then we added music to every slide with the HTML5 ...

  • Snowmobiles Showcase

    For this showcase we made e simple page to introduce our products. With the help of our HTML5 Parallax Slider extensions, we were able to create four slides. In every slide we have an image and four ...

  • Cocktails Showcase

    For this showcase we made a simple interactive page for our products, using the HTML5 Parallax Slider. It contains three slides for each cocktail recipe with an image and text for the ingredients. ...

  • Design Studio Home Page Showcase

    For this showcase we designed four slides with background images and numerous elements that slide with different time delay in order to create awesome 3D depth effects. The HTML5 Parallax Slider is ...

  • Balloon Festival Showcase

    For this showcase we added 3 slides with a few elements. Each of them has customized transition in order to simulate a 3D effect along with the other elements in the slide.

  • Parallax Sliding Wines Showcase

    For this showcase we made a simple page to present variety of wines. With the help of our HTML5 Parallax Slider, we created a container with three different slides. In every slide we have three ...

  • Winter Shop Showcase

    For this showcase we added 3 text links, which navigate each of the HTML5 Parallax Slider slides to the corresponding category in the shop. It's easily done through the Behavior connector.

  • HTML5 Parallax Slider Preview Showcase

    For this showcase we added 3 slides to our HTML5 Parallax Slider with different content. The first one contains images and text, the second one - only a background image and the third - a few ...

Videos


Requirements

Type: Behavior
Product: Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CC
Screen Shot: External link
Tags: html5, parallax, slider, dreamweaver, extension, mobile support


History

Version 1.0.2

  • Full compatibility with the new DMXzone Bootstrap 3
  • With Bootstrap 3 you can now create responsive Parallax Sliders per mobile device view
  • Included latest jQuery 1.10.2
  • Various minor bug fixes and optimizations

Version 1.0.1

  • Full Dreamweaver CC and Extension Manager CC support
  • Included new Behavior Connector with restyled UI and better Mac OSX Support
  • Updated the automatic file copy and update component for better Dreamweaver CC support
  • Improved compatibility with the latest jQuery
  • Included latest jQuery 1.10.1
  • Improved Windows 8 compatibility

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – DMXzone.com, which is visited daily by more than 30.000 people and is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Share this Article