LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
body {
  background-color: #fff;
  overflow-x: hidden;
  font-family: "Proxima N W01 Thin Reg", "HelveticaNeue-Light", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

a {
  color: #56004e;
  text-decoration: none;
}

.page-wrap {
  padding: 40px 0;
}
@media (max-width: 700px) {
  .page-wrap {
    padding: 60px 0 0;
  }
}

.back-link {
  text-align: center;
}
.back-link a {
  display: inline-block;
  padding: 10px 20px;
  background: #268500;
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.35);
  transition: all .3s ease;
}
.back-link a:hover {
  box-shadow: 0px 5px 20px 2px rgba(0, 0, 0, 0.9);
  text-decoration: none;
  background-color: #32ae00;
}

.footer {
  padding: 0 0 5em;
}

.dealer-panel-title {
  min-height: 34px;
}

.btn-default {
  color: white;
  border-color: rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.05);
  border-radius: 0px;
}
.btn-default:hover {
  color: white;
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.2);
}

.inverse {
  color: #474747;
}

.hidden {
  display: none !important;
}

.tag {
  text-align: center;
}
.tag a {
  color: #666;
  transition: all .2s ease-out 0s;
}
.tag a:hover {
  color: #268500;
}

.gallery-wrap {
  list-style: none;
  padding: 0;
  position: relative;
  z-index: 10;
  text-align: center;
}

.gallery-item {
  text-align: center;
  margin: 40px;
  position: relative;
  display: inline-block;
}
@media (max-width: 700px) {
  .gallery-item {
    margin: 20px;
  }
}

.gallery-link {
  display: block;
  text-align: center;
  -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  cursor: pointer;
}
.gallery-link img {
  -webkit-box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.5);
  position: relative;
  display: block;
  z-index: 10;
  width: 200px;
  margin: 0 auto;
}
.gallery-link .gallery-name {
  font-size: 1.1em;
  color: #999999;
  margin: 5px auto;
}
.gallery-link .gallery-department {
  color: #595959;
  font-weight: 900;
  font-size: 1.14em;
  font-family: "ClarendonWideW01SC-Regu", Georgia, "Times New Roman", Times, serif;
  line-height: 1;
}
.gallery-link:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 95%;
  background-color: rgba(86, 0, 78, 0.7);
  opacity: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition: all 2s cubic-bezier(0, 1, 0.22, 1);
  transition: all 2s cubic-bezier(0, 1, 0.22, 1);
}
@media (min-width: 700px) {
  .gallery-link img {
    margin: 0 auto;
  }
  .gallery-link:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  .gallery-link:hover:after {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 1;
    -webkit-box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.5);
  }
  .gallery-link:hover .gallery-name {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

.gallery-item-filler {
  visibility: hidden;
  height: 0;
}

.lightbox-item {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1200;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 600px;
  height: 90%;
  max-height: 500px;
}
.lightbox-item img {
  position: absolute;
  left: 36%;
  top: -25%;
  box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.5);
  z-index: 30;
  width: 169px;
}
.lightbox-item h2 {
  display: none;
}
.lightbox-item .person-page-title {
  font-size: 1.3em;
  margin-top: 0em;
  margin-bottom: 1em;
  display: block;
  color: #268500;
}
.lightbox-item .gallery-department {
  display: none;
}
.lightbox-item .person-info-wrap {
  width: 95%;
  padding-left: 40px;
  display: block !important;
  position: absolute;
  top: 20%;
  left: 0px;
  z-index: 5;
  box-sizing: border-box;
}
.lightbox-item .person-info {
  padding: 45px 30px 30px 20px;
  margin: 0;
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.35);
  background-color: white;
  list-style: none;
  box-sizing: border-box;
  color: #999999;
  overflow: hidden;
}
.lightbox-item .person-info h3 {
  margin: 5px 0;
}
.lightbox-item .person-info li {
  line-height: 1.8;
}
.lightbox-item .person-info li.filter-full_name {
  border-top: 1px solid #999999;
  padding-top: 1.4em;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-family: "Proxima N W01 Thin Reg", "HelveticaNeue-Light", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.lightbox-item .person-info li.filter-company_location {
  border-bottom: 1px solid #999999;
  padding-bottom: 1em;
}
.lightbox-item .person-info .member_awards {
  padding: 4px 3px 3px 2px;
  margin: 0;
  background-color: white;
  list-style: none;
  box-sizing: border-box;
  color: #999999;
  overflow-y: scroll;
  height: 100px;
}
.lightbox-item .person-info .member_awards li {
  color: #f00;
  padding-top: 5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-family: "Proxima N W01 Thin Reg", "HelveticaNeue-Light", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (max-width: 700px) {
  .lightbox-item {
    text-align: center;
  }
  .lightbox-item img {
    position: relative;
    left: 0;
    transform: none;
  }
  .lightbox-item .person-info-wrap {
    padding-left: 0;
    width: 100%;
    top: 23%;
    transform: none !important;
  }
  .lightbox-item .person-info {
    padding: 20px 60px;
    border: none;
  }
  .lightbox-item .person-info li {
    line-height: 1.4;
  }
  .lightbox-item .gallery-department {
    display: none;
  }
}

.lightbox-img {
  position: absolute;
  z-index: 2000;
  width: 169px;
  height: 169px;
  top: 70px;
  left: 458px;
}

.lightbox-item-backdrop {
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  margin: auto;
  background-color: rgba(86, 0, 78, 0.7);
  z-index: 0;
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.35);
}
@media (max-width: 700px) {
  .lightbox-item-backdrop {
    left: 20px;
    right: 20px;
  }
}

.lightbox-btn {
  position: fixed;
  z-index: 2000;
  top: 15%;
  left: 10%;
  width: 85%;
  height: 120px;
  cursor: pointer;
}
.lightbox-btn button:focus {
  outline: none;
}

.lightbox-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  z-index: 1100;
}

.lightbox-single {
  position: relative;
  top: 0;
  left: 0;
  transform: none;
  margin: 50px auto;
  padding: 50px 0;
  z-index: 20;
}
.lightbox-single img {
  opacity: 1;
}
.lightbox-single .person-info-wrap {
  position: relative;
  transform: none;
}

.circle {
  width: 40px;
  height: 40px;
  background: transparent;
  border-width: 4px;
  border-style: solid;
  border-color: #000;
  border-radius: 50%;
  position: absolute;
  cursor: pointer;
  display: inline-block;
  top: -45%;
  right: 20px;
}
.circle:after {
  width: 24px;
  height: 4px;
  background-color: #000;
  content: "";
  left: 50%;
  top: 50%;
  margin: -2px 0 0 -12px;
  position: absolute;
  transform: rotate(-45deg);
}
.circle:before {
  left: 50%;
  top: 50%;
  margin: -2px 0 0 -12px;
  width: 24px;
  height: 4px;
  background-color: #000;
  content: "";
  position: absolute;
  transform: rotate(45deg);
}
@media (max-width: 700px) {
  .circle {
    top: -55%;
  }
}

.circle[data-animation="magnify"]:not(.magnify) {
  transition: 100ms ease-in-out;
}
.circle[data-animation="magnify"]:not(.magnify):hover {
  transform: scale(0.9);
}

.circle.magnify {
  transition: 100ms ease-in-out;
  transform: scale(1.6);
  opacity: 0;
}
JS
(function ($, window, document, undefined) {
  'use strict';
  
  $(function () {
  
    function animateImg(xPosSource, yPosSource, xPosDest, yPosDest) {
      var tl = new TimelineMax();  
      tl.fromTo(".lightbox-bg", .4, {scaleX:0}, {scaleX:1, transformOrigin:"right center", ease:Power4.easeInOut})
        .fromTo(".lightbox-img", .5, {display:'block', left:xPosSource, top:yPosSource, scale:1.05, opacity:0, z:0 }, { scale:1.2, opacity:1, z:0, ease:Power1.easeOut},"-=1.3")
        .to(".lightbox-img", .5, {left:xPosDest, top:yPosDest, scale:.85, z:0, ease:Power3.easeInOut})
        .fromTo(".lightbox-item", .3, {opacity:0}, {opacity:1})
        .to(".lightbox-img", 0, {display:'block'})
        .fromTo(".lightbox-btn", .3, {scaleX:0, opacity: 0}, {scaleX:1, opacity: 1, transformOrigin:"left center", ease:Power4.easeInOut})
        .fromTo(".lightbox-item-backdrop", 1.8, {opacity: 0, x:-90, scaleX:0 }, {scaleX:1, x:0, opacity:1, transformOrigin: "left center", ease:Power4.easeOut},"-=.7")
        .fromTo(".lightbox-item .person-info-wrap", .8, {opacity:0, scale:0}, {opacity: 1, scale:1, transformOrigin: "left center", ease:Power4.easeOut},"-=1.5")
        .fromTo(".lightbox-item .gallery-department", .8, {opacity: 0, y:50, z:0}, {opacity: 1, y:0, z:0, ease:Power4.easeOut},"-=1.2")
        .from(".lightbox-item .page-link", 1, {opacity: 0, x:-80, ease:Power4.easeOut}, "-=1.3")
        ;
    }
    function setImg(xPosSource, yPosSource, xPosDest, yPosDest) {
      var tl = new TimelineMax();
      tl.set(".lightbox-bg", {scaleX:1, transformOrigin:"right center"})
        .set(".lightbox-btn", {opacity:1})
        .set(".lightbox-item .headshot", {opacity:1})
        .set(".lightbox-item-backdrop", {scaleX:1, x:0, opacity:1, transformOrigin: "left center"})
        .set(".lightbox-item .person-info-wrap", {opacity: 1, scale:1, transformOrigin: "left center"})
        .set(".lightbox-item .gallery-department", {opacity: 1, y:0, z:0})
        ;
    }
  
    var viewportWidth = window.innerWidth;
  
    function openLightbox(obj) {
      $(".lightbox-bg, .lightbox-img, .lightbox-item, .lightbox-btn").removeClass("hidden");
      
      var content = obj.contents().clone();
      $(".lightbox-item").append(content, "");
      
      var sourceImg         = obj.children('.headshot');
      var sourceImgPos      = sourceImg.offset(); 
      var destinationImgPos = $(".lightbox-item .headshot").offset(); 
      var $imgAni           = sourceImg.clone().appendTo(".lightbox-img");
    
      if (viewportWidth <= 480) {
        setImg(sourceImgPos.left, sourceImgPos.top, destinationImgPos.left, destinationImgPos.top);
      } else {
        animateImg(sourceImgPos.left, sourceImgPos.top, destinationImgPos.left, destinationImgPos.top);
      }
    }
  
    function closeLightbox() {
      var tl2 = new TimelineMax({onComplete:function(){ 
        TweenMax.killAll(); 
        $(".lightbox-bg, .lightbox-item, .lightbox-img, .lightbox-btn").addClass("hidden");
        $(".lightbox-bg, .lightbox-item, .lightbox-img").removeAttr( "style" );
        $(".lightbox-img, .lightbox-item").contents().remove();
      }})
      tl2.fromTo(".lightbox-item", .4, {opacity:1, scale:1, ease:Power4.easeInOut}, {opacity:0, scale:0, ease:Power4.easeInOut});
      
    } 
  
  
    var olderThanIe10 = $("html").hasClass("lt-ie10");
  
    if (!olderThanIe10) { 
      $(".gallery-link").click(function(event) {
        event.preventDefault();
        openLightbox( $(this) );
      });
    }
    
    $(".lightbox-bg, .circle").click(function(event) {
      closeLightbox();
    });
  

    $('.circle').on('click',function(){
      var animClass = $(this).data('animation');
      var removeTime = $(this).data('remove');
      if($(this).hasClass(animClass)){
         $(this).removeClass(animClass);
      }else{
        $(this).addClass(animClass);
        if(typeof removeTime != 'undefined'){
          var el = $(this);
           setTimeout(function(){
             el.removeClass(animClass);
           },removeTime);
        }
      }
    });
  
  });
  })(jQuery, window, document);
Term
Wed, 12/27/2017 - 07:05

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv