• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.
Макет сетка для 3D карт

Разработка Макет сетка для 3D карт

Нет прав для скачивания
Макет сетка для 3D карт.
Пишем код HTML:
HTML:
<div class="container">
  <div class="grid">

    
    <div class="grid__title">
      <h2>Click a card</h2>
    </div>
    <div class="grid__item">
       <div class="card">
         <div class="card__image-holder">
           <img class="card__image" src="https://source.unsplash.com/800x600/?cardiff" alt="city" />
         </div>
         <div class="card__details">
           <h3 class="card__sub-title">Wales</h3>
           <h2 class="card__title">Cardiff
             <span class="card__icon card__icon--location">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
             </span>
             <span class="card__icon card__icon--close">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg
             </span>
           </h2>
           <p class="card__info">Cardiff is a port city on the south coast of Wales, where the River Taff meets the Severn Estuary</p>
           <div class="card__map" id="map-cardiff"></div>
         </div>
       </div>
    </div>
    <div class="grid__item">
       <div class="card">
         <div class="card__image-holder">
           <img class="card__image" src="https://source.unsplash.com/800x600/?edinburgh" alt="city" />
         </div>
         <div class="card__details">
           <h3 class="card__sub-title">Scotland</h3>
           <h2 class="card__title">Edinburgh
             <span class="card__icon card__icon--location">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
             </span>
             <span class="card__icon card__icon--close">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg
             </span>
           </h2>
           <p class="card__info">Edinburgh is Scotland's capital. It has a medieval Old Town and elegant Georgian New Town</p>
           <div class="card__map" id="map-edinburgh"></div>
         </div>
       </div>
    </div>
    <div class="grid__item">
       <div class="card">
         <div class="card__image-holder">
           <img class="card__image" src="https://source.unsplash.com/800x600/?dublin" alt="city" />
         </div>
         <div class="card__details">
           <h3 class="card__sub-title">Ireland</h3>
           <h2 class="card__title">Dublin
             <span class="card__icon card__icon--location">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
             </span>
             <span class="card__icon card__icon--close">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg
             </span>
           </h2>
           <p class="card__info">Dublin, capital of the Republic of Ireland, is on Ireland’s east coast at the mouth of the River Liffey</p>
           <div class="card__map" id="map-dublin"></div>
         </div>
       </div>
    </div>

    <div class="grid__copy">
      <p>The beautiful, random images for each city are from <a href="http://source.unsplash.com" target="_blank">source.unsplash.com</a></p>
      <p>The amazing, rotating, interactive maps are from <a href="http://www.mapbox.com" target="_blank">www.mapbox.com</a></p>
    </div>
        
  </div>
</div>
Пишем стиль:
SCSS:
// Fonts
@import "https://fonts.googleapis.com/css?family=Roboto:300,400";

// Colours
$bg1:       #ECD98B;
$bg2:       #F2B95A;
$cardBG:    #FFF;
$dropShad:  #7F5611;

// Mixins
@mixin clipping() {
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  overflow: hidden;
}

// Styles
body {
  background-color: $bg1;
  background-image: linear-gradient(56deg, $bg1 0%, $bg2 100%);
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

.container {
  height: 90vh;
  left: 0;
  padding: 5vh 5vw;
  position: absolute;
  top: 0;
  width: 90vw;
}


// - grid styles

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0;
  margin: auto;
  max-width: 340px;
}

@media only screen and (min-width: 680px) {
  .grid {
    grid-template-columns: 1fr 1fr;
    max-width: 680px;
    position: relative;
    transform: translateY(-50%);
    top: 50%;
  }
}

.grid__item {
  cursor: pointer;
  height: 0;
  padding-bottom: 90%;
  position: relative;
}

.grid__item::after,
.grid__item::before {
  content: "";
  display: block;
  position: absolute;
}

.grid__item::after {
  background: $cardBG;
  border-radius: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  top: 10px;
}

.grid__item::before {
  border-radius: 20px;
  bottom: 10px;
  box-shadow: 0 4px 80px 0 rgba($dropShad, 0.4);
  cursor: pointer;
  left: 10px;
  right: 10px;
  top: 40px;
}

.grid:hover .grid__item {
  opacity: 0.95;
  transform: scale(1);
  z-index: 5;
  &:before {
    box-shadow: 0 2px 8px 0 rgba($dropShad, 0.4);
  }
}

