Reputation: 27

How to make a fade in effect when loading images (when I scroll)

If I load 20 images, I would like to load them with a fade in effect only if the user scrolls down.

Heres the code :

<?php
//Proceso de conexión con la base de datos
$conex = mysql_connect("localhost", "root", "root")
        or die("No se pudo realizar la conexion");
    mysql_select_db("sesiones_php",$conex)
        or die("ERROR con la base de datos");

//Iniciar Sesión
session_start();

//Validar si se está ingresando con sesión correctamente
if (!$_SESSION){
echo '<script language = javascript>
alert("usuario no autenticado")
self.location = "login.php"
</script>';
}

?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Navbar Examples</title>

<!-- Mobile viewport optimized: h5bp.com/viewport -->
      <meta name="viewport" content="width=device-width">

<!-- Main stylesheet imports bootstrap css and adds custom -->
    <link href="css/style.css" rel="stylesheet">

    <style>
        /* To keep short panes open decently tall */
        .tab-pane {min-height: 500px;}
    </style>

<!-- Modernizr for browser feature-checking 
            + HTML5shiv (included in modernizr) see modernizr.com -->
    <script src="js/modernizr-2.5.3.min.js"></script>

<!-- Fav and touch icons -->
        <!-- alternatively, remove these lines and place icons
                directly in the site parent folder 
                mathiasbynens.be/notes/touch-icons -->
    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="apple-touch-icon" href="img/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">

  </head>

  <body>

    <div class="navbar navbar-fixed-top">
          <div class="navbar-inner">
            <div class="container">
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </a>
              <a class="brand" href="members.php">Divagueando</a>
              <div class="nav-collapse">
                <ul class="nav">
                  <li><a href="members.php"><i class="icon-home icon-white"></i> Inicio</a></li>
                  <li><a href="bandeja.php">Mensajes Privados</a></li>
                  <li><a href="inbox.php">Nuevo Mensaje</a></li>
                  <li class="active"><a href="galeria.php">Ver todas las fotos</a></li>
                  <li><a href="fotoperfil.php">Foto perfil</a></li>
                </ul>
                <a class="btn btn-primary pull-right" href="logout.php">Cerrar Sesion</a>
                <a class="btn btn-primary pull-right" href="configuracion.php"><?php echo $_SESSION['username'];?></a>
              </div><!-- /.nav-collapse -->
            </div><!-- /.container -->
          </div><!-- /navbar-inner -->
        </div><!-- /navbar -->



        <div class="container">

        <div class="contenedorfoto">


        <?php 
        $conexion=mysql_connect('localhost','root','root') or die('No hay conexión a la base de datos');
        $db=mysql_select_db('carpe',$conexion)or die('no existe la base de datos.');


        $id=$_SESSION['id'];
        $consulta=mysql_query("select * from datos where idUsuario='".$id."' order by id desc");
        while($filas=mysql_fetch_array($consulta)){
            $ruta=$filas['ruta'];
            $desc=$filas['descripcion'];


        ?>

        <?php echo $desc;?><br>
        <img src="imagenperfil/<?php echo $ruta; ?>" width="200" height="300"><br>
        <hr>
        <?php }?>




        </div>

      <footer>
        <p>By David Cochran of <a href="http://okwu.edu">Oklahoma Wesleyan University</a> and <a href="http://alittlecode.com/">aLittleCode.com</a> for <a href="http://webdesign.tutsplus.com/">webdesign.tutsplus.com</a>. Free for your use! (No warranties, no guarantees.)</p>
      </footer>

    </div> <!-- /container -->

<!-- ==============================================
         JavaScript below!                                                          -->

<!-- jQuery via Google + local fallback, see h5bp.com -->
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>

<!-- Bootstrap JS: compiled and minified -->
    <script src="js/bootstrap.min.js"></script>

<!-- Example plugin: Prettify -->
    <script src="js/prettify/prettify.js"></script>

<!-- Initialize Scripts -->
        <script>
            // Activate Google Prettify in this page
            addEventListener('load', prettyPrint, false);

            $(document).ready(function(){

                // Add prettyprint class to pre elements
                    $('pre').addClass('prettyprint');

                // Initialize tabs and pills
                    $('.note-tabs').tab();

            }); // end document.ready
        </script>

  </body>
</html>

Basically, I retrieve all the images for one user and display them. I would like to show them with the fade in effect, when he scrolls.

Thanks!

Upvotes: 0

Answers (2)

Beetroot-Beetroot

Reputation: 18078

Lazy Load is an option but that would delay loading. Another option is to use the jQuery inview event plugin, which may better deliver the effect you seek. It depends on exactly what you want.

With jQuery inview, the code would be as follows :

$(function(){
    $('img.fadeMe').css('opacity', 0).one('inview', function(event, visible) {
      if(visible) {
        $(this).fadeIn();
      }
    });
    window.trigger('scroll');//fadeIn images at top of page that are initially in view.
});

untested

With this approach, images are allowed to load in the normal way, having been pre-styled with 'opacity', 0 to make them initially invisible. Thus, there's a good chance of zero delay before each image having been loaded before it's faded in as it comes into view.

With Lazy Load, you are guaranteed a loading delay before images becomes available - that's what Lazy Load does.

Try both approaches and see which best suites your site.

Upvotes: 0

scronide

Reputation: 12238

It sounds like you want the Lazy Load plugin for jQuery to delay the loading of image data until they are visible. The plugin site has an example with the fadeIn effect.

Upvotes: 2

How to make a fade in effect when loading images (when I scroll)

Answers (2)

Related Questions