Sélection de Slideshow et Carrousels - Ressources & Outils Cet article a 2 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 56 420 fois. Ayant récemment eu besoin de parcourir les ressources du web à la recherche d’une solution de slideshow simple et personnalisable, j’ai rencontré quelques bonnes choses. Essayons de classer ces ressources, mais ça ne sera pas toujours facile. Slideshow simple Basic Slider Plugin de jQuery – Gratuit Basic Slider est un plugin robuste permettant d’insérer dans chaque slide un contenu varié : image, texte, image légendée, vidéo, code HTML riche, etc. Voir les démonstrations Doc et téléchargement SlidesJS Plugin de jQuery – Gratuit SlidesJS est un plugin au design simple et élégant. Voir une démonstration Doc et téléchargement WOW Slider Plugin de jQuery – Gratuit (non-commercial), Payant (commercial, à partir de $69) Voir les démonstrations Téléchargement Slideshow responsive FlexSlider Voir la démonstration Le télécharger BlueBerry Voir la démonstration Le télécharger Swipe JS Skitter
Parallax.js | Simple Parallax Scrolling Effect with jQuery Installation Download and include parallax.min.js in your document after including jQuery. Useage Via data attributes To easily add a parallax effect behind an element, add data-parallax="scroll" to the element you want to use, and specify an image with data-image-src="/path/to/image.jpg". Via JavaScript To call the parallax plugin manually, simply select your target element with jQuery and do the following: Under The Hood What parallax.js will do is create a fixed-position element for each parallax image at the start of the document’s body. Due to the nature of this implementation, you must ensure that these parallax objects and any layers below them are transparent so that you can see the parallax effect underneath.
Best jQuery plugins for awesome parallax scrolling and custom scrollbars scroll-up-bar The scroll up bar is a jQuery plugin that hides the top bar when scrolling down, and show it when scrolling up. It’s specially useful on mobile interfaces to save some precious space. Created by Eduardo DownloadHomeExample View more → jQuery One Page Navigation Plugin | Trevor Davis Sep 26, 2010 When appropriate, I am a fan of the one-page sites. I really like the ones that add smooth scrolling and highlight the navigation depending upon which part of the page you have scrolled to. Here are a few examples: Brizk Design and Crush + Lovely. I wanted the page to scroll smoothly when the navigation was clicked, so I used the jQuery ScrollTo plugin. If you want to skip ahead, you can check out the demo and download the plugin from GitHub. The Markup I started with an unordered list for the navigation and a bunch of sections: <ul id="nav"><li class="current"><a href="#section-1">Section 1</a></li><li><a href="#section-2">Section 2</a></li><li"><a href="#section-3">Section 3</a></li></ul><div id="section-1"><strong>Section 1</strong><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. The JavaScript Then, I added jQuery, the ScrollTo plugin, and my plugin to the page: Options And that’s it.
Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development RAY - App Landing Page So, what is the secret of successful template design? First of all, it is its friendliness – both for the template’s owner and for his or her future targeted audience. UX and UI are not just empty phrases for us. It is very important for us that the user could understand correctly the message your project’s trying to say to him or her. But, correct giving of the information is just a half of success. Emotions that causes your project in visitor are no less important ticket to success.
Building Interactive Scrolling Websites with ScrollMagic.js There’s a ton of options for doing animations. I’ll cover some of the more various ones, but, first let’s do the most common one – “tweening” using the GreenSock Animation Platform. Tweening is what the GSAP calls their animations. We’re specifically using their TweenMax library. TweenMax is awesome because it encompasses all their various plugins and additions into one. TweenMax.to() This lets us create our most standard animations. You can get as infinitely creative as you want with this. You can do pretty much anything you would be able to do with CSS3 animations – colors, transforms, etc. TweenMax.from() This works exactly the opposite of TweenMax.to(). Here’s an example from one of the basic demos using the from() function instead: TweenMax.fromTo() This function is exactly what it sounds like. With both of these examples, if you remove the Scene’s duration, there will be no endpoint for the animation to stop. Staggering Additional Animations There’s even more things you can do.
DateTimePicker - XDSoft plugins, scripts, program, parsers Use this plugin to unobtrusively add a datetimepicker, datepicker or timepicker dropdown to your forms. It's easy to customize options. Source code on GitHub or download (zip). DateTimepicker Use mask DateTimepicker TimePicker DatePicker Inline DateTimePicker Dark theme How do I use it? First include to page css and js files Examples Simple init DateTimePicker Example # javaScript jQuery('#datetimepicker').datetimepicker(); Result i18n DatePicker Example # All supported languages here Only TimePicker Example # Date Time Picker start date # Date Time Picker from unixtime # Inline DateTimePicker Example # Icon trigger # Click the icon next to the input field to show the datetimepicker and handler onclick event jQuery('#image_button').click(function(){ jQuery('#datetimepicker4').datetimepicker('show'); //support hide,show and destroy command }); allowTimes options TimePicker Example # handler onChangeDateTime Example # minDate and maxDate Example # Use mask input Example # Set options runtime DateTimePicker #
3D Rotating Navigation in CSS and jQuery A 3D rotating navigation, powered by CSS transformations. Browser support ie Chrome Firefox Safari Opera 9+ Sometimes you just want your website navigation to be bold. Design agencies, for example, use their portfolio to show off their skills and push a little usability standards. Another good example is mobile apps: animated elements are key ingredients of the user experience. Inspiration for this nugget came from Taasky, a to-do iOS app with a great side navigation – that you can see in action on dribbble. The icons included have been created by the talented Vlad Cristea and can be downloaded for free on GraphicBurger. Creating the structure We created a <header> element to wrap the logo and the trigger for the rotating navigation (.cd-3d-nav-trigger) and a <main> element to wrap the main content. Adding Style To realise our animation, we used CSS3 Transformations applied to the <header>, <main> and <navigation> elements. Events Handling Dec 3, 2014Resource released by CodyHouse