.grid__item--active,
.grid__item:hover {
  opacity: 1 !important;
  transform: scale(1.04) !important;
  z-index: 5 !important;
  &:before {
    box-shadow: 0 40px 100px 0 rgba($dropShad, 0.8) !important;
  }
}

.grid__title {
  grid-column: 1/-1;
  h2 {
    color: rgba(0,0,0,0.75);
    font-size: 20px;
    padding: 6px 18px 8px;
    position: relative;
    margin: 0 0 6px;
    &:after {
      background: rgba(0,0,0,0.25);
      bottom: 0;
      content: "";
      display: block;
      left: 18px;
      height: 4px;
      position: absolute;
      width: 30px;
    }
  }
}

.grid__copy {
  color: rgba(0,0,0,0.6);
  font-size: 14px;
  grid-column: -2/-1;
  line-height: 1.4;
  padding: 6px 18px;
  a {
    color: rgba(0,0,0,0.75);
  }
  p {
    max-width: 18em;
  }
}

// - card styles

.card__image-holder {
  border-radius: 10px 10px 0 0;
  bottom: calc(35% - 10px);
  @include clipping;
  left: 10px;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 10;
}

.card__image {
  max-width: 100%;
}

.card__details {
  background: #fff;
  border-radius: 0 0 10px 10px;
  bottom: 10px;
  left: 10px;
  overflow: hidden;
  position: absolute;
  right: 10px;
  top: calc(70% - 10px);
  z-index: 20;
}

.card__title {
  color: rgba(0,0,0,0.9);
  font-size: 18px;
  font-weight: 300;
  margin: 0;
  padding: 0 12px;
  position: relative;
}

.card__icon {
  bottom: -4px;
  opacity: 0;
  position: absolute;
  right: 10px;
  transform: scale(0.3);
  visibility: hidden;
  svg * {
    fill: #F8A51B;
  }
}

.card__sub-title {
  color: rgba(0,0,0,0.6);
  font-size: 14px;
  font-weight: 300;
  margin: 0;
  padding: 16px 12px 2px;
}

.card__info {
  color: rgba(0,0,0,0.6);
  font-size: 14px;
  line-height: 1.4;
  margin: 4px 0;
  opacity: 0;
  padding: 0 12px;
  transform: translateY(10px);
  visibility: hidden;
}

.card__map {
  top: 100%
}
.card__map {
  height: 100%;
  min-height: 340px;
  width: 100%;
  position: absolute;
  z-index: 999;

}

