You searched for: 'Parallax'

Tuesday, December 15th, 2009

3D CSS Parallax Effect

Category: CSS, Showcase

Roman Cortes has a fun parallax effect using just CSS and HTML. Scroll over the bad boy above and see it at work.

Then view the source and have your eyes bleed :)

  1. <style type="text/css">
  2.         a#a96:hover img {left: 224px}a#a96:hover b.d1 {background-position: 224px 0; width: 224px}a#a96:hover b.d2 {background-position: -449.6px 18px;}a#a96:hover b.d3 {background-position: -32px -216px; width: 368px}a#a96:hover b.d4 {background-position: -64px -74px;}a#a97:hover img {left: 223px}a#a97:hover b.d1 {background-position: 223px 0; width: 223px}a#a97:hover b.d2 {background-position: -449.7px 18px;}a#a97:hover b.d3 {background-position: -32.3333333333px -216px; width: 367.666666667px}a#a97:hover b.d4 {background-position: -64.6666666667px -74px;}a#a98:hover img {left: 222px}a#a98:hover b.d1 {background-position: 222px 0; width: 222px}a#a98:hover b.d2 {background-position: -449.8px 18px;}a#a98:hover b.d3 {background-position: -32.6666666667px -216px; width: 367.333333333px}a#a98:hover b.d4 {background-position: -65.3333333333px -74px;}a#a99:hover img {left: 221px}a#a99:hover b.d1 {background-position: 221px 0; width: 221px}a#a99:hover b.d2 {background-position: -449.9px 18px;}a#a99:hover b.d3 {background-position: -33px -216px; width: 367px}a#a99:hover b.d4 {background-position: -66px -74px;}    </style>
  3.  
  4. <body>
  5.     <a href="#" id="a0"><img src="meninas_bg2.jpg" width="80" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a><a href="#" id="a1"><img src="meninas_bg2.jpg" width="81" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a>
  6.     <a href="#" id="a2"><img src="meninas_bg2.jpg" width="82" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a><a href="#" id="a3"><img src="meninas_bg2.jpg" width="83" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a><a href="#" id="a4"><img src="meninas_bg2.jpg" width="84" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a><a href="#" id="a5"><img src="meninas_bg2.jpg" width="85" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a><a href="#" id="a6"><img src="meninas_bg2.jpg" width="86" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a><a href="#" id="a7"><img src="meninas_bg2.jpg" width="87" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a><a href="#" id="a8"><img src="meninas_bg2.jpg" width="88" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a><a href="#" id="a9"><img src="meninas_bg2.jpg" width="89" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a><a href="#" id="a10"><img src="meninas_bg2.jpg" width="90" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a><a href="#" id="a11"><img src="meninas_bg2.jpg" width="91" height="455" alt="" /><b class="d1"></b>

I hope he used a tool ;)

Posted by Dion Almaer at 6:40 am
19 Comments

++++-
4.5 rating from 80 votes

Friday, April 3rd, 2009

Auto Scrolling Parallax Effect in CSS

Category: CSS, Examples

Paul Hayes is off doing more fun things, this time creating an auto scrolling parallax effect with CSS, specifically using multiple background images on a single element and the -webkit-transition property to provide the auto-scrolling.

All with a bit o’ CSS:

  1. #background {
  2.         background: url('../images/foreground.png') 5% 5%,
  3.                 url('../images/midground.png') 20% 20%,
  4.                 url('../images/background.png') 90% 110%;
  5.         top: 218px;
  6.         left: 0;
  7.         right: 0;
  8.         bottom: 0;
  9.         position: fixed;
  10.         -webkit-transition: left 300s linear;
  11. }
  12.  
  13. #experiment:target #background {
  14.         left: -5000px;
  15. }
  16.  
  17. #experiment:hover #background {
  18.         left: -9999px;
  19. }

Posted by Dion Almaer at 1:01 am
5 Comments

+----
1.5 rating from 260 votes

Thursday, February 26th, 2009

Parallax for the Moo Crowd

Category: MooTools

We’ve featured several implementations of the parallax effect here on Ajaxian. The newest creation comes from the team at Piksite who recently released their MooTools-powered mParallax extension:

mParallax is an adaptation for MooTools framework of jParallax whose its author, Stephen Band, describes it like “jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way”.

The image really doesn’t do it justice and you should check out the demo to really get a feel for the capabilities.

As Moo team member Aaron Newton said, “For all you people using MooTools to make your own 8-bit side-scrolling NES clones, this is your library.”

Posted by Rey Bango at 10:41 am
5 Comments

++++-
4.3 rating from 36 votes

Tuesday, August 26th, 2008

jParallax Turns Elements into a Viewport

Category: jQuery

In the “oh wow, I didn’t know JavaScript could do that” category, I just came across a cool new jQuery plugin called jParallax which implements a parallax effect on selected elements. Now, I’m not ashamed to admit not knowing what “parallax” meant so I looked it up on Wikipedia which totally added closure to the concept being implemented. Till then, I just thought that was a really cool effect!

Parallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.


