Member Avatar for rents

Hey everyone.

I'm looking to replicate an effect I saw on an app used on an iPad.

Basically, there's a background image and a layered, centered content section. As you scroll down, the opacity of the background starts to fade, without effecting the content section at all. By the time you scroll to the footer, the opacity is at around 10% or so.

Anyone know if this is possible using Jquery or can point me in the right direction?

Thanks for your time.

  • 3 Contributors
  • 12 Replies
  • 134 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by rents

Recommended Answers

All 12 Replies

Member Avatar for twiss

One way is to create an image (1px width, but very 'high') that does just that and repeat it horizontally.
Another way is to create the (pure) css for that at http://www.colorzilla.com/gradient-editor/.

Member Avatar for twiss

Perhaps try adding the css that that site produces?

Member Avatar for rents

Thanks for the responses.

Essentially the effect takes place on an image and isn't a gradient or colour switch. The background image remains static as the content scrolls, fading out as the content reaches the bottom.

I've searched around and haven't found a replica of it outside of the iPad app.

thanks again.

Member Avatar for twiss

I would do that with an image editor (ps or gimp).

Member Avatar for Airshow

Rents,

I have used your requirement as a long overdue exercise in writing a jQuery plugin; something I've not done in earnest before.

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#mydiv1 {
	height: 150px;
	margin-top:12px;
	padding: 10px;
	border: 1px solid #000000;
}

#mydiv2 {
	height: 100px;
	margin-top:12px;
	padding: 5px;
	border: 1px solid #000000;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type='text/javascript'>
//jQuery plugin pattern
(function($) {
  $.fn.scrollFade = function(opts) {
    var defaults = {
      rgb0 : [255, 132, 0],//color at scroll = min;
      rgb1 : [255, 229, 200]//color at scroll = max;
    };
    opts = $.extend(defaults,opts||{});
    var rgbDiff = [ opts.rgb1[0]-opts.rgb0[0], opts.rgb1[1]-opts.rgb0[1], opts.rgb1[2]-opts.rgb0[2] ];
    function proportion(n,p) {
      return Math.round(opts.rgb0[n] + p*(rgbDiff[n]));
    }
    function setBgColor(evt) {
      var $this = $(this);
      var s = parseInt($this.scrollTop());
      var h = evt.data.h;
      var rgb = [ proportion(0,s/h), proportion(1,s/h), proportion(2,s/h) ].join();
      $this.css({backgroundColor:'rgb(' + rgb + ')'});
      //$("#msg").html([s,h].join());
    }
    this.each(function(idx,elt) {
      var $elt = $(elt).css('overflow','auto');
      var html = $elt.html();
      $elt.html('');
      var $inner = $("<div>").addClass('inner').appendTo($elt).html(html);
      var h = $inner.height() - $elt.height();
      var data = {h:h};
      $elt.bind('scroll',data,setBgColor);
      setBgColor.call($elt, {data:data});
    });
    return this;
   };
})(jQuery);

//Now let's use the plugin in a couple of examples
$(document).ready(function() {
  $("#mydiv1").scrollFade();//use default colors
  $("#mydiv2").scrollFade({//override default colors
    rgb0 : [0, 255, 132],//color at scroll = min;
    rgb1 : [200, 255, 229]//color at scroll = max;
  });
});
</script>
</head>

<body>

<div id="mydiv1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="mydiv2">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!--div id="msg"></div-->

</body>
</html>

As you will see in the two examples, I have coded default colors for the fade but these can be overridden such that you can fade from any color to any other (not necessarily the same hue).

Unlike Twiss's method, this plugin uses css background-color. At any instant, it shows a uniform color. There's no "static" graduation effect when the user is not actively scrolling. I don't know if this is a good feature; it depends what you want.

I have left a "msg" div and corresponding line of javascript in place (both commented out). These were useful when debugging and can be deleted in production code.

Tested only in Opera 11.11.

I would be happy for anyone more experienced in writing plugins to suggest improvements.

Airshow

Edited by Airshow because: n/a
Member Avatar for twiss

That's a nice script, do you have it live somewhere? Curious how it feels to scroll and the background changes.

Member Avatar for Airshow

Twiss it's live on my netbook :twisted:

It's a whole page from <!doctype> to </html> so you should be able to have it running in moments - copy/paste/save as xxx.html .....

It works by attaching to selected elements a jquery 'scroll' handler, which does some fairly simple maths on the scroll position to perform a linear interpolation between two colors each specified as rgb values.

I should have said, the only critical CSS directive is height . Margin/padding/border are just for layout/appearance in the demo. Internally, the plugin sets overflow:auto to give scrolling behaviour, and backgroundColor to give the fade effect.

Airshow

Edited by Airshow because: n/a
Member Avatar for twiss

Yes, I know, but I'm too lazy for that right now, I'll try it out later :)

Member Avatar for Airshow

Yes, I know, but I'm too lazy for that right now, I'll try it out later :)

Typical programmer! Just like me.

Airshow

Member Avatar for rents

thanks for that Airshow.

I'll need the effect to take place on an image.

Nice work. :)

Member Avatar for Airshow

Rents,

That's a bit trickier.

You could try setting a png with partial transparency as a background image. By using a monochrome (or limited spectrum) png, my scrollFade plugin (with judicious choice of rgb0/rgb1 colors) may give you something like the effect you want.

If you can't make that work, you may have to resort to layering your content over a foreground image such that it appears to be a background image. Foreground images have the advantage of controllable opacity.

AFAIK, the opacity of background images can't be controlled.

Airshow

Member Avatar for rents

thanks for the tips Airshow. I'll keep at it :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.