.grid__item--active,
.grid__item:hover {
  .card__image-holder {
    bottom: calc(50% + 10px);
  }
  .card__image {
    transform: scale(1.05) translateY(-5%);
  }
  .card__details {
    top: calc(50% - 10px);
  }
  .card__info {
    opacity: 1;
    transform: translateY(-16px);
    visibility: visible;
  }
  .card__title {
    transform: translateY(-20px);   
  }
  .card__icon--location {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
  }
  .card__sub-title {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.grid__item.grid__item--active,
.grid__item--active,
.grid__item--active:hover {
  opacity: 1 !important;
  transform: scale(1.085) !important;
  z-index: 100 !important;
  .card__details {
    border-radius: 10px;
    top: 10px;
  }
  .card__info {
    opacity: 0;
    transform: translateY(-20px);
    visibility: hidden;
  }
  .card__map {
    bottom: 0;
    top: 50px;
  }
}

.grid__item--active {
  .card__icon--location {
    opacity: 0 !important;
    transform: scale(1);
    visibility: visible;
  }
  .card__icon--close {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
  }
}

// - transition settings
.grid__item,
.grid__item *,
.grid__item::before {
  transition: all 0.3s ease-in;
}
.grid:hover .grid__item,
.grid:hover .grid__item *,
.grid:hover .grid__item::before {
  transition: all 0.2s ease-in;
}

.grid__item:hover,
.grid__item:hover *,
.grid__item:hover .grid__item::before {
  transition: all 0.3s cubic-bezier(0.65, 0.64, 0.66, 1.2) !important; 
}
Придаем динамику макету:
JavaScript:
 // toggle
var gridItems = document.getElementsByClassName("grid__item");

Array.from(gridItems).forEach(function (element) {
    // add click even listener to each .grid__item
    element.addEventListener('click', function () {

        if (element.classList.contains('grid__item--active')) {
            // if this element is active, then make inactive
            element.classList.remove('grid__item--active');
        } else {
            // else, remove active class from any that might have it
            var activeEls = document.getElementsByClassName('grid__item--active');
            Array.from(activeEls).forEach(function (activeEl) {
                activeEl.classList.remove('grid__item--active');
            });
            // make this element active
            element.classList.add('grid__item--active');
        }
    });

});


// mapbox stuff

mapboxgl.accessToken = 'pk.eyJ1IjoiY2FuZHJvbyIsImEiOiJjam95c3oyNXQyZWRvM3BwaDh1M3ZjdGVuIn0.MeVUbAnkD5W4KBVnjDJc5A';

var mapSettings = {
    style: 'mapbox://styles/mapbox/light-v9',
    zoom: 15.5,
    pitch: 45,
    bearing: -17.6 };


var mapCardiff = new mapboxgl.Map({
    style: mapSettings.style,
    center: [-3.1848228, 51.4782085],
    zoom: mapSettings.zoom,
    pitch: mapSettings.pitch,
    bearing: mapSettings.bearing,
    container: 'map-cardiff' });


var mapEdinburgh = new mapboxgl.Map({
    style: mapSettings.style,
    center: [-3.2021022, 55.9485947],
    zoom: mapSettings.zoom,
    pitch: mapSettings.pitch,
    bearing: mapSettings.bearing,
    container: 'map-edinburgh' });


var mapDublin = new mapboxgl.Map({
    style: mapSettings.style,
    center: [-6.3157431, 53.3242996],
    zoom: mapSettings.zoom,
    pitch: mapSettings.pitch,
    bearing: mapSettings.bearing,
    container: 'map-dublin' });



var maps = [mapCardiff, mapEdinburgh, mapDublin];var _loop = function _loop(


i) {

    var thisMap = maps[i];

    function rotateCamera(timestamp) {
        // clamp the rotation between 0 -360 degrees
        // Divide timestamp by 100 to slow rotation to ~10 degrees / sec
        maps[i].rotateTo(timestamp / 100 % 360, { duration: 0 });
        // Request the next frame of the animation.
        requestAnimationFrame(rotateCamera);

    }

    thisMap.on('load', function () {
        // Start the animation.
        rotateCamera(0);
        // Insert the layer beneath any symbol layer.
        var layers = thisMap.getStyle().layers;

        var labelLayerId;
        for (var i = 0; i < layers.length; i++) {
            if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
                labelLayerId = layers[i].id;
                break;
            }
        }

        thisMap.addLayer({
            'id': '3d-buildings',
            'source': 'composite',
            'source-layer': 'building',
            'filter': ['==', 'extrude', 'true'],
            'type': 'fill-extrusion',
            'minzoom': 15,
            'paint': {
                'fill-extrusion-color': '#aaa',

                // use an 'interpolate' expression to add a smooth transition effect to the
                // buildings as the user zooms in
                'fill-extrusion-height': [
                "interpolate", ["linear"], ["zoom"],
                15, 0,
                15.05, ["get", "height"]],

                'fill-extrusion-base': [
                "interpolate", ["linear"], ["zoom"],
                15, 0,
                15.05, ["get", "min_height"]],

                'fill-extrusion-opacity': .6 } },

        labelLayerId);
    });};for (var i = 0; i < maps.length; i++) {_loop(i);

}
Смотрим результат нашей работы:
1q77.gif
Автор
baltun
Скачиваний
0
Просмотры
307
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

  • Font Awesome Manager
    Font Awesome Manager
    Позволяет использовать только шрифты которые необходимы XenForo.
  • [OzzModz] Badges
    [OzzModz] Badges
    покажите всем что пользователь онлайн или оффлайн выставив этот статус на полэкрана в постбит.
  • [Liam W.] Conversation Folders
    [Liam W.] Conversation Folders
    Папки для переписок.
  • s9e Media Sites
    s9e Media Sites
    Пак BB-кодов для вставки медиа контента.
  • Watermarker
    Бета Watermarker
    Водяные знаки для изображений.
Верх Низ