Hammer.js很棒的垂直幻灯片过渡动画

支持电脑鼠标滚动和移动触摸屏刷滑操作。很棒的文字遮罩特效。

html5, slider

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2179
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

window.onload= function(){
  var mc = new Hammer(document.querySelector('#container'), {});

var pannedDown = false,
      pannedUp = false,
      lastScroll = 0;
  
  var mask = document.querySelector('.mask'),
      theNumbers = document.querySelectorAll('.numbers'),
      numbers = theNumbers[0],
        numbers2 = theNumbers[1],
      scene1 = document.querySelector(".one");

scene1.className="slide one"
    setTimeout(()=>{
      mask.className = "mask active";
      numbers.className="numbers down"; 
    numbers2.className="numbers down"

}, 1000);
    setTimeout(()=>{
      mask.className="mask";
      pannedDown = false;
    }, 1600)
  }
  
}

编译

CSS

$url1:'https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/images/_1920x1296_crop_center-center/Mostar-Bridge-dive-Desktop-v2.jpg';
//$url2:'https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/images/_1920x1296_crop_top-center/Skellig-Michael-Desktop-1.jpg';
$url2:'https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/images/_1920x1296_crop_center-center/Palouse_Portland-desktop_v2.jpg';

$z0:-1;
$z1:100;
$z2:200;
$z3:300;
$z4: 400;

#container{
  width:100%;
  height:101vh;
}

.instructions{
  position:fixed;
  top:10px;
  width:100%;
  text-align:center;
  color:white;
  z-index:$z4;
}

.slide{
  width:100%;
  height:100vh;
  background:transparent no-repeat center center fixed;
  background-size:cover;
  position:fixed;
  top:0;
  left:0;
  overflow:hidden;
  transition:all 1s ease-out!important;
  
  &.one{
    background-image:url($url1);
    z-index:$z1;
  }
  &.two{
    background-image:url($url2);
    z-index:$z0;
  }
  &.transition{
    transition:all 1s ease-out;
    top:-100%;
  }
}

.mask{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#2f407c;
  opacity:0;
  z-index:$z1;
  transition:all 1s ease-out;
  
  &.active{
    opacity:.9;
  }
  &.transition{
    top:-100%;
  }
}

.numbers{
  display:block;
  position:fixed;
  width:100%;
  height:100%;
  margin-left:-60px;
  font-size:200px;
  z-index:100;
  line-height:100vh;
  text-align:center;
  font-weight:900;
  transition:all 1.2s ease-in-out, opacity .5s ease-out;
  background:transparent url($url2) no-repeat center center fixed;
  background-size:cover;
  color:white;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  z-index:$z3;
  Padding-top:50%;
  opacity:0;
  
  &:nth-of-type(2){
    margin-left:60px!important;
  transition:all 1.8s ease-in-out, opacity .5s ease-out;
  }
  
  &.down{
    background-image:url($url1);
  }
    
  &.active{
    Padding-top:0;
    opacity:1;
  }
}

HTML

支持电脑鼠标滚动和移动触摸屏刷滑操作。很棒的文字遮罩特效。

html5, slider

编辑器支持Emmet

快捷键

支持电脑鼠标滚动和移动触摸屏刷滑操作。很棒的文字遮罩特效。

html5, slider

很棒的一款React.js垂直式显示的幻灯片组件

基于Velocity.js实现的幻灯片（页面垂直滚动轮播）动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：