SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I create animations that only occur once?

    Hi,
    I've got an idea for some fancy animations (using jquery) that I'd like to create on page load.

    However I know that if a user were to see this on every page they went to it would get really old really fast.

    How can I make it so that it would only run say on the first pageload of the day for that user?

    I imagine it would have something to do with cookies? Can someone point me in the right direction as I don't really know where to begin my research.

    Also while I'm here, is it possible using javascript or jquery to actually rotate a div or element at all? Is there even a css property that can do this?

    regards
    steve

  2. #2
    SitePoint Addict
    Join Date
    Aug 2007
    Location
    St. Louis, MO.
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think using a cookie would be a good way to go. Set a cookie var to 1 then after the document ready put a if statement in there with your animation.

    As for rotating the image there isn't a CSS trick that can do this. I'm not to sure about javascript.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    There are only two ways to rotate an image using JavaScript.

    1. Load a series of different images where they are all the same except for the amount that the image content has been rotated by.

    2. Take all of the above images and combine them into one image and then use JavaScript to change how the image is cropped when it is displayed on the page so that the different sections of the image show in turn.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is a CSS3 property which can be used to rotate elements, an example of it can be found here: http://css-tricks.com/examples/CSS3Clock/ (only works in webKit browsers: safari > 3, Chrome)
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Perhaps the most cost-effective to show an image rotating is by using an animated gif.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're only looking to rotate images (and you need the user to control it) you could look into the <CANVAS> element also: http://javascript.internet.com/image...th-canvas.html
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  7. #7
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey
    thanks for the replies.
    It was elements I was interested in rotating, just as a learning tool really, it's always nice to know what's possible. In terms of images, yes an animated gif would probably be the way to go, but it sounds like there's no very easy way to animate an actual element, like spinning the header clockwise from the bottom of the page to the top, into it's place for example.

    Thanks again

  8. #8
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have planned to have a website for my company with specialized graphical effects. Can anyone suggest me how to find design firms in the internet?

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •