Creando un simple sliding portfolio jquery

Saludos Amigos esta vez les traigo un simple sliding portfolio jquery , que va a mostrar en secciones con imágenes cada proyecto creado, para ser mostrado al usuario de una manera amigable y agradable. Para esta demo se utiliza los siguientes archivos:

  • style.css
  • main.js
  • modernizr.js
  • jquery.js (v2.1.1)
  • index.html

Comenzaremos estructurando nuestro index.html , la estructura se compone de 2 listas desordenadas.

ul.cd-projects-previews .- para mostrar las imágenes previas a cada proyecto.

ul.cd-projects .- para mostrar el detalle de cada proyecto.

nav.cd-primary-nav .- Que es una barra de navegación envuelta en un menú hamburguesa.

  <div class="cd-projects-container">
      <ul class="cd-projects-previews">
          <li>
              <a href="#0">
                  <div class="cd-project-title">
                      <h2>Project 1</h2>
                      <p>Descripción del proyecto</p>
                  </div>
              </a>
          </li>

          <li>
              <!-- project preview here -->
          </li>

          <!-- other project previews here -->
      </ul> <!-- .cd-projects-previews -->

      <ul class="cd-projects">
          <li>
              <div class="preview-image">
                  <div class="cd-project-title">
                      <h2>Project 1</h2>
                      <p>Descripcion del proyecto</p>
                  </div>
              </div>

              <div class="cd-project-info">
                  <!-- project description here -->
                  <p>Descripcion del proyecto</p>
              </div> 
          </li>

          <!-- projects here -->
      </ul> <!-- .cd-projects -->

      <button class="scroll cd-text-replace">Scroll</button>
  </div> <!-- .cd-project-container -->

  <nav class="cd-primary-nav" id="primary-nav">
      <ul>
          <li class="cd-label">Navigation</li>
          <li><a href="#0">The team</a></li>
          <!-- navigation items here -->
      </ul>
  </nav> <!-- .cd-primary-nav -->

En este ejemplo, aprovechamos las Transiciones y Transformaciones de CSS , y la propiedad de CSS de background-attachment para crear un efecto de “inmersión” y revelar contenido adicional para cada proyecto.

