链式动画布局案例收藏-白红宇

链式动画布局案例收藏

阅读量：5235 次

发布时间：2019-06-14

本文共 9945 字，大约阅读时间需要 33 分钟。

HTML:

<h2 class="el__heading">Section 1</h2>

</div>

<div class="el__text">Whatever</div>

</div>

</div>

<h2 class="el__heading">Section 2</h2>

</div>

<div class="el__text">Whatever</div>

</div>

</div>

<h2 class="el__heading">Section 3</h2>

</div>

<div class="el__text">Whatever</div>

</div>

</div>

<h2 class="el__heading">Section 4</h2>

</div>

<div class="el__text">Whatever</div>

</div>

</div>

<h2 class="el__heading">Section 5</h2>

</div>

<div class="el__text">Whatever</div>

</div>

</div>

</div>

</div>

</a>

</a>

CSS:

*, *:before, *:after {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

background: #1f1f1f;

font-family: 'Open Sans', Helvetica, Arial, sans-serif;

}

$vertPad: 80px;

$sidePad: 70px;

$numOfEls: 5;

$elMrg: 1%;

$initAT: 1s;

$initDelayStep: 0.1s;

$fullInitAT: $initAT + $initDelayStep * ($numOfEls - 1);

$moveAT: 0.6s;

$expandAT: 0.7s;

$expandDelay: 0.1s;

$bgScaleAT: 0.8s;

$fadeoutAT: $moveAT + $expandAT/2;

$indexHoverAT: 0.5s;

$closeBtnAT: 0.3s;

$closeBtnLineDelay: 0.15s;

$fullExpandAT: $moveAT + $expandDelay + $expandAT;

$contentFadeinAT: 0.5s;

@mixin elHover {

.el:hover & {

@content;

}

@mixin elActive {

.el.s--active & {

@content;

}

@mixin contInactive {

.cont.s--inactive & {

@content;

}

@mixin contElActive {

.cont.s--el-active & {

@content;

}

.cont {

position: relative;

overflow: hidden;

height: 100vh;

padding: $vertPad $sidePad;

&__inner {

position: relative;

height: 100%;

&:hover .el__bg:after {

opacity: 1;

}

.el {

$elW: (100% - $elMrg * ($numOfEls - 1)) / $numOfEls;

$elMrgRel: percentage($elMrg / $elW);

position: absolute;

left: 0;

top: 0;

width: $elW;

height: 100%;

background: #252525;

transition: transform $moveAT $expandAT, width $expandAT, opacity $moveAT $expandAT, z-index 0s $moveAT + $expandAT;

will-change: transform, width, opacity;

&:not(.s--active) {

cursor: pointer;

}

&__overflow {

overflow: hidden;

position: relative;

height: 100%;

}

&__inner {

overflow: hidden;

position: relative;

height: 100%;

transition: transform $initAT;

@include contInactive {

transform: translate3d(0,100%,0);

}

&__bg {

position: relative;

width: calc(100vw - #{$sidePad * 2});

height: 100%;

transition: transform $moveAT $expandAT;

will-change: transform;

&:before {

content: "";

position: absolute;

left: 0;

top: -5%;

width: 100%;

height: 110%;

background-size: cover;

background-position: center center;

transition: transform $initAT;

transform: translate3d(0,0,0) scale(1);

@include contInactive {

transform: translate3d(0,-100%,0) scale(1.2);

}

@include elActive {

transition: transform $bgScaleAT;

}

&:after {

$opacityAT: 0.5s;

content: "";

z-index: 1;

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

background: rgba(0,0,0,0.3);

opacity: 0;

transition: opacity $opacityAT;

@include contElActive {

transition: opacity $opacityAT $fullExpandAT;

opacity: 1 !important;

}

&__preview-cont {

z-index: 2;

display: flex;

justify-content: center;

align-items: center;

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

transition: all 0.3s $fullInitAT - 0.2s;

@include contInactive {

opacity: 0;

transform: translateY(10px);

}

@include contElActive {

opacity: 0;

transform: translateY(30px);

transition: all 0.5s;

}

&__heading {

color: #fff;

text-transform: uppercase;

font-size: 18px;

}

&__content {

z-index: -1;

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

padding: 30px;

opacity: 0;

pointer-events: none;

transition: all 0.1s;

@include elActive {

z-index: 2;

opacity: 1;

pointer-events: auto;

transition: all $contentFadeinAT $fullExpandAT;

}

&__text {

text-transform: uppercase;

font-size: 40px;

color: #fff;

}

&__close-btn {

z-index: -1;

position: absolute;

right: 10px;

top: 10px;

width: 60px;

height: 60px;

opacity: 0;

pointer-events: none;

transition: all 0s $closeBtnAT + $closeBtnLineDelay;

cursor: pointer;

@include elActive {

z-index: 5;

opacity: 1;

pointer-events: auto;

transition: all 0s $fullExpandAT;

}

&:before,

&:after {

content: "";

position: absolute;

left: 0;

top: 50%;

width: 100%;

height: 8px;

margin-top: -4px;

background: #fff;

opacity: 0;

transition: opacity 0s;

@include elActive {

opacity: 1;

}

&:before {

transform: rotate(45deg) translateX(100%);

@include elActive {

transition: all $closeBtnAT $fullExpandAT cubic-bezier(.72,.09,.32,1.57);

transform: rotate(45deg) translateX(0);

}

&:after {

transform: rotate(-45deg) translateX(100%);

@include elActive {

transition: all $closeBtnAT $fullExpandAT + $closeBtnLineDelay cubic-bezier(.72,.09,.32,1.57);

transform: rotate(-45deg) translateX(0);

}

&__index {

overflow: hidden;

position: absolute;

left: 0;

bottom: $vertPad * -1;

width: 100%;

height: 100%;

min-height: 250px;

text-align: center;

font-size: 100vw / $numOfEls;

line-height: 0.85;

font-weight: bold;

transition: transform $indexHoverAT, opacity $moveAT/2 $expandAT + $expandDelay + $moveAT;

transform: translate3d(0,1vw,0);

@include elHover {

transform: translate3d(0,0,0);

}

@include contElActive {

transition: transform $indexHoverAT, opacity $moveAT/2;

opacity: 0;

}

&-back,

&-front {

position: absolute;

left: 0;

bottom: 0;

width: 100%;

}

&-back {

color: #2f3840;

opacity: 0;

transition: opacity $indexHoverAT/2 $indexHoverAT/2;

@include elHover {

transition: opacity $indexHoverAT/2;

opacity: 1;

}

&-overlay {

overflow: hidden;

position: relative;

transform: translate3d(0,100%,0);

transition: transform $indexHoverAT 0.1s;

color: transparent;

&:before {

content: attr(data-index);

position: absolute;

left: 0;

bottom: 0;

width: 100%;

height: 100%;

color: #fff;

transform: translate3d(0,-100%,0);

transition: transform $indexHoverAT 0.1s;

}

@include elHover {

transform: translate3d(0,0,0);

&:before {

transform: translate3d(0,0,0);

}

@for $i from 0 to $numOfEls {

&:nth-child(#{$i + 1}) {

$x: (100% + $elMrgRel) * $i;

transform: translate3d($x,0,0);

transform-origin: $x + 50% 50%;

@include contElActive {

&:not(.s--active) {

transform: scale(0.5) translate3d($x,0,0);

opacity: 0;

transition: transform $fadeoutAT, opacity $fadeoutAT;

}

.el__inner {

transition-delay: $initDelayStep * $i;

}

.el__bg {

transform: translate3d($elW * $i * -1,0,0);

&:before {

transition-delay: 0.1s * $i;

background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-#{$i + 3}.jpg');

}

&:hover {

.el__bg:after {

opacity: 0;

}

&.s--active {

z-index: 1;

width: 100%;

transform: translate3d(0,0,0);

transition: transform $moveAT, width $expandAT $moveAT + $expandDelay, z-index 0s;

.el__bg {

transform: translate3d(0,0,0);

transition: transform $moveAT;

&:before {

transition-delay: $moveAT;

transform: scale(1.1);

}

.icon-link {

position: absolute;

left: 5px;

bottom: 5px;

width: 32px;

img {

width: 100%;

vertical-align: top;

}

&--twitter {

left: auto;

right: 5px;

}

JS:

var $cont = document.querySelector('.cont');

var $elsArr = [].slice.call(document.querySelectorAll('.el'));

var $closeBtnsArr = [].slice.call(document.querySelectorAll('.el__close-btn'));

setTimeout(function() {

$cont.classList.remove('s--inactive');

}, 200);

$elsArr.forEach(function($el) {

$el.addEventListener('click', function() {

if (this.classList.contains('s--active')) return;

$cont.classList.add('s--el-active');

this.classList.add('s--active');

});

$closeBtnsArr.forEach(function($btn) {

$btn.addEventListener('click', function(e) {

e.stopPropagation();

$cont.classList.remove('s--el-active');

document.querySelector('.el.s--active').classList.remove('s--active');

});

转载于:https://www.cnblogs.com/gnaygnaw/p/6505146.html

你可能感兴趣的文章

centos7升级firefox的flash插件

二、create-react-app自定义配置

查看>>

Android PullToRefreshExpandableListView的点击事件

NHibernate.3.0.Cookbook第四章第6节的翻译

查看>>

使用shared memory 计算矩阵乘法（其实并没有加速多少）

IList和DataSet性能差别转自 http://blog.csdn.net/ilovemsdn/article/details/2954335