はてなブックマーク

Simply hover over the social media icons below the see the beautiful effect. The first example is created using pure CSS, and can only be fully viewed using -webkit based browsers (like Chrome and Safari) and Firefox 4. Animations are done using CSS. The second example uses the same HTML, some of the CSS from the first example but uses jQuery for the animations. This is added for all non-webkit br

Hello, And welcome to the demo section of Marcofolio.net. Here are live demo's located of all the scripts and other things I place online. Don't forget to read the article if you want more information and modifications.

The demo you find on this page shows an animated 3d helix using nothing but CSS3. Take note this technique only works on the latest version of Apple Safari. It even works on Safari for iOS (iPod, iPhone and iPad), but only shows the first animation once since :hover isn't supported there. Simply hover over the image below to see the 3d helix animation take place. Keep in mind this is one of the mo

Wicked CSS3 3d bar chartnow with animation Marcofolio.net Apple products iPhone 80,1 MacBook 102,6 iPod 198,4 Cinema Display 38,2 Mac Mini 55,6 Numbers in millions sold *Numbers are fictional

This example page shows a simple, yet powerful and effective colourful rating system. It uses some CSS3 properties for the rounded corners and jQuery to handle the events. The jQuery Color plugin is utilized to animate the colours. Simply hover over the ratings below to see the effect. Don't forget to visit the article that includes the tutorial on how this technique works and to download the sour

Here's an example of pretty powerful CSS3 animation and 3d effects. Using the perspective, transform and transition properties, we can create a 3d animation effect. Simply hover over the movie posters below to see the effect in it's full glory. Just make sure you're running the latest version of a -webkit based browser (Apple Safari or Google Chrome) to see the effect. If you don't have any of tho

Above, you find an example of a beautiful advanced background image slideshow, recreated after the effect as seen on the website from Philadelphia. It features changing text and playback controls. When the animation doesn't seem smooth, the images might not be loaded. This script can perfectly be combined with an image preloading plugin to get rid of this effect. This technique heavily relies on j

jFancyTile is a jQuery plugin to show a slideshow in a beautiful, mosaic kind of way. It's very dynamic and easy to use. Make sure you check out the article, download the source and learn how it works! Options / use: Make sure your HTML looks like the following: <div id="selector"> <ul> <li><img src="images/img01.jpg" alt="Title 01" /></li> <li><img src="images/img02.jpg" alt="Title 02" /></li> <!

jQuery DJ HeroUseless CSS3 and jQuery fun Marcofolio.net

The menu that you see below is a very fancy one and showing some great use of jQuery and CSS3. Techniques like these kinda make Flash obsolete and was created by Marcofolio.net. This is just another one of those crazy Proof of Concepts that could be used when CSS3 will be an actual web standard. Sadly, only browsers that support the -webkit prefix in CSS (Safari and Chrome) show the full effect of

Below, you'll find two columns. The left column shows five kind of CSS3 animations, the right column shows the same kind of animations, but done with jQuery. Hover the elements (or click in the accordion) to activate the animation. Click on the "Gear" icon to view the code behind it. Please note that the CSS3 animation examples only work on webkit based browsers. For the time being, this simply me

Styling your listsusing only CSS Marcofolio.net List #1 : Simple navigation <ul> The Netherlands is a country in Northwestern Europe, constituting the major portion of the Kingdom of the Netherlands. The United States of America is a federal constitutional republic comprising fifty states and a federal district. The Philippines officially known as the Republic of the Philippines, is a country in S

Coloseum in Rome Vatican Forum Romanum Fiat 500 - Typical Italian car My girl and me in Florance Venetian Gondolas Delicious pizza - the Italian food Swimming pool near our house Bridge in Florence - Ponte Vecchio Leaning Tower of Pisa

Hi! This is a demo page from Marcofolio.net. This demo belongs to A parallax illusion with CSS: The Horse in Motion. Resize your browser, changing only the width. While you resize, you'll be able to see an optical illusion. It'll seem as if the horse is running. This technique also works on the cover of the book Magic Moving Images. Go to the article and download the source to implement it on your