Ahora añadiremos estilo.css.- En dispositivos pequeños, cada elemento de la lista tiene un ancho igual al ancho de la ventana, la altura es igual a un cuarto de la altura de la ventana (4 proyectos en nuestra demostración) y translateX(-100%) se mueve fuera de la ventana. Después de que se cargan las imágenes de fondo (evento detectado en jQuery), la clase .is-loaded se asigna a los elementos de la lista (translateX(0)) para moverlos de nuevo en la ventana. Las transiciones CSS3 se han utilizado para lograr una animación suave.

  .projects-container li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25%;
    transition: transform 0.4s;
    /* on mobile -  move items outside the viewport */
    transform: translateX(-100%);
  }
  .projects-container li.is-loaded {
    transform: translateX(0);
  }
  .projects-container li::after {
    /* background image */
    background-image: url("../img/img-1-small.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
  .projects-container li:nth-of-type(2) {
    top: 25vh;
  }
  .projects-container li:nth-of-type(2)::after {
    background-image: url("../img/img-2-small.jpg");
  }

Cuando el usuario hace clic en un proyecto, la clase .is-full-width se asigna al elemento de la lista seleccionada: ::after la altura del pseudo-elemento se establece en 100vh(unidades de ventana gráfica), mientras que la clase .cd-project-info se cambia a visible.

  .projects-container li.is-full-width {
  /* selected item */
  top: 0;
  height: auto;
  z-index: 1;
}
.projects-container li.is-full-width::after {
  height: 100vh;
}

.cd-project-info {
  visibility: hidden;
  opacity: 0;
}
.is-full-width .cd-project-info {
  visibility: visible;
  opacity: 1;
}

En pantallas más grandes, cada elemento de la lista tiene una altura igual a la altura de la ventana y el ancho igual a un cuarto del ancho de la ventana . Además, el pseudo-elemento de los elementos background-attachment de la lista ::after se ha configurado como fijo, de esta manera, la imagen se fija con respecto a la ventana (no se mueve mientras se desplaza el proyecto seleccionado) y cubre toda la ventana.

Nota: Aquí se está utilizando la propiedad ::before de contenido de pseudo-elementos de la lista de elementos para acceder (en el archivo js) al atributo url, de la imagen de fondo (esto se usa para detectar si las imágenes de fondo se han cargado). Por lo tanto, cada vez que establezca una nueva imagen de fondo para el ::afterc pseudo-elemento, también deberá actualizar el atributo de contenido del ::before.

  .projects-container li::after {
  background-image: url("../img/img-1-small.jpg");
}
.projects-container li::before {
  content: 'img/img-1-small.jpg';
  display: none;
}
@media only screen and (min-width: 1024px) {
  .projects-container li:first-of-type::after {
    background-image: url("../img/img-1-large.jpg");
  }
  .projects-container li:first-of-type::before {
    content: 'img/img-1-large.jpg';
  }
}

Librería jQuery .- Utilizamos jQuery para detectar cuándo se cargan las imágenes de fondo del proyecto: tan pronto como están, showCaption(), llama a la función de bucle para asignar la clase .is-loaded a cada elemento de la lista.
Además, el evento de clic en la clase .cd-close de la lista detectará para expandir y cerrar un proyecto. Descargar jquery desde su pagian principal

Aprende como usar jquery.

Modernzr.- Puedes descargar de se web de autor.
Main.js realizará los efectos deseados sobre la plantilla principal.

  jQuery(document).ready(function($){
    //cache DOM elements
    var projectsContainer = $('.cd-projects-container'),
        projectsPreviewWrapper = projectsContainer.find('.cd-projects-previews'),
        projectPreviews = projectsPreviewWrapper.children('li'),
        projects = projectsContainer.find('.cd-projects'),
        navigationTrigger = $('.cd-nav-trigger'),
        navigation = $('.cd-primary-nav'),
        //if browser doesn't support CSS transitions...
        transitionsNotSupported = ( $('.no-csstransitions').length > 0);

    var animating = false,
        //will be used to extract random numbers for projects slide up/slide down effect
        numRandoms = projects.find('li').length,
        uniqueRandoms = [];

    //open project
    projectsPreviewWrapper.on('click', 'a', function(event){
        event.preventDefault();
        if( animating == false ) {
            animating = true;
            navigationTrigger.add(projectsContainer).addClass('project-open');
            openProject($(this).parent('li'));
        }
    });

    navigationTrigger.on('click', function(event){
        event.preventDefault();

        if( animating == false ) {
            animating = true;
            if( navigationTrigger.hasClass('project-open') ) {
                //close visible project
                navigationTrigger.add(projectsContainer).removeClass('project-open');
                closeProject();
            } else if( navigationTrigger.hasClass('nav-visible') ) {
                //close main navigation
                navigationTrigger.removeClass('nav-visible');
                navigation.removeClass('nav-clickable nav-visible');
                if(transitionsNotSupported) projectPreviews.removeClass('slide-out');
                else slideToggleProjects(projectsPreviewWrapper.children('li'), -1, 0, false);
            } else {
                //open main navigation
                navigationTrigger.addClass('nav-visible');
                navigation.addClass('nav-visible');
                if(transitionsNotSupported) projectPreviews.addClass('slide-out');
                else slideToggleProjects(projectsPreviewWrapper.children('li'), -1, 0, true);
            }
        }

        if(transitionsNotSupported) animating = false;
    });

    //scroll down to project info
    projectsContainer.on('click', '.scroll', function(){
        projectsContainer.animate({'scrollTop':$(window).height()}, 500);
    });

    //check if background-images have been loaded and show project previews
    projectPreviews.children('a').bgLoaded({
        afterLoaded : function(){
            showPreview(projectPreviews.eq(0));
        }
    });

    function showPreview(projectPreview) {
        if(projectPreview.length > 0 ) {
            setTimeout(function(){
                projectPreview.addClass('bg-loaded');
                showPreview(projectPreview.next());
            }, 150);
        }
    }

    function openProject(projectPreview) {
        var projectIndex = projectPreview.index();
        projects.children('li').eq(projectIndex).add(projectPreview).addClass('selected');

        if( transitionsNotSupported ) {
            projectPreviews.addClass('slide-out').removeClass('selected');
            projects.children('li').eq(projectIndex).addClass('content-visible');
            animating = false;
        } else {
            slideToggleProjects(projectPreviews, projectIndex, 0, true);
        }
    }

    function closeProject() {
        projects.find('.selected').removeClass('selected').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
            $(this).removeClass('content-visible').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
            slideToggleProjects(projectsPreviewWrapper.children('li'), -1, 0, false);
        });

        //if browser doesn't support CSS transitions...
        if( transitionsNotSupported ) {
            projectPreviews.removeClass('slide-out');
            projects.find('.content-visible').removeClass('content-visible');
            animating = false;
        }
    }

    function slideToggleProjects(projectsPreviewWrapper, projectIndex, index, bool) {
        if(index == 0 ) createArrayRandom();
        if( projectIndex != -1 && index == 0 ) index = 1;

        var randomProjectIndex = makeUniqueRandom();
        if( randomProjectIndex == projectIndex ) randomProjectIndex = makeUniqueRandom();

        if( index < numRandoms - 1 ) {
            projectsPreviewWrapper.eq(randomProjectIndex).toggleClass('slide-out', bool);
            setTimeout( function(){
                //animate next preview project
                slideToggleProjects(projectsPreviewWrapper, projectIndex, index + 1, bool);
            }, 150);
        } else if ( index == numRandoms - 1 ) {
            //this is the last project preview to be animated
            projectsPreviewWrapper.eq(randomProjectIndex).toggleClass('slide-out', bool).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
                if( projectIndex != -1) {
                    projects.children('li.selected').addClass('content-visible');
                    projectsPreviewWrapper.eq(projectIndex).addClass('slide-out').removeClass('selected');
                } else if( navigation.hasClass('nav-visible') && bool ) {
                    navigation.addClass('nav-clickable');
                }
                projectsPreviewWrapper.eq(randomProjectIndex).off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
                animating = false;
            });
        }
    }


    function makeUniqueRandom() {
        var index = Math.floor(Math.random() * uniqueRandoms.length);
        var val = uniqueRandoms[index];
        // now remove that value from the array
        uniqueRandoms.splice(index, 1);
        return val;
    }

    function createArrayRandom() {
        //reset array
        uniqueRandoms.length = 0;
        for (var i = 0; i < numRandoms; i++) {
              uniqueRandoms.push(i);
          }
    }
  });

   
   (function($){
    $.fn.bgLoaded = function(custom) {
        var self = this;

        // Default plugin settings
        var defaults = {
            afterLoaded : function(){
                this.addClass('bg-loaded');
            }
        };

        // Merge default and user settings
        var settings = $.extend({}, defaults, custom);

        // Loop through element
        self.each(function(){
            var $this = $(this),
                bgImgs = $this.css('background-image').split(', ');
            $this.data('loaded-count',0);
            $.each( bgImgs, function(key, value){
                var img = value.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
                $('').attr('src', img).load(function() {
                    $(this).remove(); // prevent memory leaks
                    $this.data('loaded-count',$this.data('loaded-count')+1);
                    if ($this.data('loaded-count') >= bgImgs.length) {
                        settings.afterLoaded.call($this);
                    }
                });
            });

        });
    };
  })(jQuery);

Espero les haya gustado no se olviden compartir..

DEMOSTRACIÓN


Relacionado