js倾斜图库

下载代码

html

css

分享到微信朋友圈

html

<div class='card-container'>
  <div class='card' style='background-image: url(https://images.unsplash.com/photo-1630011725376-bd68a6403318?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80)'>
    <a href='#0'>
      Ephemeral
    </a>
  </div>
</div>
<div class='card-container'>
  <div class='card' style='background-image: url(https://images.unsplash.com/photo-1630095563891-308b2475acd5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1268&q=80)'>
    <a href='#1'>
      Nefarious
    </a>
  </div>
</div>
<div class='card-container'>
  <div class='card' style='background-image: url(https://unsplash.it/g/1920/1080/?random&v=2)'>
    <a href='#2'>
      Aurora
    </a>
  </div>
</div>
<div class='card-container'>
  <div class='card' style='background-image: url(https://images.unsplash.com/photo-1630083132692-000c3b18bb6c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80)'>
    <a href='#3'>
      Ineffable
    </a>
  </div>
</div>
<div class='card-container'>
  <div class='card' style='background-image: url(https://images.unsplash.com/photo-1572252009286-268acec5ca0a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80)'>
    <a href='#4'>
      Petrichor
    </a>
  </div>
</div>
<div class='card-container'>
  <div class='card' style='background-image: url(https://images.unsplash.com/photo-1618297358013-d3cb3e23ce25?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80)'>
    <a href='#5'>
      Epoch
    </a>
  </div>
</div>
<div class='card-container'>
  <div class='card' style='background-image: url(https://images.unsplash.com/photo-1619266465172-02a857c3556d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2089&q=80)'>
    <a href='#6'>
      Epiphany
    </a>
  </div>
</div>
<div class='card-container'>
  <div class='card' style='background-image: url(https://images.unsplash.com/photo-1623092475365-cad86ed1a263?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80)'>
    <a href='#7'>
      Luminescence
    </a>
  </div>
</div>
<div class='card-container'>
  <div class='card' style='background-image: url(https://images.unsplash.com/photo-1629199022827-eede3c3df471?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2089&q=80)'>
    <a href='#8'>
      Iridescent
    </a>
  </div>
</div>
<div class='card-container'>
  <div class='card' style='background-image: url(https://images.unsplash.com/photo-1629831676333-8e33b2d7cdd9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80)'>
    <a href='#9'>
      Denouement
    </a>
  </div>
</div>

css

html,
body {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -o-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 25vh 0;
  background: #484848;
}
.card-container {
  display: block;
  position: relative;
  width: 70%;
  height: 50vh;
  -webkit-perspective: 3000px;
  -moz-perspective: 3000px;
  -ms-perspective: 3000px;
  perspective: 3000px;
}
.card-container>.card {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.3);
  box-shadow: 0 0 50px rgba(0,0,0,0.3);
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transition: opacity 0.15s;
  -moz-transition: opacity 0.15s;
  -o-transition: opacity 0.15s;
  -ms-transition: opacity 0.15s;
  transition: opacity 0.15s;
  overflow: hidden;
  z-index: 100;
}
.card-container>.card.upper {
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
}
.card-container>.card.lower {
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
}
.card-container>.card>a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 50vh;
  font-size: 4em;
  font-family: 'Lato', Verdana, sans-serif;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 0 50px rgba(0,0,0,0.8);
  z-index: 300;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.card-container>.card::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 8em;
  -webkit-transform: translate(-50%, -50%) scaleX(0);
  -moz-transform: translate(-50%, -50%) scaleX(0);
  -o-transform: translate(-50%, -50%) scaleX(0);
  -ms-transform: translate(-50%, -50%) scaleX(0);
  transform: translate(-50%, -50%) scaleX(0);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px solid #fff;
  border-left: none;
  border-right: none;
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  -webkit-transition: -webkit-transform 0.6s;
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -ms-transition: -ms-transform 0.6s;
  transition: transform 0.6s;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  transition-delay: 0s;
  z-index: 300;
}
.card-container>.card::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.8s;
  -moz-transition: opacity 0.8s;
  -o-transition: opacity 0.8s;
  -ms-transition: opacity 0.8s;
  transition: opacity 0.8s;
}
.card-container>.card.center::before {
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  transition-delay: 0.2s;
  -webkit-transform: translate(-50%, -50%) scaleX(1);
  -moz-transform: translate(-50%, -50%) scaleX(1);
  -o-transform: translate(-50%, -50%) scaleX(1);
  -ms-transform: translate(-50%, -50%) scaleX(1);
  transform: translate(-50%, -50%) scaleX(1);
}
.card-container>.card.center::after {
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  z-index: 200;
}
.card-container:nth-child(0)>.card::after {
  background: -webkit-linear-gradient(top left, #4caf50, #607d8b);
  background: -moz-linear-gradient(top left, #4caf50, #607d8b);
  background: -o-linear-gradient(top left, #4caf50, #607d8b);
  background: -ms-linear-gradient(top left, #4caf50, #607d8b);
  background: linear-gradient(to bottom right, #4caf50, #607d8b);
}
.card-container:nth-child(1)>.card::after {
  background: -webkit-linear-gradient(top left, #4caf50, #607d8b);
  background: -moz-linear-gradient(top left, #4caf50, #607d8b);
  background: -o-linear-gradient(top left, #4caf50, #607d8b);
  background: -ms-linear-gradient(top left, #4caf50, #607d8b);
  background: linear-gradient(to bottom right, #4caf50, #607d8b);
}
.card-container:nth-child(2)>.card::after {
  background: -webkit-linear-gradient(top left, #ffa000, #e91e63);
  background: -moz-linear-gradient(top left, #ffa000, #e91e63);
  background: -o-linear-gradient(top left, #ffa000, #e91e63);
  background: -ms-linear-gradient(top left, #ffa000, #e91e63);
  background: linear-gradient(to bottom right, #ffa000, #e91e63);
}
.card-container:nth-child(3)>.card::after {
  background: -webkit-linear-gradient(top left, #9c27b0, #2196f3);
  background: -moz-linear-gradient(top left, #9c27b0, #2196f3);
  background: -o-linear-gradient(top left, #9c27b0, #2196f3);
  background: -ms-linear-gradient(top left, #9c27b0, #2196f3);
  background: linear-gradient(to bottom right, #9c27b0, #2196f3);
}
.card-container:nth-child(4)>.card::after {
  background: -webkit-linear-gradient(top left, #e91e63, #ff5722);
  background: -moz-linear-gradient(top left, #e91e63, #ff5722);
  background: -o-linear-gradient(top left, #e91e63, #ff5722);
  background: -ms-linear-gradient(top left, #e91e63, #ff5722);
  background: linear-gradient(to bottom right, #e91e63, #ff5722);
}
.card-container:nth-child(5)>.card::after {
  background: -webkit-linear-gradient(top left, #673ab7, #4caf50);
  background: -moz-linear-gradient(top left, #673ab7, #4caf50);
  background: -o-linear-gradient(top left, #673ab7, #4caf50);
  background: -ms-linear-gradient(top left, #673ab7, #4caf50);
  background: linear-gradient(to bottom right, #673ab7, #4caf50);
}
.card-container:nth-child(6)>.card::after {
  background: -webkit-linear-gradient(top left, #f44336, #9c27b0);
  background: -moz-linear-gradient(top left, #f44336, #9c27b0);
  background: -o-linear-gradient(top left, #f44336, #9c27b0);
  background: -ms-linear-gradient(top left, #f44336, #9c27b0);
  background: linear-gradient(to bottom right, #f44336, #9c27b0);
}
.card-container:nth-child(7)>.card::after {
  background: -webkit-linear-gradient(top left, #673ab7, #4caf50);
  background: -moz-linear-gradient(top left, #673ab7, #4caf50);
  background: -o-linear-gradient(top left, #673ab7, #4caf50);
  background: -ms-linear-gradient(top left, #673ab7, #4caf50);
  background: linear-gradient(to bottom right, #673ab7, #4caf50);
}
.card-container:nth-child(8)>.card::after {
  background: -webkit-linear-gradient(top left, #e91e63, #ff5722);
  background: -moz-linear-gradient(top left, #e91e63, #ff5722);
  background: -o-linear-gradient(top left, #e91e63, #ff5722);
  background: -ms-linear-gradient(top left, #e91e63, #ff5722);
  background: linear-gradient(to bottom right, #e91e63, #ff5722);
}
.card-container:nth-child(9)>.card::after {
  background: -webkit-linear-gradient(top left, #009688, #ffa000);
  background: -moz-linear-gradient(top left, #009688, #ffa000);
  background: -o-linear-gradient(top left, #009688, #ffa000);
  background: -ms-linear-gradient(top left, #009688, #ffa000);
  background: linear-gradient(to bottom right, #009688, #ffa000);
}
.card-container:nth-child(10)>.card::after {
  background: -webkit-linear-gradient(top left, #e91e63, #ff5722);
  background: -moz-linear-gradient(top left, #e91e63, #ff5722);
  background: -o-linear-gradient(top left, #e91e63, #ff5722);
  background: -ms-linear-gradient(top left, #e91e63, #ff5722);
  background: linear-gradient(to bottom right, #e91e63, #ff5722);
}

JavaScript

(function() {
  var clamp, container, containers, getStep, i, iid, len, link, nextCard, previousCard, scrollToPos, smoothStep, updateCards;

containers = document.getElementsByClassName('card-container');

iid = null;

clamp = function(val, min, max) {
    return Math.min(Math.max(val, min), max);
  };

smoothStep = function(start, end, point) {
    var x;
    if (point <= start) {
      return 0;
    }
    if (point >= end) {
      return 1;
    }
    x = (point - start) / (end - start);
    return clamp(x * x * (3 - 2 * x), 0, 1);
  };

getStep = function(start, end, percent) {
    return (end - start) * percent;
  };

scrollToPos = function(pos, duration) {
    var end, start, step, time;
    start = document.body.scrollTop;
    end = pos;
    time = Date.now();
    step = duration;
    clearInterval(iid);
    return iid = setInterval(function() {
      var offset, percent;
      step -= Date.now() - time;
      time = Date.now();
      percent = smoothStep(0, 1, (duration - step) / duration);
      offset = getStep(start, end, percent);
      document.body.scrollTop = start + offset;
      if (step <= 0) {
        clearInterval(iid);
        return iid = null;
      }
    }, 1000 / 60);
  };

for (i = 0, len = containers.length; i < len; i++) {
    container = containers[i];
    link = container.getElementsByTagName('a')[0];
    link.onclick = function(e) {
      var card, offset, rect;
      e.preventDefault();
      card = e.target.parentNode.parentNode;
      rect = card.getBoundingClientRect();
      offset = rect.top + window.scrollY;
      return scrollToPos(offset - (window.innerHeight / 4), 300);
    };
  }

updateCards = function() {
    var bounds, card, j, len1, percent, results, rotate;
    results = [];
    for (j = 0, len1 = containers.length; j < len1; j++) {
      container = containers[j];
      card = container.getElementsByClassName('card')[0];
      bounds = container.getBoundingClientRect();
      if (bounds.top <= 0) {
        percent = Math.abs(bounds.top) / bounds.height;
        rotate = -clamp(70 * percent, 0, 70);
        card.classList.remove('center');
        card.classList.remove('lower');
        card.classList.add('upper');
        card.style.transform = 'rotateX(' + rotate + 'deg)';
        results.push(card.style.opacity = 1 - (percent + -.1));
      } else if (bounds.bottom >= window.innerHeight) {
        percent = Math.abs(bounds.bottom - window.innerHeight) / bounds.height;
        rotate = clamp(70 * percent, 0, 70);
        card.classList.remove('center');
        card.classList.remove('upper');
        card.classList.add('lower');
        card.style.transform = 'rotateX(' + rotate + 'deg)';
        results.push(card.style.opacity = 1 - (percent + -.1));
      } else {
        card.classList.remove('lower');
        card.classList.remove('upper');
        card.classList.add('center');
        card.style.transform = 'rotateX(0deg)';
        results.push(card.style.opacity = 1);
      }
    }
    return results;
  };

nextCard = function() {
    var card, isNext, j, len1, offset, rect;
    if (iid != null) {
      return false;
    }
    isNext = false;
    for (j = 0, len1 = containers.length; j < len1; j++) {
      container = containers[j];
      card = container.getElementsByClassName('card')[0];
      if (isNext) {
        rect = container.getBoundingClientRect();
        offset = rect.top + window.scrollY;
        scrollToPos(offset - (window.innerHeight / 4), 300);
        break;
      }
      isNext = card.classList.contains('center');
    }
    return false;
  };

previousCard = function() {
    var card, j, len1, offset, previous, rect, results;
    if (iid != null) {
      return false;
    }
    previous = null;
    results = [];
    for (j = 0, len1 = containers.length; j < len1; j++) {
      container = containers[j];
      card = container.getElementsByClassName('card')[0];
      if (card.classList.contains('center')) {
        if (previous == null) {
          break;
        }
        rect = previous.getBoundingClientRect();
        offset = rect.top + window.scrollY;
        scrollToPos(offset - (window.innerHeight / 4), 300);
        break;
      }
      results.push(previous = container);
    }
    return results;
  };

document.onscroll = function() {
    return updateCards();
  };

window.onresize = function() {
    return updateCards();
  };

updateCards();

}).call(this);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg