Placed in: Home viagra australia
viagra online
viagra sale
cialis online
cialis australia
Animated fullscreen background image slideshow

Do you remember the Advanced jQuery background image slideshow I posted last year? Because of that tutorial, reader Evens sent me an e-mail, asking how the effect on the website from Climate Crisis could be recreated. It seemed liked an intersting thing to do, so I took the time to try to create the same effect.

With the help of some small HTML, nifty CSS and loads of jQuery, we're able to create an animated fullscreen background image slideshow. Read the rest of this article to learn how it's built.

Animated fullscreen background image slideshow using jQuery

You can easily change the script by changing some variables. It also features image preloading and keyboard navigation (try pressing the numeric keys). The background images have a width of 2000px, just to cover most of the currently used screen resolutions. Check out the demo what we're going to create!

Demo Animated fullscreen background image slideshow   Download Animated fullscreen background image slideshow

The script uses the Templates and Easing jQuery plugins. Tested and working on Firefox, Safari and Chrome. I've added a reference video below to show how the page should look like. As always, comments are left on the source code to explain what it does.


Tags:  slideshow animated fullscreen jquery
 
Rotating billboard using only CSS3

When I just finished creating the animated 3d helix, I came up with an idea that would look a lot like that one. Instead of having the flip animation on top of each other, I wanted to have them placed next to each other. This looks a lot like an animation most of you will know; a rotating billboard.

When you only show two images, it would be pretty simple since the CSS would look a lot like the CSS from my previous demo. That's why I wanted to take it just a little step further and let the billboard show three images.

Rotating billboard

Take note this demo only works in Safari (tested on a Mac) and Safari for iOS (tested on a iPhone). I've made a reference video that you can see below in case you don't have those browsers.

Demo CSS3 Billboard   Download CSS3 Billboard

I know the animation isn't fully perfect, and I'm not really sure if it's my piece of code, or the Webkit engine doesn't properly animate I expect it to. Anyhow, let's take a look under the hood and see how it works!


Tags:  css3 animation webkit css3
 
Animated CSS3 helix using 3d transforms

One of the most popular articles on Marcofolio.net in 2010 was the 3d animation using pure CSS3. In my opinion, it was one of the best articles for myself as well, since I learned some pretty neat stuff about CSS3 and 3d capibilities.

Shortly after I placed my article online, Chris Spooner wrote a very cool article called Super Cool CSS Flip Effect with Webkit Animation. It showed me some great other 3d techniques that can be achieved using pure CSS3.

Those two articles inspired me to create yet another very cool 3d CSS demo, that I like to call an Animated CSS3 helix using 3d transforms.

CSS3 3d Helix

Simply go to the demo page and be amazed! I'm pretty sure you never thought something like that would be possible using pure CSS. Take note this demo only works in Safari (latest version). For those viewers that don't have that browser, I've added a video below.

Demo CSS3 3d helix   Download CSS3 3d helix

For those of you who start digging in the source code directly, I'm warning you: You'll probably find one of the strangest HTML/CSS you've seen. This is purely created, just to achieve the desired effect. Now let's take a look under the hood and see how it works!


Tags:  css3 helix animation 3d transform webkit
 
Looking back at 2010

This is it: The last day of 2010! Normally, the last post of the year on Marcofolio would be a "Best of the Best" round-up (see 2008 and 2009), but for this year, I wanted to look back at my own blog.

This was the year where I created only 32 article (the least I created in the past years), but I'm pretty sure all of them are true high quality articles (no imagedumps, list posts etc.). Most of them are web dev related, about jQuery, CSS3 or HTML5. I really hoped you liked reading the articles on Marcofolio.net for the last year!

Looking back at 2010

I have nothing left to say except to wish you a safe and joyful new year's eve and I hope to see you back (with all your fingers) in 2011! Check out this Christmas/New years card from me and my girlfriend, wishing this to everybody in the world.

Now let's take a look back at Marcofolio over the past year.


Tags:  marcofolio 2010 roundup
 
jQuery Quickie: Smooth animated quote display

Time for yet another jQuery quickie! These relatively simple jQuery tutorials will show you a simple, yet beautiful effect making use of jQuery. This way, you can learn and create something very cool at the same time.

A couple of days ago, I saw a commercial on TV showing some quotes from people displayed in boxes. I wanted to take that concept, and bring it to the web using my favorite JavaScript framework. Today, we'll learn how to create a smooth animated quote display for you to use!

Smooth animated quote display

Simply check out the demo to see what we're going to create. Download the source code to learn how it works, or read the tutorial for more explanation.

Demo Animated quote display   Download Animated quote display

Sadly, fonts will render different in several browsers. I've tested this script (and made it working for) on Firefox, Chrome and Safari (even the iPhone displays it correct). Other browsers aren't tested, but the video below also shows how the animation should look like.

Ready to take a look at how this example works? Let's dive under the hood!


Tags:  quote display smooth jquery quickie
 
<< Start < Prev 1 2 3 4 5 6 7 8 9 10 Next > End >>

Results 31 - 45 of 367
Subscribe

Subscribe to Marcofolio