Page 1 of 1

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

Posted: Thu Jul 21, 2016 11:10 am
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.

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

Posted: Thu Jul 21, 2016 11:25 am
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.

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

Posted: Thu Jul 21, 2016 2:00 pm
by simonmlewis
Sorry I'm not with you. It doesn't show me *all* the code I need then?

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

Posted: Thu Jul 21, 2016 2:22 pm
by Celauran
No, it relies on jQuery, which is what I was trying to point you to.

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

Posted: Thu Jul 21, 2016 2:26 pm
by simonmlewis
But it doesn't show what code is needed for that?

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

Posted: Thu Jul 21, 2016 2:31 pm
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>

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

Posted: Thu Jul 21, 2016 2:39 pm
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>