文字柱状滚动效果

下载代码

html

css

分享到微信朋友圈

html

css

body {
  background: #000;
}

* {
  box-sizing: border-box;
}

.pen {
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}

.stage {
  margin: auto;
  padding: 1px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  -webkit-perspective-origin: center;
          perspective-origin: center;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: skewY(-6deg);
          transform: skewY(-6deg);
}
.stage::before, .stage::after {
  content: '';
  width: 15%;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
  position: absolute;
  left: 17%;
  top: -50%;
  bottom: -50%;
  display: block;
  z-index: 1;
}
.stage::after {
  left: auto;
  right: 17%;
  background-image: linear-gradient(to left, black, rgba(0, 0, 0, 0));
}

.vortext ~ .vortext {
  margin-top: 0px;
}

.vortext {
  position: relative;
  text-align: center;
}
.vortext::before {
  content: 'A';
  font-size: 120px;
  color: transparent;
  pointer-events: none;
}
.vortext:first-child ~ * {
  margin-top: -30px;
}

.vortextRibbon {
  position: absolute;
  top: 0;
  left: -9999px;
  right: -9999px;
  margin: auto;
  bottom: 0;
  width: 314.15%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: center;
          transform-origin: center;
}

.transitionEnabled {
  transition: -webkit-transform linear 240s;
  transition: transform linear 240s;
  transition: transform linear 240s, -webkit-transform linear 240s;
}

.letterWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  width: auto;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.letter {
  display: inline-block;
  color: #fff;
  font-size: 0;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.letter > span {
  display: flex;
  height: 100%;
  width: 100%;
  -webkit-transform: translateZ(500px);
          transform: translateZ(500px);
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-size: 120px;
  font-weight: 800;
  text-transform: uppercase;
  position: relative;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

JavaScript

const ITEM_COUNT = 25;
const DIAMETER = 1000;
const PROJECTION = DIAMETER / 2;
const ANIM_DUR = 240000;
const STAGE_SELECTOR = '.stage'
const OUTER_SELECTOR = '.vortext'
const INNER_SELECTOR = '.vortextRibbon'

const els = document.querySelectorAll(OUTER_SELECTOR);
const stageEl = document.querySelector(STAGE_SELECTOR);

const getAngle = (adjacentLen, oppositeLen) => {
  const hypotenuse = Math.hypot(adjacentLen, oppositeLen);
  return Math.asin(oppositeLen / hypotenuse) * 180 / Math.PI;
}

const getLetterMarkup = (letter) => `<div class="letterWrap"><div class="letter"><span>${letter}</span></div></div>`

const render = () => {
  for (let i = 0; i < els.length; i++) {
    const el = els[i].querySelector(INNER_SELECTOR);
    const bounds = el.getBoundingClientRect();
    const str = el.innerText.replace(/ /g, '\u00a0'); // replace spaces with thin spaces
    const strLen = str.split('').length;
    let newHtmlStr = str.split('').map(s => getLetterMarkup(s)).join('');
    el.innerHTML = newHtmlStr;
    let proportionInc = 0;
    let proportion = 0;
    let offset = 0;
    let contentWidth = 0;
    let delta = 0;
    
    // Get the content width vs the bounds width
    for (let child of el.children) {
      contentWidth += child.children[0].getBoundingClientRect().width;
    }
    delta = bounds.width - contentWidth;
    
    for (let ii = 0; ii < el.children.length; ii++) {
      const correction = 3.1;
      const paddingMultiplier = 1.75;
      
      const prevProportion = proportion;
      const childEl = el.children[ii].children[0];
      const childBounds = childEl.getBoundingClientRect();
      
      const grandChildEl = childEl.children[0];
      const grandChildBounds = grandChildEl.getBoundingClientRect();
      
      const padding = delta / strLen * paddingMultiplier;
      const boundsWidth = grandChildBounds.width + correction + padding;
      
      const halfAngle = getAngle(PROJECTION,  boundsWidth / 2)

proportionInc += halfAngle;
      childEl.style.transform = `rotateY(${(proportionInc - 90)}deg)`;
      
      grandChildEl.style.transform = `translateZ(${PROJECTION}px)`;
      proportionInc += halfAngle;
      
    }
  }
  
}

let iteration = 0;

setStyles();
render();
setTimeout(animate);

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