Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                       

<section class="section" id="map-tour">
<div id="map"></div>
  
    <div id="map-description">
    <div></div>
  </div>


  <div id="map-nav" class="nav-container">
      <div id="map-controls">
  <ul class="list-inline">
 <li>
  <div id="info-toggle">
       <span class="lsu-icon lsu-info"></span>
      </div>
    </li>
<li>
    <div id="map-toggle">
      <span class="lsu-icon lsu-location"></span>
  </div>
    </li>
    
        <li>
  <div id="tracking-toggle">
       <span class="lsu-icon lsu-phone"></span>
      </div>
    </li>
    
  </ul>
  </div>
  
           <div class="swiper-wrapper">
    

         <div class="swiper-slide" id="hallChampions">
            <div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=XQG3Tzp_gpoAAAQvOjcSow&fov=90&heading=85&pitch=10&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
           Hall of Champions
             </div>
      <div class="swiper-slide" id="auditorium">
         <div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=Y72qCrWy83MAAAQvOjcSmw&fov=180&heading=100&pitch=-20&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
        Bo Campbell Auditorium
             </div>
 <div class="swiper-slide" id="academicFame">
      <div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=O3qss0emm3QAAAQvOjcShg&fov=90&heading=235&pitch=10&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
   Academic Hall of Fame
             </div>
   
           <div class="swiper-slide" id="mainOffice">
                <div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=L4Vd-oYDno8AAAQvOjcSgw&fov=90&heading=30&pitch=10&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
             Main Office
             </div>
           <div class="swiper-slide" id="studentCenter">
              <div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=5cH4F0sTbKQAAAQvOjcSiw&fov=90&heading=235&pitch=10&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
             Student Learning Center
             </div>
  
           <div class="swiper-slide" id="confRoom">
              <div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=eKXSiIXcex0AAAQvOjcSkQ&fov=90&heading=235&pitch=10&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
             CCACSA Conference Room
             </div>
               <div class="swiper-slide" id="champsOffice">
                   <div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=5oPTaAttsQsAAAQvOjcSjw&fov=90&heading=150&pitch=10&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
                 CHAMPS Life Skill Office
             </div>
                <div class="swiper-slide" id="mediaRoom">
                    <div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=czRB_4vi1MMAAAQvOjcSkA&fov=90&heading=90&pitch=10&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
                  Media Training Room
             </div>

        <div class="swiper-slide" id="computerLab">
           <div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=yR19n-i4GdYAAAQvOjcSrA&fov=90&heading=340&pitch=10&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
          Computer Lab
             </div>
          <div class="swiper-slide" id="library">
             <div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=kLi3Bd0qEF4AAAQvOjcSog&fov=90&heading=235&pitch=10&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
            CCACSA Library
             </div>
    
        <div class="swiper-slide" id="tutCenter">
             <div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=qZsZ9k6YqGkAAAQvOjcSng&fov=90&heading=0&pitch=10&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
          Tutorial Center
             </div>
           <div class="swiper-slide" id="fuelCenter">
                <div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=XQG3Tzp_gpoAAAQvOjcSow&fov=90&heading=56&pitch=10&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
             E.D.G.E Fuel Center
             </div>
    </div>
  </div>
</section>
  
              
            
!

CSS

              
                            #map-tour {
height:100vh;
width:100%;
      position: relative;
  overflow: hidden;
}

#map,
#street-view {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
  html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

#map-nav {
  background: #fff;
position:absolute;
bottom: 0;
  left: 0;
  z-index: 999;
  color: #fff;
  height: 20vh;
  width: 100%;
      text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: column;
    flex-direction: column;
      -webkit-transition: 1s ease;
  transition: 1s ease;
  -webkit-transform: translate3d(0,80%,0);
     transform: translate3d(0,80%,0);
}
#map-nav.opened {
    opacity: 1;
  z-index: 998;
  -webkit-transform: translate3d(0,0,0);
     transform: translate3d(0,0,0);
}

.nav-list-header {
    color: #fdd023;
    text-transform: uppercase;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-size: 2vw;
    letter-spacing: .25vw;
}
#map-nav li {
    display: inline-block;
    padding-right: 15px;
    padding-left: 15px;
    font-size: 1vw;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1px;
    text-align: center;
}
#map-nav li:hover {
  cursor: pointer;
}
#map-controls {
  position:absolute;
bottom: 140%;
width: 100%;
  z-index: 99;
  color: #fff;
  text-align: center;
  z-index: 999;
}


#map-toggle .lsu-icon:before {
  background: #461d7c;
  color: #fff;
  padding: 10px;
  border-radius: 50%;
  font-size: 5em;
}
#info-toggle .lsu-icon:before,
#tracking-toggle .lsu-icon:before {
  background: #461d7c;
  padding: 10px;
  color: #fff;
  border-radius: 50%;
  font-size: 5em;
}
html.ios #map-toggle .lsu-icon:before {
  padding: 15px;
  font-size: 6em;
}
#tracking-toggle {
display: none;
}
html.ios #tracking-toggle,
html.android #tracking-toggle {
display: block;
}

#map-description {
position:absolute;
top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  color: #fff;
z-index: 11;
  background: rgba(0,0,0,0.5);
       -webkit-transition: 1s ease;
  transition: 1s ease;
  z-index: -1;
}
#map-description.active {
     opacity: 1;
  z-index: 998;
         -webkit-transition: 1s ease;
  transition: 1s ease;

background: rgba(0,0,0,0.6);
}
#map-description > div {
  position: relative;
    height: 100%;
  width: 100%;
      text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: column;
    flex-direction: column;
      transition: 1s ease;
  font-size: 4vw;
  color: #fff;
  line-height: 1.5;
  letter-spacing: .1vw;
     margin: auto;
  padding: 10vw;
}

 .nav-container {
        width: 100%;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
   padding: 10px 0;
    }
    .swiper-slide {
        background-size: cover;
        background-position: center;
         height: 100%;
      width: 33%;
        box-sizing: border-box;
        padding: 10px 0;
      position: relative;
      text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: column;
    flex-direction: column;
          font-size: 1.5vw;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1px;
    text-align: center;
    }
.bg-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: 50% 50%;
    z-index: -1;
}
.bg-image:before {
  content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
 background: rgba(0,0,0,0.6);
    z-index: -1;
}

@media(min-width: 768px) {
  #map-controls {
bottom: 110%;
}
#map-toggle .lsu-icon:before {
  font-size: 2.5em;
}
#info-toggle .lsu-icon:before,
#tracking-toggle .lsu-icon:before {
  font-size: 2.5em;
}
#map-description > div {
font-size: 3vw;
}
      .swiper-slide {
      width: 23%;
  }
}

@media(min-width:1200px) {
#map-description > div {
font-size: 24px;
max-width: 1100px;
padding: 15px;
}
   
}
              
            
!

JS

              
                

var panos = {
  "hallChampions": "ZJuhSmhmhFoAAAQvOjcSgg",
 "auditorium": "F:-IUQH2UUFIkE/VAJv6xw5QQI/AAAAAAAARUM/KD4ztiFLCHoZNDv2m8vrVOCA9ybLhPT5gCJkC",
  "academicFame": "O3qss0emm3QAAAQvOjcShg",
  "studentCenter": "5cH4F0sTbKQAAAQvOjcSiw",
  "mainOffice": "L4Vd-oYDno8AAAQvOjcSgw",
  "excellenceCenter": "t3ODJUm4nRUAAAQvOjcSlQ",
  "confRoom": "eKXSiIXcex0AAAQvOjcSkQ",
  "champsOffice": "5oPTaAttsQsAAAQvOjcSjw",
  "mediaRoom": "czRB_4vi1MMAAAQvOjcSkA",
  "computerLab": "yR19n-i4GdYAAAQvOjcSrA",
  "library": "kLi3Bd0qEF4AAAQvOjcSog",
  "tutCenter": "qZsZ9k6YqGkAAAQvOjcSng",
  "fuelCenter": "XQG3Tzp_gpoAAAQvOjcSow",
}
var headings = {
  "hallChampions": {
    heading: 85,
    pitch: 5,
    zoom: 1
  },
  "auditorium": {
      heading: 275,
    pitch: 10,
    zoom: 1
  },
  "academicFame": {
    heading: 250,
    pitch: 5,
    zoom: 0
  },
  "studentCenter": {
    heading: 90,
    pitch: 0,
    zoom: 0
  },
  "mainOffice": {
    heading: 30,
    pitch: 0,
    zoom: 0
  },
  "excellenceCenter": {
    heading: 180,
    pitch: 0,
    zoom: 0
  },
  "confRoom": {
    heading: 0,
    pitch: 0,
    zoom: 0
  },
  "champsOffice": {
    heading: 150,
    pitch: 0,
    zoom: 0
  },
  "mediaRoom": {
    heading: 90,
    pitch: 0,
    zoom: 0
  },
  "computerLab": {
    heading: 340,
    pitch: 0,
    zoom: 0
  },
  "library": {
    heading: 250,
    pitch: 0,
    zoom: 0
  },
  "tutCenter": {
    heading: 0,
    pitch: 0,
    zoom: 0
  },
  "fuelCenter": {
    heading: 56,
    pitch: 0,
    zoom: 0
  },
}

var descriptions = {
  "hallChampions": "This inspiring hallway serves as a shrine to the athletic accomplishments of our student-athletes and is located on the South side of the Southeast entrance of the building.",
 "auditorium": "On the first floor on either side of the hallways are enormous wooden doors that open up to the largest auditorium on our campus. With the capacity to seat over 1,000 people, Bo Campbell Auditorium is used for classes, conventions, conferences, test taking, athletic meetings, student-athlete seminars, tutoring/GA meetings and more.",
  "academicFame": "Mirroring the Hall of Champions, this hallway recognizes the academic successes of our student-athletes. The goal of student-athletes is more than just being able to succeed in competition, but also to excel in the classroom.",
  "studentCenter": "The Center houses four learning specialists, and a room for both private and group work. The learning specialist help assists our student-athletes by teaching academic skills and strategies.",
  "mainOffice": "In between the Hall of Champions and the Academic Hall of Fame is an office space where nine staff members (Academic Advisors, Life-Skills Manager, Information Technology Manager, and Assistant Vice Chancellor and Executive Director) are located. This is where our student-athletes have their academic advising meetings, schedule appointments and receive administrative help.",
  "excellenceCenter": "Walking past the Academic Hall of Fame and the wooden doors of Bo Campbell Auditorium is our Academic Center for Excellence. This area includes a computer lab, work study space, and two academic advisors’ offices.",
  "confRoom": "On our first floor, pass the doors of the Academic Center for Excellence is another hallway with offices. Here is a wonderful state of the art conference room that has a high definition projection screen and a polycom phone.  The walls highlight the academic achievements of our student-athletes.6",
  "champsOffice": "In this suite, you can find two administrative offices, a media training lab, and a mini-computer lab.",
  "mediaRoom": "This is a place where our student-athletes participate in media etiquette, public speaking, and interviewing skills.",
  "computerLab": "Our state of the art lab includes 52 desktop computers, 12 study rooms, two printers, and framed names of our Academic Honor Roll student-athletes. ",
  "library": "Although the normal word “library” would house books, our library consists of large tables and chairs. The library is decorated with memorable moments and murals of student-athletes in the classroom, community, graduation and competition.",
  "tutCenter": "Our newly renovated tutorial center is where our tutoring appointments occur. There are 20 rooms in total, each with chairs, tables, smartboards or thirty-nine inch monitors, and desktop computers for our student-athletes and their tutors to use. There are approximately 1100-1300 tutoring appointments per week. Some appointments are one on one and others are in group settings.",
  "fuelCenter": "In our recently added fueling center there are many healthy snacks and meals available to our student-athletes. Although fueling stations are around campus for student-athletes, having one in our Academic Center helps them stay fueled and focused for excellence.",
}

var mapdesc = $('#map-description > div');

function updateDescription(info){
  mapdesc.text(info);
}

var nav = document.querySelector("#map-nav");
var mapToggle = document.querySelector("#map-toggle");
var mapControls = document.querySelector("#map-controls");
var infoToggle = document.querySelector("#info-toggle");
var mapdescWrapper = $('#map-description');

 var swiper = new Swiper('.nav-container', {
        spaceBetween: 10,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true,
   keyboardControl: true,
    });

var tlNav = new TimelineMax({
  paused: true,
  reversed: true
});

tlNav.to(nav, .15, {
  className: "+=opened"
});

tlNav.to(document.body, .1, {
  className: "+=nav-active"
});

tlNav.staggerTo("#map-nav>ul>li", .1, {
  opacity: 1,
  y: 0,
  ease: Back.easeOut
}, .075);

mapToggle.onclick = function() {
  tlNav.reversed() ? tlNav.play() : tlNav.reverse();

};

function toggleMenu(){
  tlNav.reversed() ? tlNav.play() : tlNav.reverse();
}

var tlInfo= new TimelineMax({
  paused: true,
  reversed: true
});

tlInfo.to(mapdescWrapper, .0009, {
  className: "+=active"
});
infoToggle.onclick = function() {
  tlInfo.reversed() ? tlInfo.play() : tlInfo.reverse();

};

var panorama = new google.maps.StreetViewPanorama(
  document.getElementById('map'), {
    pano: 'ZJuhSmhmhFoAAAQvOjcSgg',
    pov: {
      heading: 85,
      pitch: 0
    },
    zoom: 0,
    fullscreenControl: false,
    motionTracking: false,
    motionTrackingControl: true,
    disableDefaultUI: !0,
    linksControl: false,
    panControl: false,
    enableCloseButton: false,

  });
    mapdesc.text(descriptions.hallChampions);
console.dir(panorama);

$('#tracking-toggle').click(function() {
panorama.getMotionTracking() ? panorama.setMotionTracking(false) : panorama.setMotionTracking(true);
});

$('#hallChampions').click(function() {
  toggleMenu();
  panorama.setPano('ZJuhSmhmhFoAAAQvOjcSgg');
  panorama.setPov(headings.hallChampions);
  mapdesc.text(descriptions.hallChampions);
  
});
$('#auditorium').click(function() {
  toggleMenu();
  panorama.setPano('F:-IUQH2UUFIkE/VAJv6xw5QQI/AAAAAAAARUM/KD4ztiFLCHoZNDv2m8vrVOCA9ybLhPT5gCJkC');
panorama.setPov(headings.auditorium);
  mapdesc.text(descriptions.auditorium);
  
});

$('#academicFame').click(function() {
  toggleMenu();
  panorama.setPano('O3qss0emm3QAAAQvOjcShg');
  panorama.setPov(headings.academicFame);
  mapdesc.text(descriptions.academicFame);
});

$('#studentCenter').click(function() {
  toggleMenu();
  panorama.setPano('5cH4F0sTbKQAAAQvOjcSiw');
  panorama.setPov(headings.studentCenter);
  mapdesc.text(descriptions.studentCenter);
});

$('#mainOffice').click(function() {
  toggleMenu();
  panorama.setPano('L4Vd-oYDno8AAAQvOjcSgw');
  panorama.setPov(headings.mainOffice);
  mapdesc.text(descriptions.mainOffice);
});

$('#excellenceCenter').click(function() {
  toggleMenu();
  panorama.setPano('t3ODJUm4nRUAAAQvOjcSlQ');
  panorama.setPov(headings.excellenceCenter);
  mapdesc.text(descriptions.excellenceCenter);
});

$('#confRoom').click(function() {
  toggleMenu();
  panorama.setPano('eKXSiIXcex0AAAQvOjcSkQ');
  panorama.setPov(headings.confRoom);
  mapdesc.text(descriptions.confRoom);
});

$('#champsOffice').click(function() {
  toggleMenu();
  panorama.setPano('5oPTaAttsQsAAAQvOjcSjw');
  panorama.setPov(headings.champsOffice);
  mapdesc.text(descriptions.champsOffice);
});

$('#mediaRoom').click(function() {
  toggleMenu();
  panorama.setPano('czRB_4vi1MMAAAQvOjcSkA');
  panorama.setPov(headings.mediaRoom);
  mapdesc.text(descriptions.mediaRoom);
});

$('#computerLab').click(function() {
  toggleMenu();
  panorama.setPano('yR19n-i4GdYAAAQvOjcSrA');
  panorama.setPov(headings.computerLab);
  mapdesc.text(descriptions.computerLab);
});

$('#library').click(function() {
  toggleMenu();
  panorama.setPano('kLi3Bd0qEF4AAAQvOjcSog');
  panorama.setPov(headings.library);
  mapdesc.text(descriptions.hallChampions);
});

$('#tutCenter').click(function() {
  toggleMenu();
  panorama.setPano('qZsZ9k6YqGkAAAQvOjcSng');
  panorama.setPov(headings.tutCenter);
  mapdesc.text(descriptions.tutCenter);
});


$('#fuelCenter').click(function() {
  toggleMenu();
  panorama.setPano('XQG3Tzp_gpoAAAQvOjcSow');
  panorama.setPov(headings.fuelCenter);
  mapdesc.text(descriptions.fuelCenter);
});

              
            
!
999px

Console