以下是 18款anime.js文字动画特效css代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="zh" class="no-js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>18款anime.js文字动画特效</title>
<link rel="stylesheet" type="text/css" href="css/decolines.css" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/lettereffect.css" />
<link rel="stylesheet" type="text/css" href="css/pater.css" />
<script>document.documentElement.className = 'js';</script>
</head>
<body class="loading">
<svg class="hidden">
<defs>
<symbol id="icon-arrow" viewBox="0 0 24 24">
<title>arrow</title>
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
</symbol>
<symbol id="icon-drop" viewBox="0 0 24 24">
<title>drop</title>
<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
</symbol>
<symbol id="icon-cross" viewBox="0 0 24 24">
<title>cross</title>
<path d="M2.9,2.9l18.2,18.2 M2.9,21.1L21.1,2.9 M21.8,20.4L13.4,12l8.4-8.4l-1.4-1.4L12,10.6L3.6,2.2L2.2,3.6l8.4,8.4l-8.4,8.4l1.4,1.4l8.4-8.4l8.4,8.4L21.8,20.4z"/>
</symbol>
</defs>
</svg>
<main>
<section class="content content--c1" id="section1">
<a href="#section1" class="section-link">#1</a>
<div class="slideshow slideshow--1" data-effect="fx1">
<div class="slide slide--current"><h2 class="title title--style-1">Forever</h2></div>
<div class="slide"><h2 class="title title--style-1">Glorious</h2></div>
<div class="slide"><h2 class="title title--style-1">Timeless</h2></div>
<div class="slide"><h2 class="title title--style-1">Love</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger btn--prev">Previous</button>
<button class="btn btn--trigger btn--next">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c2" id="section2">
<a href="#section2" class="section-link">#2</a>
<div class="slideshow slideshow--2" data-effect="fx3">
<div class="slide slide--current"><h2 class="title title--style-2 title--centered">Monday</h2></div>
<div class="slide"><h2 class="title title--style-2 title--centered">Tuesday</h2></div>
<div class="slide"><h2 class="title title--style-2 title--centered">Wednesday</h2></div>
<div class="slide"><h2 class="title title--style-2 title--centered">Thursday</h2></div>
<div class="slide"><h2 class="title title--style-2 title--centered">Friday</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger btn--prev">Previous</button>
<button class="btn btn--trigger btn--next">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c3" id="section3">
<a href="#section3" class="section-link">#3</a>
<div class="slideshow slideshow--3" data-effect="fx2">
<div class="slide slide--current"><h2 class="title title--style-3 title--centered">Freedom</h2></div>
<div class="slide"><h2 class="title title--style-3 title--centered">Equality</h2></div>
<div class="slide"><h2 class="title title--style-3 title--centered">Justice</h2></div>
<div class="slide"><h2 class="title title--style-3 title--centered">Knowledge</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger btn--prev">Previous</button>
<button class="btn btn--trigger btn--next">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c4" id="section4">
<a href="#section4" class="section-link">#4</a>
<div class="slideshow slideshow--4" data-effect="fx4">
<div class="slide slide--current"><h2 class="title title--style-4 title--right">Psycho</h2></div>
<div class="slide"><h2 class="title title--style-4 title--right">Uprising</h2></div>
<div class="slide"><h2 class="title title--style-4 title--right">Revolt</h2></div>
<div class="slide"><h2 class="title title--style-4 title--right">Resistance</h2></div>
<div class="slide"><h2 class="title title--style-4 title--right">Aftermath</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger btn--prev">Previous</button>
<button class="btn btn--trigger btn--next">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c5" id="section5">
<a href="#section5" class="section-link">#5</a>
<div class="slideshow slideshow--5" data-effect="fx5">
<div class="slide slide--current"><h2 class="title title--style-5">Crocodile</h2></div>
<div class="slide"><h2 class="title title--style-5">Koala</h2></div>
<div class="slide"><h2 class="title title--style-5">Cassowary</h2></div>
<div class="slide"><h2 class="title title--style-5">Echidna</h2></div>
<div class="slide"><h2 class="title title--style-5">Kangaroo</h2></div>
<div class="slide"><h2 class="title title--style-5">Dugong</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger btn--prev">Previous</button>
<button class="btn btn--trigger btn--next">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c6" id="section6">
<a href="#section6" class="section-link">#6</a>
<div class="slideshow slideshow--6" data-effect="fx6">
<div class="slide slide--current"><h2 class="title title--style-6">Samoa</h2></div>
<div class="slide"><h2 class="title title--style-6">Hossegor</h2></div>
<div class="slide"><h2 class="title title--style-6">Bali</h2></div>
<div class="slide"><h2 class="title title--style-6">Tofino</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger">Previous</button>
<button class="btn btn--trigger">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c7" id="section7">
<a href="#section7" class="section-link">#7</a>
<div class="slideshow slideshow--7" data-effect="fx7">
<div class="slide slide--current"><h2 class="title title--style-7">Birth Place: Earth</h2></div>
<div class="slide"><h2 class="title title--style-7">Race: Human</h2></div>
<div class="slide"><h2 class="title title--style-7">Politics: Freedom</h2></div>
<div class="slide"><h2 class="title title--style-7">Religion: Love</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger btn--prev">Previous</button>
<button class="btn btn--trigger btn--next">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c8" id="section8">
<a href="#section8" class="section-link">#8</a>
<div class="slideshow slideshow--8" data-effect="fx8">
<div class="slide slide--current"><h2 class="title title--style-8 title--right">Fennel</h2></div>
<div class="slide"><h2 class="title title--style-8 title--right">Ginger</h2></div>
<div class="slide"><h2 class="title title--style-8 title--right">Cardamom</h2></div>
<div class="slide"><h2 class="title title--style-8 title--right">Turmeric</h2></div>
<div class="slide"><h2 class="title title--style-8 title--right">Garlic</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger">Previous</button>
<button class="btn btn--trigger">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c9" id="section9">
<a href="#section9" class="section-link">#9</a>
<div class="slideshow slideshow--9" data-effect="fx9">
<div class="slide slide--current"><h2 class="title title--style-9">Begonia</h2></div>
<div class="slide"><h2 class="title title--style-9">Foxglove</h2></div>
<div class="slide"><h2 class="title title--style-9">Tulip</h2></div>
<div class="slide"><h2 class="title title--style-9">Marigold</h2></div>
<div class="slide"><h2 class="title title--style-9">Narcissus</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger">Previous</button>
<button class="btn btn--trigger">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c10" id="section10">
<a href="#section10" class="section-link">#10</a>
<div class="slideshow slideshow--10" data-effect="fx10">
<div class="slide slide--current"><h2 class="title title--style-10 title--centered">Mercury</h2></div>
<div class="slide"><h2 class="title title--style-10 title--centered">Venus</h2></div>
<div class="slide"><h2 class="title title--style-10 title--centered">Earth</h2></div>
<div class="slide"><h2 class="title title--style-10 title--centered">Mars</h2></div>
<div class="slide"><h2 class="title title--style-10 title--centered">Jupiter</h2></div>
<div class="slide"><h2 class="title title--style-10 title--centered">Saturn</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger">Previous</button>
<button class="btn btn--trigger">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c11" id="section11">
<a href="#section11" class="section-link">#11</a>
<div class="slideshow slideshow--11" data-effect="fx11">
<div class="slide slide--current"><h2 class="title title--style-11">Keystone</h2></div>
<div class="slide"><h2 class="title title--style-11">North Dakota</h2></div>
<div class="slide"><h2 class="title title--style-11">Seminole</h2></div>
<div class="slide"><h2 class="title title--style-11">Yellowstone</h2></div>
<div class="slide"><h2 class="title title--style-11">Lakehead</h2></div>
<div class="slide"><h2 class="title title--style-11">Enbridge</h2></div>
<div class="slide"><h2 class="title title--style-11">Jayhawk</h2></div>
<div class="slide"><h2 class="title title--style-11">Longhorn</h2></div>
<div class="slide"><h2 class="title title--style-11">Magellan</h2></div>
<div class="slide"><h2 class="title title--style-11">Dixie</h2></div>
<div class="slide"><h2 class="title title--style-11">Calnev</h2></div>
<div class="slide"><h2 class="title title--style-11">Bakken</h2></div>
<div class="slide"><h2 class="title title--style-11">Seaway</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger">Previous</button>
<button class="btn btn--trigger">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c12" id="section12">
<a href="#section12" class="section-link">#12</a>
<div class="slideshow slideshow--12" data-effect="fx12">
<div class="slide slide--current"><h2 class="title title--style-12">Broccoli</h2></div>
<div class="slide"><h2 class="title title--style-12">Lentils</h2></div>
<div class="slide"><h2 class="title title--style-12">Beans</h2></div>
<div class="slide"><h2 class="title title--style-12">Amaranth</h2></div>
<div class="slide"><h2 class="title title--style-12">Chia Seeds</h2></div>
<div class="slide"><h2 class="title title--style-12">Almonds</h2></div>
<div class="slide"><h2 class="title title--style-12">Asparagus</h2></div>
<div class="slide"><h2 class="title title--style-12">Spirulina</h2></div>
<div class="slide"><h2 class="title title--style-12">Hemp Seeds</h2></div>
<div class="slide"><h2 class="title title--style-12">Edamame</h2></div>
<div class="slide"><h2 class="title title--style-12">Chickpeas</h2></div>
<div class="slide"><h2 class="title title--style-12">Quinoa</h2></div>
<div class="slide"><h2 class="title title--style-12">Pumpkin Seeds</h2></div>
<div class="slide"><h2 class="title title--style-12">Spinach</h2></div>
</div>
<img class="deco-image" src="img/11.png" alt="Broccoli" />
<nav class="actions">
<button class="btn btn--trigger">Previous</button>
<button class="btn btn--trigger">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c13" id="section13">
<a href="#section13" class="section-link">#13</a>
<div class="slideshow slideshow--13" data-effect="fx13">
<div class="slide slide--current"><h2 class="title title--style-13 title--centered">Lakabe</h2></div>
<div class="slide"><h2 class="title title--style-13 title--centered">Suderbyn</h2></div>
<div class="slide"><h2 class="title title--style-13 title--centered">Sachawasi</h2></div>
<div class="slide"><h2 class="title title--style-13 title--centered">Auroville</h2></div>
<div class="slide"><h2 class="title title--style-13 title--centered">Heathcote</h2></div>
<div class="slide"><h2 class="title title--style-13 title--centered">Permacore</h2></div>
<div class="slide"><h2 class="title title--style-13 title--centered">Arcosanti</h2></div>
<div class="slide"><h2 class="title title--style-13 title--centered">Lemulawen</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger">Previous</button>
<button class="btn btn--trigger">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c14" id="section14">
<a href="#section14" class="section-link">#14</a>
<div class="slideshow slideshow--14" data-effect="fx14">
<div class="slide slide--current"><h2 class="title title--style-14 title--centered">Salvador</h2></div>
<div class="slide"><h2 class="title title--style-14 title--centered">Manaus</h2></div>
<div class="slide"><h2 class="title title--style-14 title--centered">Brasília</h2></div>
<div class="slide"><h2 class="title title--style-14 title--centered">Natal</h2></div>
<div class="slide"><h2 class="title title--style-14 title--centered">Curitiba</h2></div>
<div class="slide"><h2 class="title title--style-14 title--centered">Guarulhos</h2></div>
<div class="slide"><h2 class="title title--style-14 title--centered">Fortaleza</h2></div>
<div class="slide"><h2 class="title title--style-14 title--centered">Recife</h2></div>
<div class="slide"><h2 class="title title--style-14 title--centered">Niterói</h2></div>
<div class="slide"><h2 class="title title--style-14 title--centered">Campinas</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger">Previous</button>
<button class="btn btn--trigger">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c15" id="section15">
<a href="#section15" class="section-link">#15</a>
<div class="slideshow slideshow--15" data-effect="fx15">
<div class="slide slide--current"><h2 class="title title--style-15">Botanico</h2></div>
<div class="slide"><h2 class="title title--style-15">Native Roots</h2></div>
<div class="slide"><h2 class="title title--style-15">Lightshade</h2></div>
<div class="slide"><h2 class="title title--style-15">Kind Love</h2></div>
<div class="slide"><h2 class="title title--style-15">Silver Stem</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger">Previous</button>
<button class="btn btn--trigger">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c16" id="section16">
<a href="#section16" class="section-link">#16</a>
<div class="slideshow slideshow--16" data-effect="fx16">
<div class="slide slide--current"><h2 class="title title--style-16 title--centered">Hydrogen</h2></div>
<div class="slide"><h2 class="title title--style-16 title--centered">Radium</h2></div>
<div class="slide"><h2 class="title title--style-16 title--centered">Selenium</h2></div>
<div class="slide"><h2 class="title title--style-16 title--centered">Uranium</h2></div>
<div class="slide"><h2 class="title title--style-16 title--centered">Neon</h2></div>
<div class="slide"><h2 class="title title--style-16 title--centered">Promethium</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger">Previous</button>
<button class="btn btn--trigger">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c17" id="section17">
<a href="#section17" class="section-link">#17</a>
<div class="slideshow slideshow--17" data-effect="fx17">
<div class="slide slide--current"><h2 class="title title--style-17 title--centered">Violin</h2></div>
<div class="slide"><h2 class="title title--style-17 title--centered">Mandolin</h2></div>
<div class="slide"><h2 class="title title--style-17 title--centered">Sallameh</h2></div>
<div class="slide"><h2 class="title title--style-17 title--centered">Balalaika</h2></div>
<div class="slide"><h2 class="title title--style-17 title--centered">Ukulele</h2></div>
<div class="slide"><h2 class="title title--style-17 title--centered">Nyckelharpa</h2></div>
<div class="slide"><h2 class="title title--style-17 title--centered">Sitar</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger">Previous</button>
<button class="btn btn--trigger">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c18" id="section18">
<a href="#section18" class="section-link">#18</a>
<div class="slideshow slideshow--18" data-effect="fx18">
<div class="slide slide--current"><h2 class="title title--style-18 title--centered">Guayaquil</h2></div>
<div class="slide"><h2 class="title title--style-18 title--centered">Kolkata</h2></div>
<div class="slide"><h2 class="title title--style-18 title--centered">Bangkok</h2></div>
<div class="slide"><h2 class="title title--style-18 title--centered">Odessa</h2></div>
<div class="slide"><h2 class="title title--style-18 title--centered">Guangzhou</h2></div>
<div class="slide"><h2 class="title title--style-18 title--centered">Mumbai</h2></div>
<div class="slide"><h2 class="title title--style-18 title--centered">New Orleans</h2></div>
<div class="slide"><h2 class="title title--style-18 title--centered">Amsterdam</h2></div>
<div class="slide"><h2 class="title title--style-18 title--centered">Venice</h2></div>
<div class="slide"><h2 class="title title--style-18 title--centered">Miami</h2></div>
<div class="slide"><h2 class="title title--style-18 title--centered">New York</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger">Previous</button>
<button class="btn btn--trigger">Next</button>
</nav>
</section><!-- /content -->
</main>
<script src="js/charming.min.js"></script>
<script src="js/anime.min.js"></script>
<script src="js/lineMaker.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/textfx.js"></script>
<script>
(function() {
/*
How to use the plugin:
// Initialize
var txt = new TextFx(this.el.querySelector('.title'));
// Show letters:
// txt.show([effect] [,callback]);
// If nothing is passed, then no animation.
// ´effect´ can either be one of the predefined effects: ['fx1',...,'fx17'] or a object literal representing both in and out animations (anime.js based):
// example:
effect = {
in: {
duration: 500,
delay: function(el, index) {
return 250+index*40;
},
easing: 'easeOutExpo',
opacity: 1,
translateY: ['50%','0%']
},
out: {
duration: 500,
delay: function(el, index) {
return index*40;
},
easing: 'easeOutExpo',
opacity: 0,
translateY: '-50%'
}
}
// ´callback´ is the callback function, after all the letters finish the animation.
// Hide letters:
// txt.hide([effect] [,callback]); (same logic of show)
*/
// For demo purposes only:
// Let´s build a simple slideshow to exemplify the TextFx plugin:
// Body element.
var bodyEl = document.body;
// Preload all images..
imagesLoaded(bodyEl, { background: true }, function() {
bodyEl.classList.remove('loading');
});
// Slide obj: each Slideshow´s slide will contain the HTML element and the instance of TextFx.
var Slide = function(el) {
this.el = el;
this.txt = new TextFx(this.el.querySelector('.title'));
},
// The Slideshow obj.
Slideshow = function(el) {
this.el = el;
this.current = 0;
this.slides = [];
var self = this;
[].slice.call(this.el.querySelectorAll('.slide')).forEach(function(slide) {
self.slides.push(new Slide(slide));
});
this.slidesTotal = this.slides.length;
this.effect = this.el.getAttribute('data-effect');
};
Slideshow.prototype._navigate = function(direction) {
if( this.isAnimating ) {
return false;
}
this.isAnimating = true;
var self = this, currentSlide = this.slides[this.current];
this.current = direction === 'next' ? (this.current < this.slidesTotal - 1 ? this.current + 1 : 0) : (this.current = this.current > 0 ? this.current - 1 : this.slidesTotal - 1);
var nextSlide = this.slides[this.current];
var checkEndCnt = 0, checkEnd = function() {
++checkEndCnt;
if( checkEndCnt === 2 ) {
currentSlide.el.classList.remove('slide--current');
nextSlide.el.classList.add('slide--current');
self.isAnimating = false;
}
};
// Call the TextFx hide method and pass the effect string defined in the data-effect attribute of the Slideshow element.
currentSlide.txt.hide(this.effect, function() {
currentSlide.el.style.opacity = 0;
checkEnd();
});
// First hide the next slide´s TextFx text.
nextSlide.txt.hide();
nextSlide.el.style.opacity = 1;
// And now call the TextFx show method.
nextSlide.txt.show(this.effect, function() {
checkEnd();
});
};
Slideshow.prototype.next = function() { this._navigate('next'); };
Slideshow.prototype.prev = function() { this._navigate('prev'); };
function getDecoColor(pos) {
switch(pos) {
case 0 : return '#d9d9e0'; break;
case 2 : return '#171412'; break;
case 6 : return '#87d6b5'; break;
case 11 : return '#CBD6CB'; break;
case 13 : return '#F1D50E'; break;
case 14 : return '#52CA67'; break;
default : return '#fff'; break;
};
}
[].slice.call(document.querySelectorAll('.content')).forEach(function(el, pos) {
var slideshow = new Slideshow(el.querySelector('.slideshow'));
el.querySelector('.actions').firstElementChild.addEventListener('click', function() { slideshow.prev(); });
el.querySelector('.actions').lastElementChild.addEventListener('click', function() { slideshow.next(); });
if( pos === 0 || pos === 2 || pos === 6 || pos === 11 || pos === 13 || pos === 14 ) {
var decoColor = getDecoColor(pos);
new LineMaker({
parent: {element: el, position: 'prepend'},
lines: pos % 2 === 0 ? [
{top: 0, left: '6%', width: 1, height: '100vh', color: decoColor},
{top: 0, left: '26%', width: 1, height: '100vh', color: decoColor},
{top: 0, left: '46%', width: 1, height: '100vh', color: decoColor},
{top: 0, left: '66%', width: 1, height: '100vh', color: decoColor},
{top: 0, left: '86%', width: 1, height: '100vh', color: decoColor}
] : [
{top: '20%', left: 0, width: '100vw', height: 1, color: decoColor},
{top: '40%', left: 0, width: '100vw', height: 1, color: decoColor},
{top: '60%', left: 0, width: '100vw', height: 1, color: decoColor},
{top: '80%', left: 0, width: '100vw', height: 1, color: decoColor}
]
});
}
});
// Credits Modal:
var modal = document.querySelector('.modal'),
modalOverlay = modal.querySelector('.modal__overlay'),
modalCloseCtrl = modal.querySelector('.modal__action'),
modalContent = modal.querySelector('.modal__content'),
inner = modal.querySelector('.modal__text').children;
modalContent.style.WebkitTransform = modalContent.style.transform = 'scale3d(1,0,1)';
modalCloseCtrl.style.opacity = 0;
[].slice.call(inner).forEach(function(el) {
el.style.opacity = 0;
})
function bezier(x1, y1, x2, y2, epsilon) {
var curveX = function(t){
var v = 1 - t;
return 3 * v * v * t * x1 + 3 * v * t * t * x2 + t * t * t;
};
var curveY = function(t){
var v = 1 - t;
return 3 * v * v * t * y1 + 3 * v * t * t * y2 + t * t * t;
};
var derivativeCurveX = function(t){
var v = 1 - t;
return 3 * (2 * (t - 1) * t + v * v) * x1 + 3 * (- t * t * t + 2 * v * t) * x2;
};
return function(t){
var x = t, t0, t1, t2, x2, d2, i;
// First try a few iterations of Newton's method -- normally very fast.
for (t2 = x, i = 0; i < 8; i++){
x2 = curveX(t2) - x;
if (Math.abs(x2) < epsilon) return curveY(t2);
d2 = derivativeCurveX(t2);
if (Math.abs(d2) < 1e-6) break;
t2 = t2 - x2 / d2;
}
t0 = 0, t1 = 1, t2 = x;
if (t2 < t0) return curveY(t0);
if (t2 > t1) return curveY(t1);
// Fallback to the bisection method for reliability.
while (t0 < t1){
x2 = curveX(t2);
if (Math.abs(x2 - x) < epsilon) return curveY(t2);
if (x > x2) t0 = t2;
else t1 = t2;
t2 = (t1 - t0) * .5 + t0;
}
// Failure
return curveY(t2);
};
};
var duration = 500, epsilon = (1000 / 60 / duration) / 4, easing1 = bezier(0.1, 1, 0.9, 1, epsilon);
anime.easings['myCustomEasing'] = function(t){ return easing1(t); };
function openCredits() {
modal.classList.remove('modal--closed');
anime({
targets: modalOverlay,
duration: duration,
easing: 'myCustomEasing',
opacity: [0,1]
});
anime({
targets: modalContent,
duration: duration,
easing: 'myCustomEasing',
scaleY: [0,1]
});
anime({
targets: modalCloseCtrl,
duration: 200,
delay: 300,
easing: 'easeOutExpo',
opacity: [0,1]
});
anime({
targets: inner,
duration: 800,
delay: function(el, index) { return 250+index*70; },
opacity: {
easing: 'linear',
value: [0, 1]
},
translateY: {
easing: 'easeOutExpo',
value: [30, 0]
}
});
}
function closeCredits() {
modal.classList.add('modal--closed');
}
document.querySelector('.btn--modal-trigger').addEventListener('click', openCredits);
modalCloseCtrl.addEventListener('click', closeCredits);
var paterEl = document.querySelector('.pater'),
pater = new TextFx(paterEl.querySelector('.pater__title')),
fxPater = {
in: {
duration: 400,
delay: function(el, index) { return 50+index*20; },
easing: 'easeOutExpo',
opacity: 1,
translateY: ['50%','0%']
},
out: {
duration: 400,
delay: function(el, index) {
return index*20;
},
easing: 'easeOutExpo',
opacity: 0,
translateY: '-50%'
}
};
paterEl.addEventListener('mouseenter', function() {
pater.hide();
setTimeout(function() {
pater.show(fxPater);
},60);
});
paterEl.addEventListener('mouseleave', function() {
pater.show();
});
})();
</script>
</body>
</html>
JS代码(charming.min.js):
!function(e){
"undefined"==typeof module?this.charming=e:module.exports=e}
(function(e,n){
"use strict";
n=n||{
}
;
var t=n.tagName||"span",o=null!=n.classPrefix?n.classPrefix:"char",r=1,a=function(e){
for(var n=e.parentNode,a=e.nodeValue,c=a.length,l=-1;
++l<c;
){
var d=document.createElement(t);
o&&(d.className=o+r,r++),d.appendChild(document.createTextNode(a[l])),n.insertBefore(d,e)}
n.removeChild(e)}
;
return function c(e){
for(var n=[].slice.call(e.childNodes),t=n.length,o=-1;
++o<t;
)c(n[o]);
e.nodeType===Node.TEXT_NODE&&a(e)}
(e),e}
);
JS代码(textfx.js):
/** * TextFx.js * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2016,Codrops * http://www.codrops.com */
;
(function(window){
'use strict';
/** * Equation of a line. */
function lineEq(y2,y1,x2,x1,currentVal){
// y = mx + bvar m = (y2 - y1) / (x2 - x1),b = y1 - m * x1;
return m * currentVal + b;
}
function TextFx(el){
this.el = el;
this._init();
}
TextFx.prototype.effects ={
'fx1':{
in:{
duration:1000,delay:function(el,index){
return 75+index*40;
}
,easing:'easeOutElastic',elasticity:650,opacity:{
value:1,easing:'easeOutExpo',}
,translateY:['50%','0%']}
,out:{
duration:400,delay:function(el,index){
return index*40;
}
,easing:'easeOutExpo',opacity:0,translateY:'-100%'}
}
,'fx2':{
in:{
duration:700,delay:function(el,index){
return index*50;
}
,easing:'easeOutCirc',opacity:1,translateX:function(el,index){
return [(50+index*10),0]}
}
,out:{
duration:0,opacity:0}
}
,'fx3':{
in:{
duration:800,delay:function(el,index){
return index*50;
}
,easing:'easeOutElastic',opacity:1,translateY:function(el,index){
return index%2 === 0 ? ['-80%','0%']:['80%','0%'];
}
}
,out:{
duration:800,delay:function(el,index){
return index*50;
}
,easing:'easeOutExpo',opacity:0,translateY:function(el,index){
return index%2 === 0 ? '80%':'-80%';
}
}
}
,'fx4':{
in:{
duration:700,delay:function(el,index){
return (el.parentNode.children.length-index-1)*80;
}
,easing:'easeOutElastic',opacity:1,translateY:function(el,index){
return index%2 === 0 ? ['-80%','0%']:['80%','0%'];
}
,rotateZ:[90,0]}
,out:{
duration:500,delay:function(el,index){
return (el.parentNode.children.length-index-1)*80;
}
,easing:'easeOutExpo',opacity:0,translateY:function(el,index){
return index%2 === 0 ? '80%':'-80%';
}
,rotateZ:function(el,index){
return index%2 === 0 ? -25:25;
}
}
}
,'fx5':{
perspective:1000,in:{
duration:700,delay:function(el,index){
return 550+index*50;
}
,easing:'easeOutQuint',opacity:{
value:1,easing:'linear',}
,translateY:['-150%','0%'],rotateY:[180,0]}
,out:{
duration:700,delay:function(el,index){
return index*60;
}
,easing:'easeInQuint',opacity:{
value:0,easing:'linear',}
,translateY:'150%',rotateY:-180}
}
,'fx6':{
in:{
duration:600,easing:'easeOutQuart',opacity:1,translateY:function(el,index){
return index%2 === 0 ? ['-40%','0%']:['40%','0%'];
}
,rotateZ:[10,0]}
,out:{
duration:0,opacity:0}
}
,'fx7':{
in:{
duration:250,delay:function(el,index){
return 200+index*25;
}
,easing:'easeOutCubic',opacity:1,translateY:['-50%','0%']}
,out:{
duration:250,delay:function(el,index){
return index*25;
}
,easing:'easeOutCubic',opacity:0,translateY:'50%'}
}
,'fx8':{
in:{
duration:400,delay:function(el,index){
return 150+(el.parentNode.children.length-index-1)*20;
}
,easing:'easeOutQuad',opacity:1,translateY:['100%','0%']}
,out:{
duration:400,delay:function(el,index){
return (el.parentNode.children.length-index-1)*20;
}
,easing:'easeInOutQuad',opacity:0,translateY:'-100%'}
}
,'fx9':{
perspective:1000,origin:'50% 100%',in:{
duration:400,delay:function(el,index){
return index*50;
}
,easing:'easeOutSine',opacity:1,rotateY:[-90,0]}
,out:{
duration:200,delay:function(el,index){
return index*50;
}
,easing:'easeOutSine',opacity:0,rotateY:45}
}
,'fx10':{
in:{
duration:1000,delay:function(el,index){
return 100+index*30;
}
,easing:'easeOutElastic',elasticity:anime.random(400,700),opacity:1,rotateZ:function(el,index){
return [anime.random(20,40),0];
}
}
,out:{
duration:0,opacity:0}
}
,'fx11':{
perspective:1000,origin:'50% 100%',in:{
duration:400,delay:function(el,index){
return 200+index*20;
}
,easing:'easeOutExpo',opacity:1,rotateY:[-90,0]}
,out:{
duration:400,delay:function(el,index){
return index*20;
}
,easing:'easeOutExpo',opacity:0,rotateY:90}
}
,'fx12':{
perspective:1000,origin:'50% 100%',in:{
duration:400,delay:function(el,index){
return 200+index*30;
}
,easing:'easeOutExpo',opacity:1,rotateX:[90,0]}
,out:{
duration:400,delay:function(el,index){
return index*30;
}
,easing:'easeOutExpo',opacity:0,rotateX:-90}
}
,'fx13':{
in:{
duration:800,easing:'easeOutExpo',opacity:1,translateY:function(el,index){
var p = el.parentNode,lastElOffW = p.lastElementChild.offsetWidth,firstElOffL = p.firstElementChild.offsetLeft,w = p.offsetWidth - lastElOffW - firstElOffL - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft),tyVal = lineEq(0,200,firstElOffL + w/2,firstElOffL,el.offsetLeft);
return [Math.abs(tyVal)+50+'%','0%'];
}
,rotateZ:function(el,index){
var p = el.parentNode,lastElOffW = p.lastElementChild.offsetWidth,firstElOffL = p.firstElementChild.offsetLeft,w = p.offsetWidth - lastElOffW - p.firstElementChild.offsetLeft - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft),rz = lineEq(90,-90,firstElOffL + w,firstElOffL,el.offsetLeft);
return [rz,0];
}
}
,out:{
duration:500,easing:'easeOutExpo',opacity:0,translateY:'-150%'}
}
,'fx14':{
in:{
duration:500,easing:'easeOutExpo',delay:function(el,index){
return 200+index*30;
}
,opacity:1,rotateZ:[20,0],translateY:function(el,index){
var p = el.parentNode,lastElOffW = p.lastElementChild.offsetWidth,firstElOffL = p.firstElementChild.offsetLeft,w = p.offsetWidth - lastElOffW - firstElOffL - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft),tyVal = lineEq(-130,-60,firstElOffL+w,firstElOffL,el.offsetLeft);
return [Math.abs(tyVal)+'%','0%'];
}
}
,out:{
duration:400,easing:'easeOutExpo',delay:function(el,index){
return (el.parentNode.children.length-index-1)*30;
}
,opacity:0,rotateZ:20,translateY:function(el,index){
var p = el.parentNode,lastElOffW = p.lastElementChild.offsetWidth,firstElOffL = p.firstElementChild.offsetLeft,w = p.offsetWidth - lastElOffW - firstElOffL - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft),tyVal = lineEq(-60,-130,firstElOffL+w,firstElOffL,el.offsetLeft);
return tyVal+'%';
}
}
}
,'fx15':{
perspective:1000,in:{
duration:400,delay:function(el,index){
return 100+index*50;
}
,easing:'easeOutExpo',opacity:1,rotateX:[110,0]}
,out:{
duration:400,delay:function(el,index){
return index*50;
}
,easing:'easeOutExpo',opacity:0,rotateX:-110}
}
,'fx16':{
in:{
duration:function(el,index){
return anime.random(800,1000)}
,delay:function(el,index){
return anime.random(0,75)}
,easing:'easeInOutExpo',opacity:1,translateY:['-300%','0%'],rotateZ:function(el,index){
return [anime.random(-50,50),0];
}
}
,out:{
duration:function(el,index){
return anime.random(800,1000)}
,delay:function(el,index){
return anime.random(0,80)}
,easing:'easeInOutExpo',opacity:0,translateY:'300%',rotateZ:function(el,index){
return anime.random(-50,50);
}
}
}
,'fx17':{
in:{
duration:650,easing:'easeOutQuint',delay:function(el,index){
return 450+(el.parentNode.children.length-index-1)*30;
}
,opacity:1,translateX:function(el,index){
return [-1*el.offsetLeft,0];
}
}
,out:{
duration:1,delay:400,opacity:0}
}
,'fx18':{
in:{
duration:800,delay:function(el,index){
return 600+index*150;
}
,easing:'easeInOutQuint',opacity:1,scaleY:[8,1],scaleX:[0.5,1],translateY:['-100%','0%']}
,out:{
duration:800,delay:function(el,index){
return index*150;
}
,easing:'easeInQuint',opacity:0,scaleY:{
value:8,delay:function(el,index){
return 100+index*150;
}
,}
,scaleX:0.5,translateY:'100%'}
}
}
;
TextFx.prototype._init = function(){
this.el.classList.add('letter-effect');
// Split word(s) into letters/spans.charming(this.el,{
classPrefix:'letter'}
);
this.letters = [].slice.call(this.el.querySelectorAll('span'));
this.lettersTotal = this.letters.length;
}
;
TextFx.prototype._stop = function(){
anime.remove(this.letters);
this.letters.forEach(function(letter){
letter.style.WebkitTransform = letter.style.transform = '';
}
);
}
;
TextFx.prototype.show = function(effect,callback){
this._stop();
arguments.length ? this._animate('in',effect,callback):this.letters.forEach(function(letter){
letter.style.opacity = 1;
}
);
}
;
TextFx.prototype.hide = function(effect,callback){
this._stop();
arguments.length ? this._animate('out',effect,callback):this.letters.forEach(function(letter){
letter.style.opacity = 0;
}
);
}
;
TextFx.prototype._animate = function(direction,effect,callback){
var effecSettings = typeof effect === 'string' ? this.effects[effect]:effect;
if( effecSettings.perspective != undefined ){
this.el.style.WebkitPerspective = this.el.style.perspective = effecSettings.perspective + 'px';
}
if( effecSettings.origin != undefined ){
this.letters.forEach(function(letter){
letter.style.WebkitTransformOrigin = letter.style.transformOrigin = effecSettings.origin;
}
);
}
// Custom effectvar iscustom = this._checkCustomFx(direction,effect,callback);
var animOpts = effecSettings[direction],target = this.letters;
target.forEach(function(t,p){
if( t.innerHTML === ' ' ){
target.splice(p,1);
}
}
);
animOpts.targets = target;
if( !iscustom ){
animOpts.complete = callback;
}
anime(animOpts);
}
;
/** * Extra stuff for an effect.. this is just an example for effect 17. * TODO! (for now,just some quick way to implement something different only for fx17) */
TextFx.prototype._checkCustomFx = function(direction,effect,callback){
var custom = typeof effect === 'string' && effect === 'fx17' && direction === 'out';
if( custom ){
var tmp = document.createElement('div');
tmp.style.width = tmp.style.height = '100%';
tmp.style.top = tmp.style.left = 0;
tmp.style.background = '#e24b1e';
tmp.style.position = 'absolute';
tmp.style.WebkitTransform = tmp.style.transform = 'scale3d(0,1,1)';
tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '0% 50%';
this.el.appendChild(tmp);
var self = this;
anime({
targets:tmp,duration:400,easing:'easeInOutCubic',scaleX:[0,1],complete:function(){
tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '100% 50%';
anime({
targets:tmp,duration:400,easing:'easeInOutCubic',scaleX:[1,0],complete:function(){
self.el.removeChild(tmp);
if( typeof callback === 'function' ){
callback();
}
}
}
);
}
}
);
}
return custom;
}
;
window.TextFx = TextFx;
}
)(window);
CSS代码(decolines.css):
.decolines{pointer-events:none;position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;}
.decolines--fixed{position:fixed;width:100vw;height:100vh;}
.decoline{position:absolute;}
CSS代码(lettereffect.css):
.letter-effect{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
分享到QQ
分享到微博
微信扫一扫
