Impress at Presentations with Impress.js – AndiSmith.com
(UPDATED for Impress.js v0.3) The other day I mentioned on Twitter that I was playing around with Bartek Szopka's Impress.js library to write a presentation and it seemed to gather some interest. I then gave the presentation, and that gathered some more interest; so I thought I would write a short blog post about how to use Impress.js. For those of you who aren't aware - Impress.js is a web-based presentation framework which utilises CSS3 transitions and transforms to produce some impressive effects. Whilst it's primarily use is for presentations, it can also be used for simple web pages due to it's HTML/CSS/JavaScript roots. So how do you use it? Content, Content, Content The most important part of the process of producing any presentation is the presentation itself. Your slides should still follow the usual important rules of presentations - a block of text really isn't going to look any better with Impress.js than it is in PowerPoint or Keynote. Layout Initial Setup <! Position Options
Using Impress.js : Tony Thomas
March 9, 2012 11:08 am Published by admin Update II: I updated the init method needed in the HTML. Update: There is at least one WYSIWYG impress.js editor available now. I came across Impress.js a while back and I was, well, impressed. It makes sense to do presentations on the web, given the powerful animations and transitions available in modern browsers. Right now you can only learn how to use Impress.js by reading the comments and experimenting. The first thing is that you have to have a story to tell. Assuming you know what you want to say, let’s move on. First you’ll need to download the JavaScript. The slides need to go into an element with the id of “impress.” Options Now things get interesting. You can give you slides ids so you can link to a particular slide. The next dimension we can control is scale: Note the data-scale attribute above. We can also control rotation: For this, use data-rotate. And now we go 3d: Finally, we can control rotation along axes: Those are the options.
Fullscreen Slit Slider with jQuery and CSS3
A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements. View demo Download source In this tutorial we’ll create a fullscreen slideshow with a twist: we’ll slice the current slide open in order to reveal the next or previous slide. We’ll be using jQuery cond, jQuery plugin by Ben Alman for chainable “if-then-else” statements. The animal icon font that we’ll be using is by Alan Carr and you can find it here. The images in the second demo are by Majownik and they are licensed under a Creative Commons Attribution License. Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. Let’s start with the HTML. The Markup Every slide will also have some data-attributes that we will use in order to control the effect for each slide. The CSS
CSS3 Responsive Slider / Carousel Using Radio Buttons - noJS
Select catcher Created by Ian Hansson (@teapoted) Art from Brendan Zabarauskas (@bjzaba_). Icons from the iconSweets set. Browser Support: Best In Test: Firefox (transition performance) Full Support: Chrome, Firefox, Opera, Safari (latest versions of all browsers) Partial Support: IE9 (Functional, but does not support transitions) *No JavaScript Functionality (1 compatability fix though) iOS devices don't handle labels properly. You can view this page without the js iOS fix here. How Does It Work? The actual slider is much like any JavaScript slider. To save our input we are using radio buttons. We put the radio buttons at the top so when they are :checked we can use a general sibling selectors (~) to change our slider. That is all the essential CSS, the other gaff is just styling and animation. Created by Ian Hansson (@teapoted), Feb 2012.
bartaz/impress.js
6 Plugin for Impressive HTML Slideshow And Presentation - Javascript
Making a presentation with HTML, CSS and Javascript is no longer an impossible task. With the development of CSS3 and support on most modern browsers, the slide transition no longer limited to fading, sliding, blinding. It allows us to achieve cool effects such as rotation, 3D transform and transition. The following is 6 javascript plugins that allow you to do that. You will need latest browsers that support CSS3 3D transform. impress.js It’s a presentation tool inspired by the idea behind prezi.com and based on the power of CSS3 transform and transition in modern browsers. About Kevin Kevin Liew is a web designer and developer and keen on contributing to the web development industry. CSS4 Sneak Peak
Slicebox - 3D Image Slider
Creative Lifesaver Honest Entertainer Brave Astronaut Affectionate Decision Maker Faithful Investor Groundbreaking Artist Selfless Philantropist Example 1: Default settings
Rhinoslider: The most flexible jQuery slider/slideshow
5 of the Best Free HTML5 Presentation Systems
I have a lot of respect for Microsoft PowerPoint. It may be over-used and encourages people to create shocking slide shows, but it’s powerful and fun. I have just one criticism: all PowerPoint presentations look the same. Fortunately, we now have another option: HTML5. it’s quicker to add a few HTML tags than use a WYSIWYG interfaceyou can update a presentation using a basic text editor on any devicefiles can be hosted on the web; you need never lose a PPT againyou can easily distribute a presentation without viewing softwareit’s not PowerPoint and your audience will be amazed by your technical prowess. Admittedly, HTML5 presentations are not quite as powerful: you require web coding skillspositioning, effects and transitions are more limitedfew systems offer slide notes (it’s a little awkward to show them separately)it’s more difficult to print handouts Here are the best HTML5 presentation systems I’ve found. Reveal.js This is my current favorite. Download the reveal.js files… Impress.js
TouchTouch – A Touch Optimized Gallery Plugin
Martin Angelov I want to share a little experiment with Tutorialzine readers – TouchTouch. It is a jQuery plugin that turns a collection of photos on a webpage into a touch-friendly mobile gallery. It works on all major browsers (except for IE7 and below) and most importantly is specifically designed with iOS and Android in mind. Highlights Smooth CSS3 animations and transitions;A responsive CSS interface that fills the screen and responds to changes in device orientation;Preloads photos only when they are needed;Supports swiping through photos;Displays onscreen arrows and listens for arrow key presses on desktop browsers; TouchTouch relies entirely on CSS3 for animations, which means that transitions are extra smooth on mobile devices (naturally, this also means that you won’t see any on older browsers). On the desktop, you get that same responsive interface and smooth animations. jQuery touch-optimized gallery How to use Using it is simple. $(function(){ $('#thumbs a').touchTouch(); });
