In CSS, how do you make DIVs gradually appear on screen?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

In CSS, how do you make DIVs gradually appear on screen?

Post by simonmlewis »

We are looking at a layout where the DIVs will appear on screen, with questions that they click on to feed elsewhere.

I'd like them to "fade in". Preferable from the top down, or all fade in at the same time.

I've seen various options, some on Fiddle but when I take their code in View Frame Source, it doesn't work.

http://jsfiddle.net/SO_AMK/a9dnW/3/
This is kind of it, but I want to be able to add it to DIVs instead of P tags. But be good to get this working first.

Thanks.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: In CSS, how do you make DIVs gradually appear on screen?

Post by Celauran »

That example is JS, not CSS. To have the effect on a div instead of a p, just change the selector. Also, be sure to click the cog next to the word JavaScript in that pane to see which libraries are being loaded.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: In CSS, how do you make DIVs gradually appear on screen?

Post by simonmlewis »

Sorry I'm not with you. It doesn't show me *all* the code I need then?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: In CSS, how do you make DIVs gradually appear on screen?

Post by Celauran »

No, it relies on jQuery, which is what I was trying to point you to.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: In CSS, how do you make DIVs gradually appear on screen?

Post by simonmlewis »

But it doesn't show what code is needed for that?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: In CSS, how do you make DIVs gradually appear on screen?

Post by Celauran »

jQuery is a library, it just needs to be loaded before that code gets called.

Code: Select all

<script src="/path/to/jquery"></script>
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: In CSS, how do you make DIVs gradually appear on screen?

Post by Celauran »

Start to finish all you need

Code: Select all

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Whatever</title>
    <style>
    #test p {
      opacity: 0;
      margin-top: 25px;
      font-size: 21px;
      text-align: center;
    }
    </style>
  </head>
  <body>
    <div id="test">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
    <script>
    $(document).ready(function() {
      $("#test p").delay(1000).animate({"opacity": "1"}, 700);
    });
    </script>
  </body>
</html>
Post Reply