0

After learning the basics of CSS and jQuery, I'd like to set up a simple site for an artistic purpose, layered like this:

  1. A background image that resizes with the browser window; either picking a random image every day or as slideshow > probably best with superbgimage/supersized/similar solution?

  2. Up to 11 randomly positioned divs, each containing a word (link), blurred, that come in focus on hover > blur/focus effect probably best done with CSS sprites and .png files?

  3. Clicking a link overlays everything with a centered div in which texts and images appear, the content in that div should be scrollable if more content exists than the viewport can show > is this one of these "lightbox" or "modal window" things?

Please see this approximate schematic here:

I have particularly no idea how to achieve 2., randomly positioning words over a background. And regarding 3. I've only found examples for image galleries and the like, but not inline(?) html content that can be styled as any other content. But maybe the whole principle can not be achieved? I'm rather happy to learn, even at my age, so if you could point me in the right direction...

thirtydot
  • 224,678
  • 48
  • 389
  • 349
Systembolaget
  • 48
  • 4
  • 1
    If it helps: that can all definitely be done. – thirtydot Aug 26 '11 at 08:28
  • 2. see also: http://stackoverflow.com/questions/6224571/positioning-multiple-random-sized-absolutely-positioned-elements-so-they-dont http://stackoverflow.com/questions/1286855/generate-random-element-position-and-prevent-overlapping-in-javascript – feeela Aug 26 '11 at 08:42
  • Hej thirtydot, can be done sound good. It's not a word cloud thing as seemed to be popular some years ago, but I'll look up those links. Thanks. – Systembolaget Aug 26 '11 at 08:51
  • For number two, this might help: http://stackoverflow.com/questions/6302824/overlapping-elements-html-css-and-jquery/6302883#6302883 – thirtydot Aug 26 '11 at 09:01

1 Answers1

1
  1. Ok go for that
  2. just generate a random number (in limits) with JS (Math.random()) and use this with $(element).css() - be sure to use the right CSS positioning
  3. You are probably looking for sth like: http://fancybox.net/
m90
  • 11,434
  • 13
  • 62
  • 112
  • Hej m90, as for 2. what you suggest there, I will try; as for 3. that does seem to be a good idea for non-image gallery uses as needed in my case, thanks for those hints. – Systembolaget Aug 26 '11 at 08:56
  • Thanks for the pixastic link; what a simple good idea. But unfortunately this would exclude IE users, who are still the majority? – Systembolaget Aug 26 '11 at 11:29
  • I think this only accounts for some of the advanced features. According to: http://www.pixastic.com/lib/docs/actions/blur/ this will work in IE5.5+ – m90 Aug 26 '11 at 11:39
  • Oops, thanks for pointing this out, everything's blurred behind my bespectacled eyes. I tried it out and it looks rather well. If now some bright head would adapt such functionality for CSS styleable regular text... – Systembolaget Aug 26 '11 at 14:16
  • You could use this along with dyamic font replacement (PHP in this case probably): http://www.alistapart.com/articles/dynatext/ which would let you use "standard" HTML text while still being able to blur the result – m90 Aug 29 '11 at 10:57
  • Found that David DeSandro's Isotope with transparent elements does the trick I was after fairly well. Idea was to visually match out-of-focus text to the depth of field of full screen background. – Systembolaget Sep 10 '11 at 20:12