It only runs on CSS3-capable browsers, like Firefox, Chrome or Safari, but it’s really awesome, check it out! This example is created and coded by Jaume Sánchez using CSS3 3D Transforms, Javascript and HTML5 Canvas. This is a great example that highlights the possibilities of the new web technologies and what they could be used for.
It’s really exciting to see how CSS transforms allow you to change the position of the content without disrupting it’s normal flow. If you want to know more about how the clouds where created, here’s a great tutorial made by the author to explain how he made the clouds.
And, if you want to have more fun, you can use the CSS 3D example for creating and watching exciting explosions.
Are you passionate about music? Then you will love Jam with Chrome, a HTML5 sample by Google, where you can play musical instruments and jam with your friends. Let’s take a tour and see what makes this application so special.
After accessing Jam with Chrome, you can choose one of the 19 available instruments, let’s say electric guitar (which is my favorite). You can also find acoustic guitar, drums, keyboard and so on… Then the musical instrument of your choice will be displayed in a sufficient size so that you can play it with your keyboard or mouse. After you gain some experience you can flip to the advanced mode and you can even invite your friends across the world via email, Twitter, Facebook or Google+, to jam with you.
Let’s see how this feature was developed and how it makes use of the HTML5 capabilities. Although the graphics look fairly simple, the app is rather sophisticated. You can adjust the tempo and the key you are playing in, and you can choose from a number of autoplay options. Also, all these aspects must be synchronized and must respond in real time, in order for you to be able to hear the music exactly in the same time as your friends that jam with you.
The app uses the Web Audio API, a high-level JavaScript API for processing and synthesizing audio in web applications. It can be used with the canvas 2D and WebGL 3D graphics, and it’s a powerful modular routing system, witch is capable of dynamically mixing multiple sound sources. Jam with Chrome used WebSockets to emable real time colaboration, and brought the visual experience to life using the HTML5 Canvas.
Unfortunately, even if both Safari and Firefox have strong support for HTML5, this app works only in Google Chrome.
We love photography and lately we came across a lot of tools and products that can help a photographer create a great portfolio.
If you are a photographer and you would like to find the best way to display and advertise your work, you will need a photography portfolio. Here are some tools and information that may help you create a beautiful one.
You may notice that when it comes to online portfolios, it’s just not enough to have beautiful photos; you also have to find clever, beautiful and user-friendly ways to present them. A great design makes all the difference!
Grid galleries
One of the the best ways to catch the viewer’s attention with a photography portfolio is to create a grid gallery. Basically a grid gallery is an image-based grid that can list thumbnails. The main advantage is that you are able to create an impressive collage of your work.
Here’s an Infinite Photo Grid with Lightboxthat will make your photos look awesome! It uses an unique way of displaying your images, and it can be dragged indefinitely in any direction and new thumbnails will be displayed. There is a great chance that your portfolio will be noticed on a tablet or even a Smartphone, and this photo grid is tested on mobile devices. Here’s a demo, take a look and see how it looks and works, but of course it will look much better once you load your own photos.
Image sliders
Image sliders are also very popular within photography portfolios. They are user-friendly and they display images beautifully.
HTML5 Image Galleries & Sliders are more and more popular, and can be easily integrated in any website. Check out this a HTML5 XML driven slideshow gallery with thumbnails! It’s one of the most popular slideshows for photography portfolios, it’s easy to use, update and maintain and you don’t even need html knowledge to install it on your website.
Another great feature is that the gallery is resizable adjusting after the browser size, so your photos will appear the same for all your visitors, no matter what browser or resolution they use. Check out some live previews here.
If you’re just getting started, you may want to browse FWebDesign portfolio for even more amazing galleries. Get ready to have the coolest photography portfolio!
Here’s a great HTML5 Sample that caught my attention right away! WebCam Mesh is an application that projects the images recorded by a webcam into amazing visual effects based on the luminosity of the scanned pixels. WebCam Mesh is one of the most innovative and visually impressive applications that make use of the HTML5 canvas, giving users a really nice experience. Using WebGL, the application allows you to see 3D graphics in your browser without downloading additional software.
Webcam Mesh projects the recorded images into a WebGL 3D mesh, creating a 3D depth map by recording pixel brightness to Z-depth. Contrast and saturation effects where created using CSS3 filters.
Created by Felix Turner, the HTML5 Sample is available on the developer’s website. You can navigate the scene with your mouse and use scroll to zoom. A drop-down can be used to adjust different aspects like contrast or saturation.
This is a FLV player with HTML5 ready fallback coding which allows you to make sure everyone is able to watch your videos with no loss of quality. Flash videos will play on mobile devices, including iPhone and iPad. Easy setup, no ActionScript knowledge required. Check it out.
A powerful HTML5 plugin to help you display web content like a flipping magazine: ShineFlip. Notice this is not to view PDF files like an online magazine, but actual web content. And the beauty is you can customize the CSS styles!
It’s also amazing that it displays all sorts of content: text, images and videos. Allow users to browse images in a beautiful photo flipping album. Thanks to the HTML5 features, short video clips can be embedded in the page to give users a vivid experience.
It works across browsers ( IE9/Chorme/FireFox/Safari) and on mobile devices (iPhone/ iPad/ Android). No ActionScript knowledge/XML configuration required.
It’s definitely not easy to find the slideshow gallery that you need! If you are in search of one that displays the grid of thumbnails in an adaptable layout, and that opens the item in a flexible lightbox.. and that supports Vimeo and Youtube then do carry on reading ahead.
It has a fluid / flexible / responsive layout which means it’s adapting to the width of the structure you placed the grid into. The grid’s height is modified based on the number of thumbnails. You can control the size of the grid with CSS or JavaScript.
When a thumbnail of the grid is pressed it can open a new browser window or the lightbox which can host either an image or a video. The lighbox will always fill the available browser viewport, modifying its size according to the size of the image or video shown.
It was coded and optimized for mobile devices and it is 100% mobile compatible and of course it will run just as great on desktop computers including on older browsers like IE7 and IE8.
It has never been so easy to stream your audio online like now! With HTML5 you can enable native audio playback within the browser. We present you an HTML5 and jQuery Audio Player that you can also customize as you wish.
To enable it you’ll just have to add an audio tag with class named HTML5AudioPlayer and initialize the plugin, it’s that simple! It also has a Flash fallback if user’s system doesn’t support HTML5 audio tag.
HTML5 Audio Player comes in 6 different colors, with options of customization in CSS and with options of turning on or off the control buttons.
2012 was a year of change for interactive technology with many discussions on HTML 5 VS Flash. The industry is constinuously moving into other phases where more discussions occur so that these technologies will be increasingly well understood by a wider segment of the industry. Both HTML 5 and Flash are highly complex environments in which, on a daily basis, developers have to confront the challenges of executing interactive web experiences.
In this year, we have extended our business to cover more technologies as we completed the platform with unique HTML 5, WordPress, PHP, Javascript and jQuery components. Around 100 new galeries, audio video, banners, templates and other types of components from these new categories have been added in the past months.
So, we’d like to send congratulations and thanks to all developers and web designers that have contributed to FlashComponents.net to provide first class solutions that help our clients stay ahead of their competition. Also, we recently launched a new commission plan for exclusive and non-exclusive authors offering them the best author commissions on the web.
In 2013 we’ll continue bringing even more innovation, competitive products and features. The FlashComponents community is built based on genuine fellowship and cooperation between our members that are committed to showing people how interactive technologies can transform their web experience and engage their visitors more.
We wish you a very Happy Christmas with your loved ones. Have a great holiday and look forward to a very exciting New Year!
Featured this week are five products to suit various needs of FC.net users. We have a JQuery banner rotator to beautifully display images directing people to significant sections of your website. The HTML5 Audio Player ( mp3, ogg, acc, wav etc ) with playlist is great for those who want to add interactivity to their website. The music player comes in three variations for you to choose from so it can fit perfectly in your site.
Now, if you’re looking to countdown time on your website – perhaps to the New Year’s Eve? – then jQuery Countdown Timer is the component for you.
CSS Notification Box is a set of 10 easy to use notification boxes created with CSS to be used for letting know your website users what to expect next; the notifications could be messages about success, fail, info, warning, edit, lock, tip, download, chat, task.
When it comes to WordPress Themes, CafeHouse Restaurant has an elegant and easy to use admin panel, where you can customize colors, text, social media. Also via the custom templates you can organize your food and drink menu and photo galleries.
