Cronología animada interactiva con JavaScript y CSS3

Vista prévia

Descripción

Esta es una línea de tiempo simple y sensible donde los nodos de eventos se deslizarán suavemente en la pantalla en el desplazamiento vertical de la página.

Funcionamiento

Añada sus eventos personalizados a la línea de tiempo utilizando la lista desordenada HTML y la etiqueta de tiempo.

<section class="timeline">

<ul>


<li>



<div>




<time>2016</time>




Event Here



</div>


</li>


<li>



<div>




<time>2015</time>




Event Here



</div>


</li>


<li>



<div>




<time>2014</time>




Event Here



</div>


</li>

</ul>
</section>

Los estilos CSS primarios para la línea de tiempo.

.timeline ul {

background: #1B9AAA;

padding: 50px 0;
}

.timeline ul li {

list-style-type: none;

position: relative;

width: 6px;

margin: 0 auto;

padding-top: 50px;

background: #fff;
}

.timeline ul li::after {

content: '';

position: absolute;

left: 50%;

bottom: 0;

transform: translateX(-50%);

width: 30px;

height: 30px;

border-radius: 50%;

background: inherit;
}

.timeline ul li div {

position: relative;

bottom: 0;

width: 400px;

padding: 15px;

background: #F45B69;
}

.timeline ul li div::before {

content: '';

position: absolute;

bottom: 7px;

width: 0;

height: 0;

border-style: solid;
}

.timeline ul li:nth-child(odd) div { left: 45px; }

.timeline ul li:nth-child(odd) div::before {

left: -15px;

border-width: 8px 16px 8px 0;

border-color: transparent #F45B69 transparent transparent;
}

.timeline ul li:nth-child(even) div { left: -439px; }

.timeline ul li:nth-child(even) div::before {

right: -15px;

border-width: 8px 0 8px 16px;

border-color: transparent transparent transparent #F45B69;
}

time {

display: block;

font-size: 1.2rem;

font-weight: bold;

margin-bottom: 8px;
}

Los efectos de animación del evento cuando se desplaza hacia abajo en la Página Web.

.timeline ul li::after { transition: background .5s ease-in-out; }

.timeline ul li.in-view::after { background: #F45B69; }

.timeline ul li div {

visibility: hidden;

opacity: 0;

transition: all .5s ease-in-out;
}

.timeline ul li:nth-child(odd) div { transform: translate3d(200px, 0, 0); }

.timeline ul li:nth-child(even) div { transform: translate3d(-200px, 0, 0); }

.timeline ul li.in-view div {

transform: none;

visibility: visible;

opacity: 1;
}

Haga que la línea de tiempo funcione bien en exploradores y plataformas.

@media screen and (max-width: 900px) {

.timeline ul li div { width: 250px; }

.timeline ul li:nth-child(even) div { left: -289px; /*250+45-6*/
}
}

@media screen and (max-width: 600px) {

.timeline ul li { margin-left: 20px; }

.timeline ul li div { width: calc(100vw - 91px); }

.timeline ul li:nth-child(even) div { left: 45px; }

.timeline ul li:nth-child(even) div::before {

left: -15px;

border-width: 8px 16px 8px 0;

border-color: transparent #F45B69 transparent transparent;
}
}

El principal JavaScript para activar la línea de tiempo.

(function() {


'use strict';


// define variables

var items = document.querySelectorAll(".timeline li");


// check if an element is in viewport

// http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport

function isElementInViewport(el) {


var rect = el.getBoundingClientRect();


return (



rect.top >= 0 &&



rect.left >= 0 &&



rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&



rect.right <= (window.innerWidth || document.documentElement.clientWidth)


);

}


function callbackFunc() {


for (var i = 0; i < items.length; i++) {



if (isElementInViewport(items[i])) {




items[i].classList.add("in-view");



}


}

}


// listen for events

window.addEventListener("load", callbackFunc);

window.addEventListener("resize", callbackFunc);

window.addEventListener("scroll", callbackFunc);

})();