HTML5 Parallax Slider

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.

$63.00
- OR -
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


Videos


  • Using Dynamic Data in HTML5 Parallax Slider
    – HTML5 Parallax Slider with dynamic data from HTML5 Data Bindings
  • Using HTML5 Parallax Slider on Responsive Bootstrap 3 Pages
    – Learn how to use Parallax Slider on responsive pages
  • Using Nivo Slider within HTML5 Parallax Slider
    – Add Nivo Slider with images within Parallax Slider
  • Combining Horizontal and Vertical Slides
    – Horizontal and vertical sliding elements in each of your slides
  • Using DMXzone Google Maps with HTML5 Parallax Slider
    – Learn how to use Google Maps with HTML5 Parallax Slider
  • Basic Usage of HTML5 Parallax Slider
    – Learn how to use the HTML5 Parallax Slider functionality
  • Creating Multiple Slides at Once
    – Add multiple slides with a single move in HTML5 Parallax Slider
  • Controlling HTML5 Parallax Slider with Control Behaviors
    – Control HTML5 Parallax Slider using Dreamweaver Control Behaviors
  • Using HTML5 Parallax Slider Behaviors
    – Learn how to connect HTML5 Video Player to the HTML5 Parallax Slider
Requirements
Type: Behavior
License: External link
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.3

  • Included the latest jQuery 1.11.1
  • Improved for Dreamweaver CC 2014
  • Improved for DMXzone Extension Manager

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 most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Place your review about HTML5 Parallax Slider




You must me logged in to write a review
Reviews

Be the first to place a review