jParallax includes several options for controlling the effect including setting the animation timing and layer positioning control. The demos can be viewed here.

We also covered Brett Taylor’s implementation of a parallax effect last year where he showed how to build parallax backgrounds.

Update: I’ve added straight links to the demos

Demo Links

Posted by Rey Bango at 9:36 am
13 Comments

++++-
4.1 rating from 26 votes

Wednesday, March 21st, 2007

Parallax Effect for Backgrounds

Category: CSS, JavaScript, Library

Brett Taylor wanted to see if he could make a parallax effect in HTML+CSS+JS and make it cross-browser and came up with Parallax Backgrounds.

Scroll around and you will see that the text and content scrolls normally, but the different background layers scroll at different speed.

Maybe as useful as SKIP INTRO, but a nice experiment.

javascript

  1. function calcParallax(tileheight, speedratio, scrollposition) {
  2.   //    by Brett Taylor http://inner.geek.nz/
  3.   //    originally published at http://inner.geek.nz/javascript/parallax/
  4.   //    usable under terms of CC-BY 3.0 licence
  5.   //    http://creativecommons.org/licenses/by/3.0/
  6.   return ((tileheight) - (Math.floor(scrollposition / speedratio) % (tileheight+1)));
  7. }
  8.  
  9. window.onload = function() {
  10.  
  11.   window.onscroll = function() {
  12.     var posX = (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : window.pageXOffset;
  13.     var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;
  14.    
  15.     var ground = document.getElementById('ground');
  16.     var groundparallax = calcParallax(53, 8, posY);
  17.     ground.style.backgroundPosition = "0 " + groundparallax + "px";
  18.  
  19.     var clouds = document.getElementById('clouds');
  20.     var cloudsparallax = calcParallax(400, .5, posY);
  21.     clouds.style.backgroundPosition = "0 " + cloudsparallax + "px";
  22.   }
  23.  
  24.   document.getElementById('javascriptcode').onscroll = function() {
  25.     var posX = (this.scrollLeft) ? this.scrollLeft : this.pageXOffset;
  26.     var j = calcParallax(53, 16, posX);
  27.     console.log('scroll js: '+ j);
  28.     document.getElementById('javascriptcode').style.backgroundPosition = j + "px 0";
  29.   }
  30. }

Parallax Background

Posted by Dion Almaer at 9:08 am
21 Comments

+++--
3 rating from 49 votes

Monday, December 7th, 2009

JavaScript Gaining Traction with Game Developers

Category: Games, JavaScript

We received an email from Joesph Huckaby about his new JS-based game rendering engine and I have to admit that when I first read about it, I was a little skeptical about it mainly because I’ve been disappointed with many that I’ve seen in the past. As I dug into his site, Effectgames.com, my whole opinion changed as I saw some very robust demos that clearly demonstrated the capabilities of this engine.

effectgames

The games are powered by the “Effect Engine”, Joseph’s JavaScript/DHTML library that provides the framework for displaying and animating all the graphics, playing all the sounds & music, handling the keyboard & mouse, and sprite collision detection. It can smoothly render multiple layers of parallax scrolling tiles and sprites using pure DHTML. HTML 5 Audio is used where supported (currently Safari on Mac OS X 10.5 only, 10.6 and Firefox coming soon), and 3rd party extensions used elsewhere. All modern browsers and platforms are supported, including IE 6+, Firefox 3+, Safari 3+, Chrome 1+, and Opera 9+.

The team has also created a suite of online tools to allow developers to prepare and design their game online including managing graphics & audio, creating levels for their games and manipulating graphics in real-time using non-destructive filters (scaling, rotation, and a number of other transforms).

Developers can build their games locally on their Macs or PCs, and don’t have to upload any code until they are ready to publish. Once ready, developers can compile their code automatically using Google Closure, and receive a unique URL and embed code to share the game on their own site, blog, or anywhere they want.

In looking through the documentation, it looks like the whole API is very well laid out clearly documenting the breadth of methods available and the Getting Started guide is very comprehensive.

I didn’t find anything that discussed licensing or a potential pricing model so that’s something that you may want to look into before diving into this but from what I’ve seen, the engine looks very promising.

Posted by Rey Bango at 8:45 am
17 Comments

++++-
4.2 rating from 60 votes

Monday, September 15th, 2008

Tip: Using a background image on an image

Category: CSS, Tip

Pascal Opitz answered the question “Can you set an image background on an image element?” in simple fashion.

All you have to do is make sure that the image is display: block and has a padding.

He put up a simple demo that uses a div with an image, and he applies backgrounds to both:

  1. div {
  2.         background: url('blur.jpg') no-repeat top left;
  3.         width: 232px;
  4.         height: 200px;             
  5. }
  6.        
  7. img {
  8.         display: block;
  9.         background: url('parallax.gif') no-repeat bottom left;
  10.         padding: 93px 100px 75px 100px;
  11. }

You have the little chap running as the actual src of the image, the animated background as the img background, and then the sky background applied to the div.

Posted by Dion Almaer at 5:23 am
8 Comments

+++--
3.8 rating from 47 votes