SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text Effect that looks like text is being handwritten

    Is there a js out there that makes text look like it is being handwritten by appearing pixel by pixel or something? I have seen this in action but it was a frames site and I coudln't get into it to see how they did it by source. Maybe this is a flash effect?

    Cheers
    Andrea

  2. #2
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,423
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    It almost certainly has to be flash.

  3. #3
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there are many other ways to show an eye catching effect, I doubt it can be easily done. Unless you have your own library to render text in html using javascript pixel by pixel. Most closely I can imagine is using overlay mask and let the text appear in horizontally fade in.

  4. #4
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did a JavaScript/CSS slideshow years ago that performed image transitions a few pixels at a time. It used a stack of absolutely-positioned DIVs with their clip properties set so as to create a grid when viewed from the top of the stack. The thing was painfully slow in Netscape 6 PR1 (which was new at the time - we were still pulling our hair out over 4.77) due to the huge amount of DHTML manipulation required. It worked quite well in IE5 though. The same could be done with text inside the DIVs instead of images.

  5. #5
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by aspires View Post
    Is there a js out there that makes text look like it is being handwritten by appearing pixel by pixel or something? I have seen this in action but it was a frames site and I coudln't get into it to see how they did it by source. Maybe this is a flash effect?

    Cheers
    Andrea
    Presumably you mean for just one line, or at least in just one area of a document.
    I would do it with a matrix of one-pixel divs over which the mouse would be used to create/edit the 'pen' movements, with the co-ordinates of the used 'pixels' being recorded and stored in sequence.
    Upon completion, generate the array code and paste it into the script that generates the writing, which is done simply by setting in sequence the visibility of the divs at the stored co-ordinates.
    It's perfectly feasible, but only a mug||sucker would do it for nothing.
    Tab-indentation is a crime against humanity.

  6. #6
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Perhaps the poster can explain why this question is being asked? If we can understand what is trying to be achieved then we may be able to offer more-targeted advice?
    Ian Anderson
    www.siteguru.co.uk

  7. #7
    SitePoint Addict MrBaseball34's Avatar
    Join Date
    Sep 2002
    Location
    Round Rock, Texas
    Posts
    277
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another possiblity is to use an animated GIF or SVG?

  8. #8
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Which is why I am asking what the poster is actually trying to achieve. If it is pre-defined text then an animated GIF is very easy to do as the method required is "static" ... if it is text that a user enters into a box (or is queried from a database) then the method needs to be "dynamic".
    Ian Anderson
    www.siteguru.co.uk


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •