Grow your CSS skills. Land your dream job.

animate objects with css3 after clicking a link (before you leave the page)

  • # September 14, 2012 at 8:12 am

    Hi
    I made a coming soon page for my band antibiotics.
    After the page is loaded, the pictures slide in (animated with css3).
    Now what i wanna do is animate them (fade or slide out) when you click the “to our songs”-link.

    Is it possible to do this just with css3?

    Thanks for your help! :)

    Johnny

    # September 14, 2012 at 9:46 am

    You can animate things with CSS. You can’t delay the default behaviour of an element. A link isn’t supposed to wait before acting when clicked.

    You’ll have to use JavaScript to delay the behaviour of the link.

    # October 4, 2012 at 10:08 am

    Thank you for your answer!
    Now as I know that I can not do it whit css only, how do i have to do it with JavaScript? I’m pretty familliar with HTML and CSS but I only know a litte bit of JavaScript.

    Thanks!
    Johnny

    PS: i made a quick sketch how it should work and you can find the demo site here.
    the username is usr and the password pw ;)

    xpy
    # October 8, 2012 at 4:13 am

    Unless you put all your content in a single page and all your anchors point into the same page and you just do your animations on :target.

    # October 9, 2012 at 7:34 am

    You can use this plugin.

    [http://joelb.me/scrollpath/](http://joelb.me/scrollpath/ “Scroll Path”)

    Need to make customize as per your requirement.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".