Smoke Effect

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Steve C
    #1

    Smoke Effect

    Hi, I've had a strange request for a website. The client is after a
    smoke effect which will gradually fill the screen for a few moments
    before clearing again. This is too be written in Javascript, has
    anyone out there got any ideas on how this could be accomplished?

    Many thanks for any help on this one!!!

    Steve C
    Tags: javascript smoke, smoke.js
    • Erwin Moller
      #2
      Re: Smoke Effect

      Steve C wrote:
      [color=blue]
      > Hi, I've had a strange request for a website. The client is after a
      > smoke effect which will gradually fill the screen for a few moments
      > before clearing again. This is too be written in Javascript, has
      > anyone out there got any ideas on how this could be accomplished?
      >
      > Many thanks for any help on this one!!!
      >
      > Steve C[/color]

      Hi Steve,

      Have a look at CSS-positioning.
      Very short version:
      1) Create a bunch of DIV's or SPAN's
      2) move them around over your screen, using JS.

      Be sure you test for all major browsers, and also test their capabilities
      before you run your routines.

      Good luck,
      Erwin Moller

      PS: Let us know when you are finished. I am curious how it will look. :-)

        Comment

        • Steve Chadaway
          #3
          Re: Smoke Effect

          Thanks Erwin, I was stuck thinking in the pixel at a time style
          thoughts, but your idea could work nicely. I will have a try with that
          and let you know how it comes out.

          Thanks again

          *** Sent via Developersdex http://www.developersdex.com ***
          Don't just participate in USENET...get rewarded for it!

            Comment

            • Robert
              #4
              Re: Smoke Effect

              In article <410fa59b$0$497 11$e4fe514c@new s.xs4all.nl>,
              Erwin Moller
              <since_humans_r ead_this_I_am_s pammed_too_much @spamyourself.c om> wrote:
              [color=blue]
              > Steve C wrote:
              >[color=green]
              > > The client is after a
              > > smoke effect which will gradually fill the screen for a few moments
              > > before clearing again.[/color]
              >
              > Have a look at CSS-positioning.
              > Very short version:
              > 1) Create a bunch of DIV's or SPAN's
              > 2) move them around over your screen, using JS.
              >[/color]


              Did the poster mean to create several transparent images of different
              densities and move them around the screen? Perhaps only one slightly
              cloudy transparent image is needed, but several divs with the image
              positioned a few pixels apart is needed. You could slowly expand the
              size of one div then introduce another div in the middle of the screen
              then expand it. Maybe vary the density of the transparency in the image
              to create a cloud pattern & rotate & expand several divs of this.

              I hope the poster doesn't mind me expanding or clarifying his idea.

              Robert

                Comment

                • Steve Chadaway
                  #5
                  Re: Smoke Effect

                  Thanks Robert, all ideas welcome at this stage, lets just hope it looks
                  as good as it sounds. In the process of costing it for the client at
                  the moment, but will let you guys know how it turns out.

                  Cheers

                  Steve



                  *** Sent via Developersdex http://www.developersdex.com ***
                  Don't just participate in USENET...get rewarded for it!

                    Comment

                    • Erwin Moller
                      #6
                      Re: Smoke Effect

                      Robert wrote:
                      [color=blue]
                      > In article <410fa59b$0$497 11$e4fe514c@new s.xs4all.nl>,
                      > Erwin Moller
                      > <since_humans_r ead_this_I_am_s pammed_too_much @spamyourself.c om> wrote:
                      >[color=green]
                      >> Steve C wrote:
                      >>[color=darkred]
                      >> > The client is after a
                      >> > smoke effect which will gradually fill the screen for a few moments
                      >> > before clearing again.[/color]
                      >>
                      >> Have a look at CSS-positioning.
                      >> Very short version:
                      >> 1) Create a bunch of DIV's or SPAN's
                      >> 2) move them around over your screen, using JS.
                      >>[/color]
                      >
                      >
                      > Did the poster mean to create several transparent images of different
                      > densities and move them around the screen? Perhaps only one slightly
                      > cloudy transparent image is needed, but several divs with the image
                      > positioned a few pixels apart is needed. You could slowly expand the
                      > size of one div then introduce another div in the middle of the screen
                      > then expand it. Maybe vary the density of the transparency in the image
                      > to create a cloud pattern & rotate & expand several divs of this.
                      >
                      > I hope the poster doesn't mind me expanding or clarifying his idea.[/color]

                      Hi Robert and Steve,

                      Haha, of course Steve doesn't mind. He was asking for ideas, wasn't he?
                      Your idea (transparancy) sounds like fun.
                      It could actually be a lot better because my original suggestion didn't
                      include transparency. I was thinking just 'clouds'.
                      Transparence gives probably a better effect because normal smoke is also a
                      little transparent.
                      However, your solution could be a little slow (If you grow and use
                      transparancy) on low-end machines. Steve will figure this out.

                      Just play around Steve, and if you finished, don't forget to publish your
                      solution somewhere for others to enjoy, before M$ patents it. ;-)

                      I am curious what you come up with!

                      Regards,
                      Erwin Moller
                      [color=blue]
                      >
                      > Robert[/color]

                        Comment

                        • Andrew Urquhart
                          #7
                          Re: Smoke Effect

                          *Erwin Moller* mentioned:
                          [viewport transparency, smoke effects for OP]

                          A rather lame, not for general use, tongue-in-cheek, all-body
                          fade-out-in effect might be:
                          Website Closed
                          http://www.andrewu.co.uk/temp/opacityFader.asp

                          [IE5.5+, Firefox (likely includes earlier Gecko versions as well), maybe
                          Konqueror too?]
                          --
                          Andrew Urquhart
                          - Contact me: http://andrewu.co.uk/contact/
                          - 'Staccato signals of constant information
                          A loose affiliation of millionaires and billionaires' - Paul Simon


                            Comment

                            Previous template Next
                            Working...