以下是 HTML5 3D魔方日历行程表特效代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 3D魔方日历行程表特效</title>
<!--<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet" />-->
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--><script>document.documentElement.className = 'js';</script>
</head>
<body>
<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-github" viewBox="0 0 32.58 31.77">
<title>github</title>
<path d="M16.29,0a16.29,16.29,0,0,0-5.15,31.75c.81.15,1.11-.35,1.11-.79s0-1.41,0-2.77C7.7,29.18,6.74,26,6.74,26a4.31,4.31,0,0,0-1.81-2.38c-1.48-1,.11-1,.11-1a3.42,3.42,0,0,1,2.5,1.68,3.47,3.47,0,0,0,4.74,1.35,3.48,3.48,0,0,1,1-2.18C9.7,23.08,5.9,21.68,5.9,15.44a6.3,6.3,0,0,1,1.68-4.37,5.86,5.86,0,0,1,.16-4.31s1.37-.44,4.48,1.67a15.44,15.44,0,0,1,8.16,0c3.11-2.11,4.48-1.67,4.48-1.67A5.85,5.85,0,0,1,25,11.07a6.29,6.29,0,0,1,1.67,4.37c0,6.26-3.81,7.63-7.44,8a3.89,3.89,0,0,1,1.11,3c0,2.18,0,3.93,0,4.47s.29.94,1.12.78A16.29,16.29,0,0,0,16.29,0Z"/>
</symbol>
</defs>
</svg>
<main>
<header class="codrops-header">
<nav class="codrops-demos">
<a class="current-demo link" href="index.html">Demo 1</a>
<a class="link" href="index2.html">Demo 2</a>
<a class="link" href="index3.html">Demo 3</a>
</nav>
</header>
<div class="calendar-wrap">
<div class="calendar">
<div class="cube" data-bg-color="#F7E8ED" data-title="Peaceful World"></div>
<div class="cube" data-bg-color="#F2D9E6" data-title="Impossible"></div>
<div class="cube" data-bg-color="#ECC6DE" data-title="Everything"></div>
<div class="cube" data-bg-color="#E0ECF5" data-title="Hung Up"></div>
<div class="cube" data-bg-color="#DDF4DE" data-title="Live Freely"></div>
<div class="cube" data-bg-color="#F0F1D5" data-title="Tolerable Planet"></div>
<div class="cube" data-bg-color="#EEDECD" data-title="Normal"></div>
<div class="cube" data-bg-color="#B8E6B3" data-title="Superhero"></div>
<div class="cube" data-bg-color="#ABE3D8" data-title="New Weariness"></div>
<div class="cube" data-bg-color="#E0E1F5" data-title="The Sinner"></div>
<div class="cube" data-bg-color="#F7E8ED" data-title="Intellectual Wealth"></div>
<div class="cube" data-bg-color="#F2D9E6" data-title="Limiting Principle"></div>
<div class="cube" data-bg-color="#DFD1F0" data-title="Quaintly Free"></div>
<div class="cube" data-bg-color="#E0ECF5" data-title="On A Level"></div>
<div class="cube" data-bg-color="#DDF4DE" data-title="Experiences"></div>
<div class="cube" data-bg-color="#F0F1D5" data-title="Entrenched"></div>
<div class="cube" data-bg-color="#EEDECD" data-title="Happiness"></div>
<div class="cube" data-bg-color="#B8E6B3" data-title="Working Jobs"></div>
<div class="cube" data-bg-color="#ABE3D8" data-title="Spending Billions"></div>
<div class="cube" data-bg-color="#E0E1F5" data-title="Principle Of Having"></div>
<div class="cube" data-bg-color="#DFD1F0" data-title="Enemies"></div>
<div class="cube" data-bg-color="#DFD1F0" data-title="Better World"></div>
<div class="cube" data-inactive data-bg-color="#6161616" data-title="Coming soon"></div>
<div class="cube" data-inactive data-bg-color="#6161616" data-title="Coming soon"></div>
<div class="cube" data-inactive data-bg-color="#6161616" data-title="Coming soon"></div>
</div>
<div class="content">
<div class="content__block">
<h3 class="content__title">Peaceful World</h3>
<p class="content__description">If everyone demanded peace instead of another television set, then there'd be peace.</p>
<p class="content__meta">John Lennon</p>
</div>
<div class="content__block">
<h3 class="content__title">Impossible</h3>
<p class="content__description">To be content with little is difficult; to be content with much, impossible.</p>
<p class="content__meta">Marie von Ebner-Eschenbach</p>
</div>
<div class="content__block">
<h3 class="content__title">Everything</h3>
<p class="content__description">The things you own end up owning you. It's only after you lose everything that you're free to do anything.</p>
<p class="content__meta">Chuck Palahniuk</p>
</div>
<div class="content__block">
<h3 class="content__title">Hung Up</h3>
<p class="content__description">A lot of people get so hung up on what they can't have that they don't think for a second about whether they really want it.</p>
<p class="content__meta">Lionel Shriver</p>
</div>
<div class="content__block">
<h3 class="content__title">Live Freely</h3>
<p class="content__description">It is the preoccupation with possessions, more than anything else that prevents us from living freely and nobly.</p>
<p class="content__meta">Bertrand Russell</p>
</div>
<div class="content__block">
<h3 class="content__title">Tolerable Planet</h3>
<p class="content__description">What is the use of a house if you haven't got a tolerable planet to put it on?</p>
<p class="content__meta">Henry David Thoreau</p>
</div>
<div class="content__block">
<h3 class="content__title">Normal</h3>
<p class="content__description">Normal is getting dressed in clothes that you buy for work and driving through traffic in a car that you are still paying for - in order to get to the job you need to pay for the clothes and the car, and the house you leave vacant all day so you can afford to live in it.</p>
<p class="content__meta">Ellen Goodman</p>
</div>
<div class="content__block">
<h3 class="content__title">Superhero</h3>
<p class="content__description">The reality of loving God is loving him like he's a Superhero who actually saved you from stuff rather than a Santa Claus who merely gave you some stuff.</p>
<p class="content__meta">Criss Jami</p>
</div>
<div class="content__block">
<h3 class="content__title">New Weariness</h3>
<p class="content__description">Every increased possession loads us with new weariness.</p>
<p class="content__meta">John Ruskin</p>
</div>
<div class="content__block">
<h3 class="content__title">The Sinner</h3>
<p class="content__description">The Christmas tree, twinkling with lights, had a mountain of gifts piled up beneath it, like offerings to the great god of excess.</p>
<p class="content__meta">Tess Gerritsen</p>
</div>
<div class="content__block">
<h3 class="content__title">Intellectual Wealth</h3>
<p class="content__description">Whoever prefers the material comforts of life over intellectual wealth is like the owner of a palace who moves into the servants' quarters and leaves the sumptuous rooms empty.</p>
<p class="content__meta">Marie von Ebner-Eschenbach</p>
</div>
<div class="content__block">
<h3 class="content__title">Limiting Principle</h3>
<p class="content__description">An attitude to life which seeks fulfilment in the single-minded pursuit of wealth - in short, materialism - does not fit into this world, because it contains within itself no limiting principle, while the environment in which it is placed is strictly limited.</p>
<p class="content__meta">Ernst F. Schumacher</p>
</div>
<div class="content__block">
<h3 class="content__title">Quaintly Free</h3>
<p class="content__description">To have so little, and it of so little value, was to be quaintly free.</p>
<p class="content__meta">Wallace Stegner</p>
</div>
<div class="content__block">
<h3 class="content__title">On A Level</h3>
<p class="content__description">I've always felt that your belongings have never been on a level with you.</p>
<p class="content__meta">George Eliot</p>
</div>
<div class="content__block">
<h3 class="content__title">Experiences</h3>
<p class="content__description">We all need new ideas, images, and experiences far more than we need new stoves or cars or computers.</p>
<p class="content__meta">Bill Holm</p>
</div>
<div class="content__block">
<h3 class="content__title">Entrenched</h3>
<p class="content__description">We are being called upon to act against a prevailing culture, to undermine our own entrenched tendency to accumulate and to consume, and to refuse to define our individuality by our presumed ability to do whatever we want.</p>
<p class="content__meta">Lyanda Lynn Haupt</p>
</div>
<div class="content__block">
<h3 class="content__title">Happiness</h3>
<p class="content__description">The way of the consumerist culture is to spend so much energy chasing happiness that it has none left to be happy.</p>
<p class="content__meta">Criss Jami</p>
</div>
<div class="content__block">
<h3 class="content__title">Working Jobs</h3>
<p class="content__description">Advertising has us chasing cars and clothes, working jobs we hate so we can buy shit we don't need.</p>
<p class="content__meta">Chuck Palahniuk</p>
</div>
<div class="content__block">
<h3 class="content__title">Spending Billions</h3>
<p class="content__description">Our economy is based on spending billions to persuade people that happiness is buying things, and then insisting that the only way to have a viable economy is to make things for people to buy so they’ll have jobs and get enough money to buy things.</p>
<p class="content__meta">Philip Slater</p>
</div>
<div class="content__block">
<h3 class="content__title">Principle Of Having</h3>
<p class="content__description">The real opposition is that between the ego-bound man, whose existence is structured by the principle of having, and the free man, who has overcome his egocentricity.</p>
<p class="content__meta">Erich Fromm</p>
</div>
<div class="content__block">
<h3 class="content__title">Enemies</h3>
<p class="content__description">Happy slaves are the bitterest enemies of freedom.</p>
<p class="content__meta">Marie von Ebner-Eschenbach</p>
</div>
<div class="content__block">
<h3 class="content__title">Better World</h3>
<p class="content__description">If you assume that there is no hope, you guarantee that there will be no hope. If you assume that there is an instinct for freedom, that there are opportunities to change things, then there is a possibility that you can contribute to making a better world.</p>
<p class="content__meta">Noam Chomsky</p>
</div>
<div class="content__number">0</div>
<button class="btn-back" aria-label="Back to the grid view">↵</button>
</div><!-- /content -->
</div><!-- /calendar-wrap -->
</main>
<script src="js/charming.min.js"></script>
<script src="js/anime.min.js"></script>
<script src="js/textfx.js"></script>
<script src="js/main.js"></script>
</body>
</html>HTML代码(index2.html):
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 3D魔方日历行程表特效</title>
<!--<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Droid+Sans+Mono" rel="stylesheet" />-->
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--><script>document.documentElement.className = 'js';</script>
</head>
<body>
<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-github" viewBox="0 0 32.58 31.77">
<title>github</title>
<path d="M16.29,0a16.29,16.29,0,0,0-5.15,31.75c.81.15,1.11-.35,1.11-.79s0-1.41,0-2.77C7.7,29.18,6.74,26,6.74,26a4.31,4.31,0,0,0-1.81-2.38c-1.48-1,.11-1,.11-1a3.42,3.42,0,0,1,2.5,1.68,3.47,3.47,0,0,0,4.74,1.35,3.48,3.48,0,0,1,1-2.18C9.7,23.08,5.9,21.68,5.9,15.44a6.3,6.3,0,0,1,1.68-4.37,5.86,5.86,0,0,1,.16-4.31s1.37-.44,4.48,1.67a15.44,15.44,0,0,1,8.16,0c3.11-2.11,4.48-1.67,4.48-1.67A5.85,5.85,0,0,1,25,11.07a6.29,6.29,0,0,1,1.67,4.37c0,6.26-3.81,7.63-7.44,8a3.89,3.89,0,0,1,1.11,3c0,2.18,0,3.93,0,4.47s.29.94,1.12.78A16.29,16.29,0,0,0,16.29,0Z"/>
</symbol>
</defs>
</svg>
<main>
<header class="codrops-header">
<nav class="codrops-demos">
<a class="link" href="index.html">Demo 1</a>
<a class="link current-demo" href="index2.html">Demo 2</a>
<a class="link" href="index3.html">Demo 3</a>
</nav>
</header>
<div class="calendar-wrap">
<div class="calendar">
<div class="cube" data-bg-color="#F7E8ED" data-title="Peaceful World"></div>
<div class="cube" data-bg-color="#F2D9E6" data-title="Impossible"></div>
<div class="cube" data-bg-color="#ECC6DE" data-title="Everything"></div>
<div class="cube" data-bg-color="#E0ECF5" data-title="Hung Up"></div>
<div class="cube" data-bg-color="#DDF4DE" data-title="Live Freely"></div>
<div class="cube" data-bg-color="#F0F1D5" data-title="Tolerable Planet"></div>
<div class="cube" data-bg-color="#EEDECD" data-title="Normal"></div>
<div class="cube" data-bg-color="#B8E6B3" data-title="Superhero"></div>
<div class="cube" data-bg-color="#ABE3D8" data-title="New Weariness"></div>
<div class="cube" data-bg-color="#E0E1F5" data-title="The Sinner"></div>
<div class="cube" data-bg-color="#F7E8ED" data-title="Intellectual Wealth"></div>
<div class="cube" data-bg-color="#F2D9E6" data-title="Limiting Principle"></div>
<div class="cube" data-bg-color="#DFD1F0" data-title="Quaintly Free"></div>
<div class="cube" data-bg-color="#E0ECF5" data-title="On A Level"></div>
<div class="cube" data-bg-color="#DDF4DE" data-title="Experiences"></div>
<div class="cube" data-bg-color="#F0F1D5" data-title="Entrenched"></div>
<div class="cube" data-bg-color="#EEDECD" data-title="Happiness"></div>
<div class="cube" data-bg-color="#B8E6B3" data-title="Working Jobs"></div>
<div class="cube" data-bg-color="#ABE3D8" data-title="Spending Billions"></div>
<div class="cube" data-bg-color="#E0E1F5" data-title="Principle Of Having"></div>
<div class="cube" data-bg-color="#DFD1F0" data-title="Enemies"></div>
<div class="cube" data-bg-color="#DFD1F0" data-title="Better World"></div>
<div class="cube" data-inactive data-bg-color="#6161616" data-title="Coming soon"></div>
<div class="cube" data-inactive data-bg-color="#6161616" data-title="Coming soon"></div>
<div class="cube" data-inactive data-bg-color="#6161616" data-title="Coming soon"></div>
</div>
<div class="content">
<div class="content__block">
<h3 class="content__title">Peaceful World</h3>
<p class="content__description">If everyone demanded peace instead of another television set, then there'd be peace.</p>
<p class="content__meta">John Lennon</p>
</div>
<div class="content__block">
<h3 class="content__title">Impossible</h3>
<p class="content__description">To be content with little is difficult; to be content with much, impossible.</p>
<p class="content__meta">Marie von Ebner-Eschenbach</p>
</div>
<div class="content__block">
<h3 class="content__title">Everything</h3>
<p class="content__description">The things you own end up owning you. It's only after you lose everything that you're free to do anything.</p>
<p class="content__meta">Chuck Palahniuk</p>
</div>
<div class="content__block">
<h3 class="content__title">Hung Up</h3>
<p class="content__description">A lot of people get so hung up on what they can't have that they don't think for a second about whether they really want it.</p>
<p class="content__meta">Lionel Shriver</p>
</div>
<div class="content__block">
<h3 class="content__title">Live Freely</h3>
<p class="content__description">It is the preoccupation with possessions, more than anything else that prevents us from living freely and nobly.</p>
<p class="content__meta">Bertrand Russell</p>
</div>
<div class="content__block">
<h3 class="content__title">Tolerable Planet</h3>
<p class="content__description">What is the use of a house if you haven't got a tolerable planet to put it on?</p>
<p class="content__meta">Henry David Thoreau</p>
</div>
<div class="content__block">
<h3 class="content__title">Normal</h3>
<p class="content__description">Normal is getting dressed in clothes that you buy for work and driving through traffic in a car that you are still paying for - in order to get to the job you need to pay for the clothes and the car, and the house you leave vacant all day so you can afford to live in it.</p>
<p class="content__meta">Ellen Goodman</p>
</div>
<div class="content__block">
<h3 class="content__title">Superhero</h3>
<p class="content__description">The reality of loving God is loving him like he's a Superhero who actually saved you from stuff rather than a Santa Claus who merely gave you some stuff.</p>
<p class="content__meta">Criss Jami</p>
</div>
<div class="content__block">
<h3 class="content__title">New Weariness</h3>
<p class="content__description">Every increased possession loads us with new weariness.</p>
<p class="content__meta">John Ruskin</p>
</div>
<div class="content__block">
<h3 class="content__title">The Sinner</h3>
<p class="content__description">The Christmas tree, twinkling with lights, had a mountain of gifts piled up beneath it, like offerings to the great god of excess.</p>
<p class="content__meta">Tess Gerritsen</p>
</div>
<div class="content__block">
<h3 class="content__title">Intellectual Wealth</h3>
<p class="content__description">Whoever prefers the material comforts of life over intellectual wealth is like the owner of a palace who moves into the servants' quarters and leaves the sumptuous rooms empty.</p>
<p class="content__meta">Marie von Ebner-Eschenbach</p>
</div>
<div class="content__block">
<h3 class="content__title">Limiting Principle</h3>
<p class="content__description">An attitude to life which seeks fulfilment in the single-minded pursuit of wealth - in short, materialism - does not fit into this world, because it contains within itself no limiting principle, while the environment in which it is placed is strictly limited.</p>
<p class="content__meta">Ernst F. Schumacher</p>
</div>
<div class="content__block">
<h3 class="content__title">Quaintly Free</h3>
<p class="content__description">To have so little, and it of so little value, was to be quaintly free.</p>
<p class="content__meta">Wallace Stegner</p>
</div>
<div class="content__block">
<h3 class="content__title">On A Level</h3>
<p class="content__description">I've always felt that your belongings have never been on a level with you.</p>
<p class="content__meta">George Eliot</p>
</div>
<div class="content__block">
<h3 class="content__title">Experiences</h3>
<p class="content__description">We all need new ideas, images, and experiences far more than we need new stoves or cars or computers.</p>
<p class="content__meta">Bill Holm</p>
</div>
<div class="content__block">
<h3 class="content__title">Entrenched</h3>
<p class="content__description">We are being called upon to act against a prevailing culture, to undermine our own entrenched tendency to accumulate and to consume, and to refuse to define our individuality by our presumed ability to do whatever we want.</p>
<p class="content__meta">Lyanda Lynn Haupt</p>
</div>
<div class="content__block">
<h3 class="content__title">Happiness</h3>
<p class="content__description">The way of the consumerist culture is to spend so much energy chasing happiness that it has none left to be happy.</p>
<p class="content__meta">Criss Jami</p>
</div>
<div class="content__block">
<h3 class="content__title">Working Jobs</h3>
<p class="content__description">Advertising has us chasing cars and clothes, working jobs we hate so we can buy shit we don't need.</p>
<p class="content__meta">Chuck Palahniuk</p>
</div>
<div class="content__block">
<h3 class="content__title">Spending Billions</h3>
<p class="content__description">Our economy is based on spending billions to persuade people that happiness is buying things, and then insisting that the only way to have a viable economy is to make things for people to buy so they’ll have jobs and get enough money to buy things.</p>
<p class="content__meta">Philip Slater</p>
</div>
<div class="content__block">
<h3 class="content__title">Principle Of Having</h3>
<p class="content__description">The real opposition is that between the ego-bound man, whose existence is structured by the principle of having, and the free man, who has overcome his egocentricity.</p>
<p class="content__meta">Erich Fromm</p>
</div>
<div class="content__block">
<h3 class="content__title">Enemies</h3>
<p class="content__description">Happy slaves are the bitterest enemies of freedom.</p>
<p class="content__meta">Marie von Ebner-Eschenbach</p>
</div>
<div class="content__block">
<h3 class="content__title">Better World</h3>
<p class="content__description">If you assume that there is no hope, you guarantee that there will be no hope. If you assume that there is an instinct for freedom, that there are opportunities to change things, then there is a possibility that you can contribute to making a better world.</p>
<p class="content__meta">Noam Chomsky</p>
</div>
<div class="content__number">0</div>
<button class="btn-back" aria-label="Back to the grid view">↵</button>
</div><!-- /content -->
</div>
</main>
<script src="js/charming.min.js"></script>
<script src="js/anime.min.js"></script>
<script src="js/textfx.js"></script>
<script src="js/main2.js"></script>
</body>
</html>HTML代码(index3.html):
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 3D魔方日历行程表特效</title>
<!--<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|BioRhyme:400,700" rel="stylesheet" />-->
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/style3.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--><script>document.documentElement.className = 'js';</script>
</head>
<body>
<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-github" viewBox="0 0 32.58 31.77">
<title>github</title>
<path d="M16.29,0a16.29,16.29,0,0,0-5.15,31.75c.81.15,1.11-.35,1.11-.79s0-1.41,0-2.77C7.7,29.18,6.74,26,6.74,26a4.31,4.31,0,0,0-1.81-2.38c-1.48-1,.11-1,.11-1a3.42,3.42,0,0,1,2.5,1.68,3.47,3.47,0,0,0,4.74,1.35,3.48,3.48,0,0,1,1-2.18C9.7,23.08,5.9,21.68,5.9,15.44a6.3,6.3,0,0,1,1.68-4.37,5.86,5.86,0,0,1,.16-4.31s1.37-.44,4.48,1.67a15.44,15.44,0,0,1,8.16,0c3.11-2.11,4.48-1.67,4.48-1.67A5.85,5.85,0,0,1,25,11.07a6.29,6.29,0,0,1,1.67,4.37c0,6.26-3.81,7.63-7.44,8a3.89,3.89,0,0,1,1.11,3c0,2.18,0,3.93,0,4.47s.29.94,1.12.78A16.29,16.29,0,0,0,16.29,0Z"/>
</symbol>
</defs>
</svg>
<main>
<header class="codrops-header">
<nav class="codrops-demos">
<a class="link" href="index.html">Demo 1</a>
<a class="link" href="index2.html">Demo 2</a>
<a class="link current-demo" href="index3.html">Demo 3</a>
</nav>
</header>
<div class="calendar-wrap">
<div class="calendar">
<div class="cube" data-bg-color="#1c2d3f" data-title="Peaceful World"></div>
<div class="cube" data-bg-color="#cc0019" data-title="Impossible"></div>
<div class="cube" data-bg-color="#1c2d3f" data-title="Everything"></div>
<div class="cube" data-bg-color="#cc0019" data-title="Hung Up"></div>
<div class="cube" data-bg-color="#1c2d3f" data-title="Live Freely"></div>
<div class="cube" data-bg-color="#cc0019" data-title="Tolerable Planet"></div>
<div class="cube" data-bg-color="#1c2d3f" data-title="Normal"></div>
<div class="cube" data-bg-color="#cc0019" data-title="Superhero"></div>
<div class="cube" data-bg-color="#1c2d3f" data-title="New Weariness"></div>
<div class="cube" data-bg-color="#cc0019" data-title="The Sinner"></div>
<div class="cube" data-bg-color="#1c2d3f" data-title="Intellectual Wealth"></div>
<div class="cube" data-bg-color="#cc0019" data-title="Limiting Principle"></div>
<div class="cube" data-bg-color="#1c2d3f" data-title="Quaintly Free"></div>
<div class="cube" data-bg-color="#cc0019" data-title="On A Level"></div>
<div class="cube" data-bg-color="#1c2d3f" data-title="Experiences"></div>
<div class="cube" data-bg-color="#cc0019" data-title="Entrenched"></div>
<div class="cube" data-bg-color="#1c2d3f" data-title="Happiness"></div>
<div class="cube" data-bg-color="#cc0019" data-title="Working Jobs"></div>
<div class="cube" data-bg-color="#1c2d3f" data-title="Spending Billions"></div>
<div class="cube" data-bg-color="#cc0019" data-title="Principle Of Having"></div>
<div class="cube" data-bg-color="#1c2d3f" data-title="Enemies"></div>
<div class="cube" data-bg-color="#cc0019" data-title="Better World"></div>
<div class="cube" data-inactive data-bg-color="#6161616" data-title="Coming soon"></div>
<div class="cube" data-inactive data-bg-color="#6161616" data-title="Coming soon"></div>
<div class="cube" data-inactive data-bg-color="#6161616" data-title="Coming soon"></div>
</div>
<div class="content">
<div class="content__block">
<h3 class="content__title">Peaceful World</h3>
<p class="content__description">If everyone demanded peace instead of another television set, then there'd be peace.</p>
<p class="content__meta">John Lennon</p>
</div>
<div class="content__block">
<h3 class="content__title">Impossible</h3>
<p class="content__description">To be content with little is difficult; to be content with much, impossible.</p>
<p class="content__meta">Marie von Ebner-Eschenbach</p>
</div>
<div class="content__block">
<h3 class="content__title">Everything</h3>
<p class="content__description">The things you own end up owning you. It's only after you lose everything that you're free to do anything.</p>
<p class="content__meta">Chuck Palahniuk</p>
</div>
<div class="content__block">
<h3 class="content__title">Hung Up</h3>
<p class="content__description">A lot of people get so hung up on what they can't have that they don't think for a second about whether they really want it.</p>
<p class="content__meta">Lionel Shriver</p>
</div>
<div class="content__block">
<h3 class="content__title">Live Freely</h3>
<p class="content__description">It is the preoccupation with possessions, more than anything else that prevents us from living freely and nobly.</p>
<p class="content__meta">Bertrand Russell</p>
</div>
<div class="content__block">
<h3 class="content__title">Tolerable Planet</h3>
<p class="content__description">What is the use of a house if you haven't got a tolerable planet to put it on?</p>
<p class="content__meta">Henry David Thoreau</p>
</div>
<div class="content__block">
<h3 class="content__title">Normal</h3>
<p class="content__description">Normal is getting dressed in clothes that you buy for work and driving through traffic in a car that you are still paying for - in order to get to the job you need to pay for the clothes and the car, and the house you leave vacant all day so you can afford to live in it.</p>
<p class="content__meta">Ellen Goodman</p>
</div>
<div class="content__block">
<h3 class="content__title">Superhero</h3>
<p class="content__description">The reality of loving God is loving him like he's a Superhero who actually saved you from stuff rather than a Santa Claus who merely gave you some stuff.</p>
<p class="content__meta">Criss Jami</p>
</div>
<div class="content__block">
<h3 class="content__title">New Weariness</h3>
<p class="content__description">Every increased possession loads us with new weariness.</p>
<p class="content__meta">John Ruskin</p>
</div>
<div class="content__block">
<h3 class="content__title">The Sinner</h3>
<p class="content__description">The Christmas tree, twinkling with lights, had a mountain of gifts piled up beneath it, like offerings to the great god of excess.</p>
<p class="content__meta">Tess Gerritsen</p>
</div>
<div class="content__block">
<h3 class="content__title">Intellectual Wealth</h3>
<p class="content__description">Whoever prefers the material comforts of life over intellectual wealth is like the owner of a palace who moves into the servants' quarters and leaves the sumptuous rooms empty.</p>
<p class="content__meta">Marie von Ebner-Eschenbach</p>
</div>
<div class="content__block">
<h3 class="content__title">Limiting Principle</h3>
<p class="content__description">An attitude to life which seeks fulfilment in the single-minded pursuit of wealth - in short, materialism - does not fit into this world, because it contains within itself no limiting principle, while the environment in which it is placed is strictly limited.</p>
<p class="content__meta">Ernst F. Schumacher</p>
</div>
<div class="content__block">
<h3 class="content__title">Quaintly Free</h3>
<p class="content__description">To have so little, and it of so little value, was to be quaintly free.</p>
<p class="content__meta">Wallace Stegner</p>
</div>
<div class="content__block">
<h3 class="content__title">On A Level</h3>
<p class="content__description">I've always felt that your belongings have never been on a level with you.</p>
<p class="content__meta">George Eliot</p>
</div>
<div class="content__block">
<h3 class="content__title">Experiences</h3>
<p class="content__description">We all need new ideas, images, and experiences far more than we need new stoves or cars or computers.</p>
<p class="content__meta">Bill Holm</p>
</div>
<div class="content__block">
<h3 class="content__title">Entrenched</h3>
<p class="content__description">We are being called upon to act against a prevailing culture, to undermine our own entrenched tendency to accumulate and to consume, and to refuse to define our individuality by our presumed ability to do whatever we want.</p>
<p class="content__meta">Lyanda Lynn Haupt</p>
</div>
<div class="content__block">
<h3 class="content__title">Happiness</h3>
<p class="content__description">The way of the consumerist culture is to spend so much energy chasing happiness that it has none left to be happy.</p>
<p class="content__meta">Criss Jami</p>
</div>
<div class="content__block">
<h3 class="content__title">Working Jobs</h3>
<p class="content__description">Advertising has us chasing cars and clothes, working jobs we hate so we can buy shit we don't need.</p>
<p class="content__meta">Chuck Palahniuk</p>
</div>
<div class="content__block">
<h3 class="content__title">Spending Billions</h3>
<p class="content__description">Our economy is based on spending billions to persuade people that happiness is buying things, and then insisting that the only way to have a viable economy is to make things for people to buy so they’ll have jobs and get enough money to buy things.</p>
<p class="content__meta">Philip Slater</p>
</div>
<div class="content__block">
<h3 class="content__title">Principle Of Having</h3>
<p class="content__description">The real opposition is that between the ego-bound man, whose existence is structured by the principle of having, and the free man, who has overcome his egocentricity.</p>
<p class="content__meta">Erich Fromm</p>
</div>
<div class="content__block">
<h3 class="content__title">Enemies</h3>
<p class="content__description">Happy slaves are the bitterest enemies of freedom.</p>
<p class="content__meta">Marie von Ebner-Eschenbach</p>
</div>
<div class="content__block">
<h3 class="content__title">Better World</h3>
<p class="content__description">If you assume that there is no hope, you guarantee that there will be no hope. If you assume that there is an instinct for freedom, that there are opportunities to change things, then there is a possibility that you can contribute to making a better world.</p>
<p class="content__meta">Noam Chomsky</p>
</div>
<div class="content__number">0</div>
<button class="btn-back" aria-label="Back to the grid view">↵</button>
</div><!-- /content -->
</div>
</main>
<script src="js/charming.min.js"></script>
<script src="js/anime.min.js"></script>
<script src="js/textfx.js"></script>
<script src="js/main3.js"></script>
</body>
</html>JS代码(main.js):
/** * main.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';
// Helper vars and functions.function extend( a,b ){
for( var key in b ){
if( b.hasOwnProperty( key ) ){
a[key] = b[key];
}
}
return a;
}
// From http://www.quirksmode.org/js/events_properties.html#positionfunction getMousePos(e){
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY){
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY){
posx = e.clientX + document.body.scrollLeft+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop+ document.documentElement.scrollTop;
}
return{
x:posx,y:posy}
}
// Detect mobile. From:http://stackoverflow.com/a/11381730/989439function mobilecheck(){
var check = false;
(function(a){
if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true}
)(navigator.userAgent||navigator.vendor||window.opera);
return check;
}
// The Day obj.function Day(options){
this.options = extend({
}
,this.options);
extend(this.options,options);
this.number = this.options.number;
this.color = this.options.color;
this.previewTitle = this.options.previewTitle;
this.isActive = !this.options.inactive;
this._layout();
}
Day.prototype.options ={
number:0,color:'#f1f1f1',previewTitle:'',inactive:false}
;
// Build the 3D cube element.Day.prototype._layout = function(){
/* The Cube structure:<div class="cube"><div class="cube__side cube__side--front"></div><div class="cube__side cube__side--back"></div><div class="cube__side cube__side--right"></div><div class="cube__side cube__side--left"></div><div class="cube__side cube__side--top"></div><div class="cube__side cube__side--bottom"></div></div>*/
this.cube = document.createElement('div');
this.cube.className = this.isActive ? 'cube':'cube cube--inactive';
this.cube.innerHTML = '<div class="cube__side cube__side--back"></div><div class="cube__side cube__side--left"></div><div class="cube__side cube__side--right"></div><div class="cube__side cube__side--bottom"></div><div class="cube__side cube__side--top"></div><div class="cube__side cube__side--front"><div class="cube__number">' + (this.number+1) + '</div></div>';
this.currentTransform ={
translateZ:0,rotateX:0,rotateY:0}
;
}
;
Day.prototype._rotate = function(ev){
anime.remove(this.cube);
var dir = this._getDirection(ev),type = ev.type.toLowerCase() === 'mouseenter' ? 1:-1,animationSettings ={
targets:this.cube,duration:500,easing:'easeOutExpo'}
;
animationSettings.translateZ ={
value:type === 1 ? 100:0,duration:900,easing:'easeOutExpo'}
;
switch(dir){
case 0:// from/to topanimationSettings.rotateX = type === 1 ? -180:0;
animationSettings.rotateY = 0;
break;
case 1:// from/to rightanimationSettings.rotateY = type === 1 ? -180:0;
animationSettings.rotateX = 0;
break;
case 2:// from/to bottomanimationSettings.rotateX = type === 1 ? 180:0;
animationSettings.rotateY = 0;
break;
case 3:// from/to leftanimationSettings.rotateY = type === 1 ? 180:0;
animationSettings.rotateX = 0;
break;
}
;
this.currentTransform ={
translateZ:animationSettings.translateZ,rotateX:animationSettings.rotateX,rotateY:animationSettings.rotateY}
;
anime(animationSettings);
}
;
Day.prototype._setContentTitleFx = function(contentTitleEl){
this.titlefx = new TextFx(contentTitleEl);
this.titlefxSettings ={
in:{
duration:800,delay:function(el,index){
return 650 + index*10;
}
,easing:'easeOutExpo',opacity:{
duration:200,value:[0,1],easing:'linear'}
,translateY:[100,0],rotateZ:function(el,index){
return [anime.random(-20,20),0];
}
}
,out:{
duration:800,delay:400,easing:'easeInExpo',opacity:0,translateY:350}
}
;
}
;
// From:https://codepen.io/noeldelgado/pen/pGwFx?editors=0110 by Noel Delgado (@noeldelgado).Day.prototype._getDirection = function(ev){
var obj = this.cube.querySelector('.cube__side--front'),w = obj.offsetWidth,h = obj.offsetHeight,bcr = obj.getBoundingClientRect(),x = (ev.pageX - (bcr.left + window.pageXOffset) - (w / 2) * (w > h ? (h / w):1)),y = (ev.pageY - (bcr.top + window.pageYOffset) - (h / 2) * (h > w ? (w / h):1)),d = Math.round( Math.atan2(y,x) / 1.57079633 + 5 ) % 4;
return d;
}
;
// The Calendar obj.function Calendar(el){
this.el = el;
this.calendarDays = [].slice.call(this.el.querySelectorAll('.cube'));
// Let´s build the days/cubes structure.this.cubes = document.createElement('div');
this.cubes.className = 'cubes';
this.el.appendChild(this.cubes);
// Array of days (each day is represented by a 3D Cube)this.days = [];
var self = this;
this.calendarDays.forEach(function(d,pos){
// Get the bg color defined in the data-bg-color of each division.var day = new Day({
number:pos,color:d.getAttribute('data-bg-color') || '#f1f1f1',previewTitle:d.getAttribute('data-title') || '',inactive:d.hasAttribute('data-inactive')}
),content = contents[pos];
if( content !== undefined ){
var contentTitle = contents[pos].querySelector('.content__title');
day._setContentTitleFx(contentTitle);
}
self.days.push(day);
self.cubes.appendChild(day.cube);
self.el.removeChild(d);
self._initDayEvents(day);
}
);
// structure to show each day preview (day + title + subtitle etc,when the user hovers one day/cube).this.dayPreview = document.createElement('h2');
this.dayPreview.className = 'title';
this.el.appendChild(this.dayPreview);
this._initEvents();
}
Calendar.prototype._initEvents = function(){
var self = this;
// Mousemove event / tilt functionalityif( settings.tilt ){
this.mousemoveFn = function(ev){
if( self.isOpen ){
return false;
}
;
requestAnimationFrame(function(){
// Mouse position relative to the document.var mousepos = getMousePos(ev);
self._rotateCalendar(mousepos);
}
);
}
;
this.handleOrientation = function(){
if( self.isOpen ){
return false;
}
;
var y = event.gamma;
// To make computation easier we shift the range of x and y to [0,180]y += 90;
requestAnimationFrame(function(){
// Transform values.var movement ={
ry:40}
,rotY = 2*movement.ry / 180 * y - movement.ry;
self.cubes.style.WebkitTransform = self.cubes.style.transform = 'rotate3d(0,-1,0,' + rotY + 'deg)';
}
);
}
;
if( isMobile ){
window.addEventListener('deviceorientation',this.handleOrientation);
}
else{
document.addEventListener('mousemove',this.mousemoveFn);
}
}
this.backToCalendarFn = function(ev){
// If the calendar is currently animating then do nothing.if( !self.isOpen || self.isAnimating ){
return false;
}
self.isAnimating = true;
self._hidePreviewTitle();
self._hideContent();
// Show the main containeranime({
targets:self.el,duration:1200,easing:'easeInOutExpo',opacity:1,complete:function(){
self.isOpen = false;
self.isAnimating = false;
}
}
);
for(var i = 0,totalDays = self.days.length;
i < totalDays;
++i){
var day = self.days[i];
if( self.currentDayIdx === i ){
anime({
targets:day.cube,duration:1200,delay:1000,easing:'easeOutExpo',scale:1,translateY:0,translateZ:[-1500,0],rotateX:0,rotateY:0}
);
day.isRotated = false;
}
else{
anime({
targets:day.cube,duration:1200,delay:1000,easing:'easeOutExpo',scale:1,translateX:0,translateY:0,translateZ:[3000,0],rotateY:0}
);
}
}
}
;
backCtrl.addEventListener('click',this.backToCalendarFn);
}
;
Calendar.prototype._initDayEvents = function(day){
var self = this;
// Day/Cube mouseenter/mouseleave event.var instance = day;
if( !isMobile ){
instance.mouseenterFn = function(ev){
if( instance.isRotated || self.isOpen ){
return false;
}
;
clearTimeout(colortimeout);
instance.rotatetimeout = setTimeout(function(){
colortimeout = setTimeout(function(){
self._changeBGColor(instance.color);
}
,30);
instance._rotate(ev);
self._showPreviewTitle(instance.previewTitle,instance.number);
instance.isRotated = true;
}
,30);
}
;
instance.mouseleaveFn = function(ev){
if( self.isOpen ){
return false;
}
;
clearTimeout(instance.rotatetimeout);
clearTimeout(colortimeout);
if( instance.isRotated ){
colortimeout = setTimeout(function(){
self._resetBGColor();
}
,35);
self._resetBGColor();
instance._rotate(ev);
self._hidePreviewTitle();
instance.isRotated = false;
}
}
;
}
// Day/Cube click event.instance.clickFn = function(ev){
// If the day is inactive or if the calendar is currently animating then do nothing.if( !instance.isActive || self.isAnimating ){
return false;
}
self.isAnimating = true;
self.isOpen = true;
self.currentDayIdx = instance.number;
// Hide the main containeranime({
targets:self.el,duration:1200,easing:'easeInOutExpo',opacity:0,complete:function(){
self.isAnimating = false;
}
}
);
for(var i = 0,totalDays = self.days.length;
i < totalDays;
++i){
var day = self.days[i];
if( self.currentDayIdx === i ){
anime({
targets:day.cube,duration:600,delay:200,easing:'easeInExpo',scale:1.1,translateY:-window.innerHeight*2,translateZ:day.currentTransform.translateZ,rotateX:day.currentTransform.rotateX,rotateY:day.currentTransform.rotateY}
);
self._showContent(instance);
}
else{
var bcr = day.cube.getBoundingClientRect();
anime({
targets:day.cube,duration:1200,easing:'easeInOutExpo',scale:0.1,translateX:function(el,index){
return bcr.left + window.pageXOffset <= window.innerWidth/2 ? anime.random(-800,0):anime.random(0,800);
}
,translateY:function(el,index){
return bcr.top + window.pageYOffset <= window.innerHeight/2 ? anime.random(-1400,-200):anime.random(-200,600);
}
,translateZ:-1500,rotateY:function(el,index){
return bcr.left + window.pageXOffset <= window.innerWidth/2 ? anime.random(-40,0):anime.random(0,40);
}
}
);
}
}
}
;
instance.cube.querySelector('.cube__side--front').addEventListener('mouseenter',instance.mouseenterFn);
instance.cube.addEventListener('mouseleave',instance.mouseleaveFn);
instance.cube.addEventListener('click',instance.clickFn);
instance.cube.addEventListener('mousedown',function(){
clearTimeout(instance.rotatetimeout );
}
);
}
;
Calendar.prototype._rotateCalendar = function(mousepos){
// Transform values.var movement ={
rx:3,ry:3}
,rotX = 2 * movement.rx / this.cubes.offsetHeight * mousepos.y - movement.rx,rotY = 2 * movement.ry / this.cubes.offsetWidth * mousepos.x - movement.ry;
this.cubes.style.WebkitTransform = this.cubes.style.transform = 'rotate3d(-1,0,0,' + rotX + 'deg) rotate3d(0,1,0,' + rotY + 'deg)';
}
;
Calendar.prototype._showPreviewTitle = function(text,number){
this.dayPreview.innerHTML = text;
this.dayPreview.setAttribute('data-number',parseInt(number+1));
this.txtfx = new TextFx(this.dayPreview);
this.txtfx.hide();
this.dayPreview.style.opacity = 1;
this.txtfx.show({
in:{
duration:800,delay:function(el,index){
return index*20;
}
,easing:'easeOutElastic',opacity:1,translateY:function(el,index){
return index%2 === 0 ? [-25,0]:[25,0];
}
}
}
);
}
;
Calendar.prototype._hidePreviewTitle = function(){
var self = this;
if( this.txtfx ){
this.txtfx.hide();
}
this.dayPreview.style.opacity = 0;
}
;
Calendar.prototype._showContent = function(day){
// The content box for the clicked day.var content = contents[this.currentDayIdx],title = content.querySelector('.content__title'),description = content.querySelector('.content__description'),meta = content.querySelector('.content__meta');
content.classList.add('content__block--current');
day.titlefx.hide();
day.titlefx.show(day.titlefxSettings);
anime({
targets:[description,meta],duration:800,delay:function(el,index){
return index === 0 ? 900:1000}
,easing:'easeOutExpo',opacity:[0,1],translateY:[100,0]}
);
anime({
targets:backCtrl,duration:1000,delay:800,easing:'easeOutExpo',opacity:[0,1],translateY:[50,0]}
);
contentNumber.innerHTML = this.currentDayIdx + 1;
anime({
targets:contentNumber,duration:500,delay:800,easing:'easeOutExpo',opacity:[0,1],translateX:[100,0]}
);
}
;
Calendar.prototype._hideContent = function(){
var day = this.days[this.currentDayIdx],// The content box for the clicked day.content = contents[this.currentDayIdx],// The content title,description and meta for this day.title = content.querySelector('.content__title'),description = content.querySelector('.content__description'),meta = content.querySelector('.content__meta');
// The content number placeholder animation.anime({
targets:contentNumber,duration:500,easing:'easeInExpo',opacity:0,translateX:100}
);
// The back button animation.anime({
targets:backCtrl,duration:1000,easing:'easeInExpo',opacity:0,translateY:50}
);
// The description and meta animation.anime({
targets:[description,meta],duration:800,delay:function(el,index){
return index === 0 ? 150:0}
,easing:'easeInExpo',opacity:[1,0],translateY:[0,200]}
);
// The content title animation.day.titlefx.hide(day.titlefxSettings,function(){
content.classList.remove('content__block--current');
}
);
}
;
Calendar.prototype._changeBGColor = function(color){
bgEl.style.backgroundColor = color;
}
;
Calendar.prototype._resetBGColor = function(){
bgEl.style.backgroundColor = defaultBgColor;
}
;
// Snow obj. Based on // https://gist.github.com/OmShiv/4368164.function Snow(){
this.canvas = document.createElement('canvas');
this.canvas.id = 'snow';
this.canvas.className = 'background';
this.canvas.style.background = defaultBgColor;
document.body.insertBefore(this.canvas,document.body.firstElementChild);
this.flakes = [];
this.ctx = this.canvas.getContext('2d');
this.flakeCount = 300;
this.mX = -100,this.mY = -100this.width = this.canvas.width = window.innerWidth;
this.height = this.canvas.height = window.innerHeight;
this._init();
}
Snow.prototype._init = function(){
var self = this;
window.addEventListener('resize',function(){
self.width = self.canvas.width = window.innerWidth;
self.height = self.canvas.height = window.innerHeight;
}
);
for(var i = 0;
i < this.flakeCount;
++i){
var x = Math.floor(Math.random() * this.width),y = Math.floor(Math.random() * this.height),size = (Math.random()*3.5) + .5,speed = size*.5,opacity = (Math.random() * 0.5) + 0.1;
this.flakes.push({
speed:speed,velY:speed,velX:0,x:x,y:y,size:size,stepSize:(Math.random()) / 30,step:0,opacity:opacity}
);
}
this._snow();
}
;
Snow.prototype._snow = function(){
this.ctx.clearRect(0,0,this.width,this.height);
for(var i = 0;
i < this.flakeCount;
++i){
var flake = this.flakes[i],x = this.mX,y = this.mY,minDist = 150,x2 = flake.x,y2 = flake.y,dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),dx = x2 - x,dy = y2 - y;
if( dist < minDist ){
var force = minDist / (dist * dist),xcomp = (x - x2) / dist,ycomp = (y - y2) / dist,deltaV = force / 2;
flake.velX -= deltaV * xcomp;
flake.velY -= deltaV * ycomp;
}
else{
flake.velX *= .98;
if( flake.velY <= flake.speed ){
flake.velY = flake.speed}
flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
}
this.ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";
flake.y += flake.velY;
flake.x += flake.velX;
if( flake.y >= this.height || flake.y <= 0 ){
this._reset(flake);
}
if( flake.x >= this.width || flake.x <= 0 ){
this._reset(flake);
}
this.ctx.beginPath();
this.ctx.arc(flake.x,flake.y,flake.size,0,Math.PI * 2);
this.ctx.fill();
}
requestAnimationFrame(this._snow.bind(this));
}
;
Snow.prototype._reset = function(flake){
flake.x = Math.floor(Math.random() * this.width);
flake.y = 0;
flake.size = (Math.random() * 3.5) + .5;
flake.speed = flake.size*.5,flake.velY = flake.speed;
flake.velX = 0;
flake.opacity = (Math.random() * 0.5) + 0.1;
}
;
var calendarEl = document.querySelector('.calendar'),calendarDays = [].slice.call(calendarEl.children),settings ={
snow:false,tilt:true}
,bgEl = document.body,defaultBgColor = bgEl.style.backgroundColor,colortimeout,contentEl = document.querySelector('.content'),contents = contentEl.querySelectorAll('.content__block'),backCtrl = contentEl.querySelector('.btn-back'),contentNumber = contentEl.querySelector('.content__number'),isMobile = mobilecheck();
function init(){
layout();
}
function layout(){
new Calendar(calendarEl);
// If settings.snow === true then create the canvas element for the snow effect.if( settings.snow ){
var snow = new Snow();
bgEl = snow.canvas;
}
}
init();
}
)(window);
JS代码(main2.js):
/** * main.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';
// Helper vars and functions.function extend( a,b ){
for( var key in b ){
if( b.hasOwnProperty( key ) ){
a[key] = b[key];
}
}
return a;
}
// 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;
}
// From http://www.quirksmode.org/js/events_properties.html#positionfunction getMousePos(e){
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY){
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY){
posx = e.clientX + document.body.scrollLeft+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop+ document.documentElement.scrollTop;
}
return{
x:posx,y:posy}
}
// Detect mobile. From:http://stackoverflow.com/a/11381730/989439function mobilecheck(){
var check = false;
(function(a){
if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true}
)(navigator.userAgent||navigator.vendor||window.opera);
return check;
}
// The Day obj.function Day(options){
this.options = extend({
}
,this.options);
extend(this.options,options);
this.number = this.options.number;
this.color = this.options.color;
this.previewTitle = this.options.previewTitle;
this.isActive = !this.options.inactive;
this._layout();
}
Day.prototype.options ={
number:0,color:'#f1f1f1',previewTitle:'',inactive:false}
;
// Build the 3D cube element.Day.prototype._layout = function(){
/* The Cube structure:<div class="cube"><div class="cube__side cube__side--front"></div><div class="cube__side cube__side--back"></div><div class="cube__side cube__side--right"></div><div class="cube__side cube__side--left"></div><div class="cube__side cube__side--top"></div><div class="cube__side cube__side--bottom"></div></div>*/
this.cube = document.createElement('div');
this.cube.className = this.isActive ? 'cube':'cube cube--inactive';
this.cube.innerHTML = '<div class="cube__side cube__side--back"></div><div class="cube__side cube__side--left"></div><div class="cube__side cube__side--right"></div><div class="cube__side cube__side--bottom"></div><div class="cube__side cube__side--top"></div><div class="cube__side cube__side--front"><div class="cube__number">' + (this.number+1) + '</div></div>';
this.currentTransform ={
translateZ:0,rotateX:0,rotateY:0}
;
}
;
Day.prototype._rotate = function(ev){
anime.remove(this.cube);
var dir = this._getDirection(ev),type = ev.type.toLowerCase() === 'mouseenter' ? 1:-1,animationSettings ={
targets:this.cube,duration:1000,easing:'easeOutElastic',translateZ:type === 1 ? 100:0}
;
switch(dir){
case 0:// from/to topanimationSettings.rotateX = type === 1 ? -180:0;
animationSettings.rotateY = 0;
break;
case 1:// from/to rightanimationSettings.rotateY = type === 1 ? -180:0;
animationSettings.rotateX = 0;
break;
case 2:// from/to bottomanimationSettings.rotateX = type === 1 ? 180:0;
animationSettings.rotateY = 0;
break;
case 3:// from/to leftanimationSettings.rotateY = type === 1 ? 180:0;
animationSettings.rotateX = 0;
break;
}
;
this.currentTransform ={
translateZ:animationSettings.translateZ,rotateX:animationSettings.rotateX,rotateY:animationSettings.rotateY}
;
anime(animationSettings);
}
;
Day.prototype._setContentTitleFx = function(contentTitleEl){
this.titlefx = new TextFx(contentTitleEl);
this.titlefxSettings ={
in:{
duration:800,delay:650,easing:'easeOutExpo',opacity:{
duration:200,value:[0,1],easing:'linear'}
,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:800,delay:400,easing:'easeInExpo',opacity:0,translateY:350}
}
;
}
;
// From:https://codepen.io/noeldelgado/pen/pGwFx?editors=0110 by Noel Delgado (@noeldelgado).Day.prototype._getDirection = function(ev){
var obj = this.cube.querySelector('.cube__side--front'),w = obj.offsetWidth,h = obj.offsetHeight,bcr = obj.getBoundingClientRect(),x = (ev.pageX - (bcr.left + window.pageXOffset) - (w / 2) * (w > h ? (h / w):1)),y = (ev.pageY - (bcr.top + window.pageYOffset) - (h / 2) * (h > w ? (w / h):1)),d = Math.round( Math.atan2(y,x) / 1.57079633 + 5 ) % 4;
return d;
}
;
// The Calendar obj.function Calendar(el){
this.el = el;
this.calendarDays = [].slice.call(this.el.querySelectorAll('.cube'));
// Let´s build the days/cubes structure.this.cubes = document.createElement('div');
this.cubes.className = 'cubes';
this.el.appendChild(this.cubes);
// Array of days (each day is represented by a 3D Cube)this.days = [];
var self = this;
this.calendarDays.forEach(function(d,pos){
// Get the bg color defined in the data-bg-color of each division.var day = new Day({
number:pos,color:d.getAttribute('data-bg-color') || '#f1f1f1',previewTitle:d.getAttribute('data-title') || '',inactive:d.hasAttribute('data-inactive')}
),content = contents[pos];
if( content !== undefined ){
var contentTitle = contents[pos].querySelector('.content__title');
day._setContentTitleFx(contentTitle);
}
self.days.push(day);
self.cubes.appendChild(day.cube);
self.el.removeChild(d);
self._initDayEvents(day);
}
);
// structure to show each day preview (day + title + subtitle etc,when the user hovers one day/cube).this.dayPreview = document.createElement('h2');
this.dayPreview.className = 'title';
this.el.appendChild(this.dayPreview);
this._initEvents();
}
Calendar.prototype._initEvents = function(){
var self = this;
// Mousemove event / tilt functionalityif( settings.tilt ){
this.mousemoveFn = function(ev){
if( self.isOpen ){
return false;
}
;
requestAnimationFrame(function(){
// Mouse position relative to the document.var mousepos = getMousePos(ev);
self._rotateCalendar(mousepos);
}
);
}
;
this.handleOrientation = function(){
if( self.isOpen ){
return false;
}
;
var y = event.gamma;
// To make computation easier we shift the range of x and y to [0,180]y += 90;
requestAnimationFrame(function(){
// Transform values.var movement ={
ry:40}
,rotY = 2*movement.ry / 180 * y - movement.ry;
self.cubes.style.WebkitTransform = self.cubes.style.transform = 'rotate3d(0,-1,0,' + rotY + 'deg)';
}
);
}
;
if( isMobile ){
window.addEventListener('deviceorientation',this.handleOrientation);
}
else{
document.addEventListener('mousemove',this.mousemoveFn);
}
}
this.backToCalendarFn = function(ev){
// If the calendar is currently animating then do nothing.if( !self.isOpen || self.isAnimating ){
return false;
}
self.isAnimating = true;
self._hidePreviewTitle();
self._hideContent();
// Show the main containeranime({
targets:self.el,duration:1400,easing:'easeInOutExpo',opacity:1,complete:function(){
self.isOpen = false;
self.isAnimating = false;
}
}
);
var win ={
w:window.innerWidth,h:window.innerHeight}
;
for(var i = 0,totalDays = self.days.length;
i < totalDays;
++i){
var day = self.days[i];
if( self.currentDayIdx === i ){
anime({
targets:day.cube,duration:1200,delay:1000,easing:'easeOutExpo',scale:[0,1],translateY:0,translateZ:[-1500,0],rotateX:0,rotateY:0}
);
day.isRotated = false;
}
else{
anime({
targets:day.cube,duration:700,delay:function(el,index){
return 1000 + anime.random(0,100);
}
,easing:'easeOutExpo',translateX:[day.currentTransform.translateX < 0 ? -win.w:win.w,0],translateY:[day.currentTransform.translateY < 0 ? -win.h:win.h,0],rotateY:[day.currentTransform.rotateY,0]}
);
}
}
}
;
backCtrl.addEventListener('click',this.backToCalendarFn);
}
;
Calendar.prototype._initDayEvents = function(day){
var self = this;
// Day/Cube mouseenter/mouseleave event.var instance = day;
if( !isMobile ){
instance.mouseenterFn = function(ev){
if( instance.isRotated || self.isOpen ){
return false;
}
;
clearTimeout(colortimeout);
instance.rotatetimeout = setTimeout(function(){
colortimeout = setTimeout(function(){
self._changeBGColor(instance.color);
}
,30);
instance._rotate(ev);
self._showPreviewTitle(instance.previewTitle,instance.number);
instance.isRotated = true;
}
,30);
}
;
instance.mouseleaveFn = function(ev){
if( self.isOpen ){
return false;
}
;
clearTimeout(instance.rotatetimeout);
clearTimeout(colortimeout);
if( instance.isRotated ){
colortimeout = setTimeout(function(){
self._resetBGColor();
}
,35);
instance._rotate(ev);
self._hidePreviewTitle();
instance.isRotated = false;
}
}
;
}
// Day/Cube click event.instance.clickFn = function(ev){
// If the day is inactive or if the calendar is currently animating then do nothing.if( !instance.isActive || self.isAnimating ){
return false;
}
self.isAnimating = true;
self.isOpen = true;
self.currentDayIdx = instance.number;
// Hide the main containeranime({
targets:self.el,duration:1400,easing:'easeInOutExpo',opacity:0,complete:function(){
self.isAnimating = false;
}
}
);
var win ={
w:window.innerWidth,h:window.innerHeight}
;
for(var i = 0,totalDays = self.days.length;
i < totalDays;
++i){
var day = self.days[i];
if( self.currentDayIdx === i ){
anime({
targets:day.cube,duration:1000,easing:'easeInOutExpo',scale:0,translateZ:-1500,rotateX:day.currentTransform.rotateX,rotateY:day.currentTransform.rotateY}
);
self._showContent(instance);
}
else{
var bcr = day.cube.getBoundingClientRect(),l = bcr.left + window.pageXOffset,t = bcr.top + window.pageYOffset;
anime({
targets:day.cube,duration:1200,easing:'easeInOutExpo',translateX:function(el,index){
day.currentTransform.translateX = l <= win.w/2 && t <= win.h/2 || l <= win.w/2 && t > win.h/2 ? anime.random(-800,-400):anime.random(800,400);
return day.currentTransform.translateX;
}
,translateY:function(el,index){
day.currentTransform.translateY = l <= win.w/2 && t <= win.h/2 || l > win.w/2 && t <= win.h/2 ? anime.random(-800,400):anime.random(800,400);
return day.currentTransform.translateY;
}
,rotateY:function(el,index){
day.currentTransform.rotateY = l <= win.w/2 && t <= win.h/2 || l <= win.w/2 && t > win.h/2 ? anime.random(90,40):anime.random(-90,-40);
return day.currentTransform.rotateY;
}
}
);
}
}
}
;
instance.cube.querySelector('.cube__side--front').addEventListener('mouseenter',instance.mouseenterFn);
instance.cube.addEventListener('mouseleave',instance.mouseleaveFn);
instance.cube.addEventListener('click',instance.clickFn);
instance.cube.addEventListener('mousedown',function(){
clearTimeout(instance.rotatetimeout );
}
);
}
;
Calendar.prototype._rotateCalendar = function(mousepos){
// Transform values.var movement ={
rx:3,ry:3}
,rotX = 2 * movement.rx / this.cubes.offsetHeight * mousepos.y - movement.rx,rotY = 2 * movement.ry / this.cubes.offsetWidth * mousepos.x - movement.ry;
this.cubes.style.WebkitTransform = this.cubes.style.transform = 'rotate3d(-1,0,0,' + rotX + 'deg) rotate3d(0,1,0,' + rotY + 'deg)';
}
;
Calendar.prototype._showPreviewTitle = function(text,number){
this.dayPreview.innerHTML = text;
this.dayPreview.setAttribute('data-number',parseInt(number+1));
this.txtfx = new TextFx(this.dayPreview);
this.txtfx.hide();
this.dayPreview.style.opacity = 1;
this.txtfx.show({
in:{
duration:800,delay:function(el,index,total){
return index*40;
}
,easing:'easeOutElastic',opacity:1,translateY:function(el,index){
return index%2 === 0 ? [-25,0]:[25,0];
}
,rotateZ:[45,0]}
}
);
}
;
Calendar.prototype._hidePreviewTitle = function(){
var self = this;
if( this.txtfx ){
this.txtfx.hide();
}
this.dayPreview.style.opacity = 0;
}
;
Calendar.prototype._showContent = function(day){
// The content box for the clicked day.var content = contents[this.currentDayIdx],title = content.querySelector('.content__title'),description = content.querySelector('.content__description'),meta = content.querySelector('.content__meta');
content.classList.add('content__block--current');
day.titlefx.hide();
day.titlefx.show(day.titlefxSettings);
anime({
targets:[description,meta],duration:800,delay:function(el,index){
return index === 0 ? 900:1000}
,easing:'easeOutExpo',opacity:[0,1],translateY:[100,0]}
);
anime({
targets:backCtrl,duration:1000,delay:800,easing:'easeOutExpo',opacity:[0,1],translateY:[50,0]}
);
contentNumber.innerHTML = this.currentDayIdx + 1;
anime({
targets:contentNumber,duration:500,delay:800,easing:'easeOutExpo',opacity:[0,1],translateX:['-50%','-50%'],translateY:['-100%','-50%']}
);
}
;
Calendar.prototype._hideContent = function(){
var day = this.days[this.currentDayIdx],// The content box for the clicked day.content = contents[this.currentDayIdx],// The content title,description and meta for this day.title = content.querySelector('.content__title'),description = content.querySelector('.content__description'),meta = content.querySelector('.content__meta');
// The content number placeholder animation.anime({
targets:contentNumber,duration:500,easing:'easeInExpo',opacity:0,translateX:['-50%','-50%'],translateY:['-50%','100%']}
);
// The back button animation.anime({
targets:backCtrl,duration:1000,easing:'easeInExpo',opacity:0,translateY:50}
);
// The description and meta animation.anime({
targets:[description,meta],duration:800,delay:function(el,index){
return index === 0 ? 150:0}
,easing:'easeInExpo',opacity:[1,0],translateY:[0,200]}
);
// The content title animation.day.titlefx.hide(day.titlefxSettings,function(){
content.classList.remove('content__block--current');
}
);
}
;
Calendar.prototype._changeBGColor = function(color){
bgEl.style.backgroundColor = color;
}
;
Calendar.prototype._resetBGColor = function(){
bgEl.style.backgroundColor = defaultBgColor;
}
;
// Snow obj. Based on // https://gist.github.com/OmShiv/4368164.function Snow(){
this.canvas = document.createElement('canvas');
this.canvas.id = 'snow';
this.canvas.className = 'background';
this.canvas.style.background = defaultBgColor;
document.body.insertBefore(this.canvas,document.body.firstElementChild);
this.flakes = [];
this.ctx = this.canvas.getContext('2d');
this.flakeCount = 300;
this.mX = -100,this.mY = -100this.width = this.canvas.width = window.innerWidth;
this.height = this.canvas.height = window.innerHeight;
this._init();
}
Snow.prototype._init = function(){
var self = this;
window.addEventListener('resize',function(){
self.width = self.canvas.width = window.innerWidth;
self.height = self.canvas.height = window.innerHeight;
}
);
for(var i = 0;
i < this.flakeCount;
++i){
var x = Math.floor(Math.random() * this.width),y = Math.floor(Math.random() * this.height),size = (Math.random()*3.5) + .5,speed = size*.5,opacity = (Math.random() * 0.5) + 0.1;
this.flakes.push({
speed:speed,velY:speed,velX:0,x:x,y:y,size:size,stepSize:(Math.random()) / 30,step:0,opacity:opacity}
);
}
this._snow();
}
;
Snow.prototype._snow = function(){
this.ctx.clearRect(0,0,this.width,this.height);
for(var i = 0;
i < this.flakeCount;
++i){
var flake = this.flakes[i],x = this.mX,y = this.mY,minDist = 150,x2 = flake.x,y2 = flake.y,dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),dx = x2 - x,dy = y2 - y;
if( dist < minDist ){
var force = minDist / (dist * dist),xcomp = (x - x2) / dist,ycomp = (y - y2) / dist,deltaV = force / 2;
flake.velX -= deltaV * xcomp;
flake.velY -= deltaV * ycomp;
}
else{
flake.velX *= .98;
if( flake.velY <= flake.speed ){
flake.velY = flake.speed}
flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
}
this.ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";
flake.y += flake.velY;
flake.x += flake.velX;
if( flake.y >= this.height || flake.y <= 0 ){
this._reset(flake);
}
if( flake.x >= this.width || flake.x <= 0 ){
this._reset(flake);
}
this.ctx.beginPath();
this.ctx.arc(flake.x,flake.y,flake.size,0,Math.PI * 2);
this.ctx.fill();
}
requestAnimationFrame(this._snow.bind(this));
}
;
Snow.prototype._reset = function(flake){
flake.x = Math.floor(Math.random() * this.width);
flake.y = 0;
flake.size = (Math.random() * 3.5) + .5;
flake.speed = flake.size*.5,flake.velY = flake.speed;
flake.velX = 0;
flake.opacity = (Math.random() * 0.5) + 0.1;
}
;
var calendarEl = document.querySelector('.calendar'),calendarDays = [].slice.call(calendarEl.children),settings ={
snow:false,tilt:true}
,bgEl = document.body,defaultBgColor = bgEl.style.backgroundColor,colortimeout,contentEl = document.querySelector('.content'),contents = contentEl.querySelectorAll('.content__block'),backCtrl = contentEl.querySelector('.btn-back'),contentNumber = contentEl.querySelector('.content__number'),isMobile = mobilecheck();
function init(){
layout();
}
function layout(){
new Calendar(calendarEl);
// If settings.snow === true then create the canvas element for the snow effect.if( settings.snow ){
var snow = new Snow();
bgEl = snow.canvas;
}
}
init();
}
)(window);
JS代码(main3.js):
/** * main.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';
// Helper vars and functions.function extend( a,b ){
for( var key in b ){
if( b.hasOwnProperty( key ) ){
a[key] = b[key];
}
}
return a;
}
// From http://www.quirksmode.org/js/events_properties.html#positionfunction getMousePos(e){
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY){
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY){
posx = e.clientX + document.body.scrollLeft+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop+ document.documentElement.scrollTop;
}
return{
x:posx,y:posy}
}
// Detect mobile. From:http://stackoverflow.com/a/11381730/989439function mobilecheck(){
var check = false;
(function(a){
if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true}
)(navigator.userAgent||navigator.vendor||window.opera);
return check;
}
// The Day obj.function Day(options){
this.options = extend({
}
,this.options);
extend(this.options,options);
this.number = this.options.number;
this.color = this.options.color;
this.previewTitle = this.options.previewTitle;
this.isActive = !this.options.inactive;
this._layout();
}
Day.prototype.options ={
number:0,color:'#f1f1f1',previewTitle:'',inactive:false}
;
// Build the 3D cube element.Day.prototype._layout = function(){
/* The Cube structure:<div class="cube"><div class="cube__side cube__side--front"></div><div class="cube__side cube__side--back"></div><div class="cube__side cube__side--right"></div><div class="cube__side cube__side--left"></div><div class="cube__side cube__side--top"></div><div class="cube__side cube__side--bottom"></div></div>*/
this.cube = document.createElement('div');
this.cube.className = this.isActive ? 'cube':'cube cube--inactive';
this.cube.innerHTML = '<div class="cube__side cube__side--back"></div><div class="cube__side cube__side--left"></div><div class="cube__side cube__side--right"></div><div class="cube__side cube__side--bottom"></div><div class="cube__side cube__side--top"></div><div class="cube__side cube__side--front"><div class="cube__number">' + (this.number+1) + '</div></div>';
this.currentTransform ={
translateZ:0,rotateX:0,rotateY:0}
;
}
;
Day.prototype._rotate = function(ev){
anime.remove(this.cube);
var dir = this._getDirection(ev),type = ev.type.toLowerCase() === 'mouseenter' ? 1:-1,animationSettings ={
targets:this.cube,duration:500,easing:'easeOutQuart',translateZ:type === 1 ? 100:0}
;
switch(dir){
case 0:// from/to topanimationSettings.rotateX = type === 1 ? -180:0;
animationSettings.rotateY = 0;
break;
case 1:// from/to rightanimationSettings.rotateY = type === 1 ? -180:0;
animationSettings.rotateX = 0;
break;
case 2:// from/to bottomanimationSettings.rotateX = type === 1 ? 180:0;
animationSettings.rotateY = 0;
break;
case 3:// from/to leftanimationSettings.rotateY = type === 1 ? 180:0;
animationSettings.rotateX = 0;
break;
}
;
this.currentTransform ={
translateZ:animationSettings.translateZ,rotateX:animationSettings.rotateX,rotateY:animationSettings.rotateY}
;
anime(animationSettings);
}
;
Day.prototype._setContentTitleFx = function(contentTitleEl){
this.titlefx = new TextFx(contentTitleEl);
this.titlefxSettings ={
in:{
duration:800,delay:function(el,index){
return 900 + index*20;
}
,easing:'easeOutExpo',opacity:{
duration:200,value:[0,1],easing:'linear'}
,rotateZ:function(el,index){
return [anime.random(-10,10),0];
}
,translateY:function(el,index){
return [anime.random(-200,-100),0];
}
}
,out:{
duration:800,delay:300,easing:'easeInExpo',opacity:0,translateY:-350}
}
;
}
;
// From:https://codepen.io/noeldelgado/pen/pGwFx?editors=0110 by Noel Delgado (@noeldelgado).Day.prototype._getDirection = function(ev){
var obj = this.cube.querySelector('.cube__side--front'),w = obj.offsetWidth,h = obj.offsetHeight,bcr = obj.getBoundingClientRect(),x = (ev.pageX - (bcr.left + window.pageXOffset) - (w / 2) * (w > h ? (h / w):1)),y = (ev.pageY - (bcr.top + window.pageYOffset) - (h / 2) * (h > w ? (w / h):1)),d = Math.round( Math.atan2(y,x) / 1.57079633 + 5 ) % 4;
return d;
}
;
// The Calendar obj.function Calendar(el){
this.el = el;
this.calendarDays = [].slice.call(this.el.querySelectorAll('.cube'));
// Let´s build the days/cubes structure.this.cubes = document.createElement('div');
this.cubes.className = 'cubes';
this.el.appendChild(this.cubes);
// Array of days (each day is represented by a 3D Cube)this.days = [];
var self = this;
this.calendarDays.forEach(function(d,pos){
// Get the bg color defined in the data-bg-color of each division.var day = new Day({
number:pos,color:d.getAttribute('data-bg-color') || '#f1f1f1',previewTitle:d.getAttribute('data-title') || '',inactive:d.hasAttribute('data-inactive')}
),content = contents[pos];
if( content !== undefined ){
var contentTitle = contents[pos].querySelector('.content__title');
day._setContentTitleFx(contentTitle);
}
self.days.push(day);
self.cubes.appendChild(day.cube);
self.el.removeChild(d);
self._initDayEvents(day);
}
);
// structure to show each day preview (day + title + subtitle etc,when the user hovers one day/cube).this.dayPreview = document.createElement('h2');
this.dayPreview.className = 'title';
this.el.appendChild(this.dayPreview);
this._initEvents();
}
Calendar.prototype._initEvents = function(){
var self = this;
// Mousemove event / tilt functionalityif( settings.tilt ){
this.mousemoveFn = function(ev){
if( self.isOpen ){
return false;
}
;
requestAnimationFrame(function(){
// Mouse position relative to the document.var mousepos = getMousePos(ev);
self._rotateCalendar(mousepos);
}
);
}
;
this.handleOrientation = function(){
if( self.isOpen ){
return false;
}
;
var y = event.gamma;
// To make computation easier we shift the range of x and y to [0,180]y += 90;
requestAnimationFrame(function(){
// Transform values.var movement ={
ry:40}
,rotY = 2*movement.ry / 180 * y - movement.ry;
self.cubes.style.WebkitTransform = self.cubes.style.transform = 'rotate3d(0,-1,0,' + rotY + 'deg)';
}
);
}
;
if( isMobile ){
window.addEventListener('deviceorientation',this.handleOrientation);
}
else{
document.addEventListener('mousemove',this.mousemoveFn);
}
}
this.backToCalendarFn = function(ev){
// If the calendar is currently animating then do nothing.if( !self.isOpen || self.isAnimating ){
return false;
}
self.isAnimating = true;
self._hidePreviewTitle();
self._hideContent();
// Show the main containeranime({
targets:self.el,duration:1400,easing:'easeInOutExpo',opacity:1}
);
for(var i = 0,totalDays = self.days.length;
i < totalDays;
++i){
var day = self.days[i],isCurrent = self.currentDayIdx === i;
if( isCurrent ){
day.isRotated = false;
}
anime({
targets:day.cube,duration:500,delay:isCurrent ? 1000:function(el,index){
return 1100 + anime.random(0,300);
}
,easing:'easeOutBack',scale:[0,1],translateZ:0,rotateX:0,rotateY:0,complete:isCurrent ? function(){
self.isOpen = false;
self.isAnimating = false;
}
:null}
);
}
}
;
backCtrl.addEventListener('click',this.backToCalendarFn);
}
;
Calendar.prototype._initDayEvents = function(day){
var self = this;
// Day/Cube mouseenter/mouseleave event.var instance = day;
if( !isMobile ){
instance.mouseenterFn = function(ev){
if( instance.isRotated || self.isOpen ){
return false;
}
;
clearTimeout(colortimeout);
instance.rotatetimeout = setTimeout(function(){
colortimeout = setTimeout(function(){
self._changeBGColor(instance.color);
}
,30);
instance._rotate(ev);
self._showPreviewTitle(instance.previewTitle,instance.number);
instance.isRotated = true;
}
,30);
}
;
instance.mouseleaveFn = function(ev){
if( self.isOpen ){
return false;
}
;
clearTimeout(instance.rotatetimeout);
clearTimeout(colortimeout);
if( instance.isRotated ){
colortimeout = setTimeout(function(){
self._resetBGColor();
}
,35);
instance._rotate(ev);
self._hidePreviewTitle();
instance.isRotated = false;
}
}
;
}
// Day/Cube click event.instance.clickFn = function(ev){
// If the day is inactive or if the calendar is currently animating then do nothing.if( !instance.isActive || self.isAnimating ){
return false;
}
self.isAnimating = true;
self.isOpen = true;
self.currentDayIdx = instance.number;
// Hide the main containeranime({
targets:self.el,duration:1400,easing:'easeInOutExpo',opacity:0,complete:function(){
self.isAnimating = false;
}
}
);
for(var i = 0,totalDays = self.days.length;
i < totalDays;
++i){
var day = self.days[i],isCurrent = self.currentDayIdx === iif( isCurrent ){
self._showContent(instance);
}
anime({
targets:day.cube,duration:500,delay:isCurrent ? 600:function(){
return anime.random(0,300);
}
,easing:isCurrent ? 'easeOutCubic':'easeInBack',scale:0,translateZ:isCurrent ? -1000:function(){
return anime.random(-1000,-400);
}
,rotateX:isCurrent ? -180:function(){
return anime.random(-180,180);
}
,rotateY:isCurrent ? -180:function(){
return anime.random(-180,180);
}
}
);
}
}
;
instance.cube.querySelector('.cube__side--front').addEventListener('mouseenter',instance.mouseenterFn);
instance.cube.addEventListener('mouseleave',instance.mouseleaveFn);
instance.cube.addEventListener('click',instance.clickFn);
instance.cube.addEventListener('mousedown',function(){
clearTimeout(instance.rotatetimeout );
}
);
}
;
Calendar.prototype._rotateCalendar = function(mousepos){
// Transform values.var movement ={
rx:3,ry:3}
,rotX = 2 * movement.rx / this.cubes.offsetHeight * mousepos.y - movement.rx,rotY = 2 * movement.ry / this.cubes.offsetWidth * mousepos.x - movement.ry;
this.cubes.style.WebkitTransform = this.cubes.style.transform = 'rotate3d(-1,0,0,' + rotX + 'deg) rotate3d(0,1,0,' + rotY + 'deg)';
}
;
Calendar.prototype._showPreviewTitle = function(text,number){
this.dayPreview.innerHTML = text;
this.dayPreview.setAttribute('data-number',parseInt(number+1));
this.txtfx = new TextFx(this.dayPreview);
this.txtfx.hide();
this.dayPreview.style.opacity = 1;
this.txtfx.show({
in:{
duration:700,delay:function(el,index){
return index*20;
}
,easing:'easeOutCirc',opacity:1,translateX:function(el,index){
return [(50+index*10),0]}
}
}
);
}
;
Calendar.prototype._hidePreviewTitle = function(){
var self = this;
if( this.txtfx ){
this.txtfx.hide();
}
this.dayPreview.style.opacity = 0;
}
;
Calendar.prototype._showContent = function(day){
// The content box for the clicked day.var content = contents[this.currentDayIdx],title = content.querySelector('.content__title'),description = content.querySelector('.content__description'),meta = content.querySelector('.content__meta');
content.classList.add('content__block--current');
day.titlefx.hide();
day.titlefx.show(day.titlefxSettings);
anime({
targets:[description,meta],duration:800,delay:function(el,index){
return index === 0 ? 1000:1100}
,easing:'easeOutExpo',opacity:[0,1],translateY:[100,0]}
);
anime({
targets:backCtrl,duration:1100,delay:800,easing:'easeOutExpo',opacity:[0,1],translateY:[50,0]}
);
contentNumber.innerHTML = this.currentDayIdx + 1;
anime({
targets:contentNumber,duration:500,delay:900,easing:'easeOutExpo',opacity:[0,1],translateX:[-200,0]}
);
}
;
Calendar.prototype._hideContent = function(){
var day = this.days[this.currentDayIdx],// The content box for the clicked day.content = contents[this.currentDayIdx],// The content title,description and meta for this day.title = content.querySelector('.content__title'),description = content.querySelector('.content__description'),meta = content.querySelector('.content__meta');
// The content number placeholder animation.anime({
targets:contentNumber,duration:800,easing:'easeInExpo',opacity:0,translateX:-200}
);
// The back button animation.anime({
targets:backCtrl,duration:1000,easing:'easeInExpo',opacity:0,translateY:50}
);
// The description and meta animation.anime({
targets:[description,meta],duration:800,delay:function(el,index){
return index === 0 ? 150:0}
,easing:'easeInExpo',opacity:[1,0],translateY:[0,200]}
);
// The content title animation.var bcr = day.cube.getBoundingClientRect();
day.titlefx.hide(day.titlefxSettings,function(){
content.classList.remove('content__block--current');
}
);
}
;
Calendar.prototype._changeBGColor = function(color){
bgEl.style.backgroundColor = color;
}
;
Calendar.prototype._resetBGColor = function(){
bgEl.style.backgroundColor = defaultBgColor;
}
;
// Snow obj. Based on // https://gist.github.com/OmShiv/4368164.function Snow(){
this.canvas = document.createElement('canvas');
this.canvas.id = 'snow';
this.canvas.className = 'background';
this.canvas.style.background = defaultBgColor;
document.body.insertBefore(this.canvas,document.body.firstElementChild);
this.flakes = [];
this.ctx = this.canvas.getContext('2d');
this.flakeCount = 300;
this.mX = -100,this.mY = -100this.width = this.canvas.width = window.innerWidth;
this.height = this.canvas.height = window.innerHeight;
this._init();
}
Snow.prototype._init = function(){
var self = this;
window.addEventListener('resize',function(){
self.width = self.canvas.width = window.innerWidth;
self.height = self.canvas.height = window.innerHeight;
}
);
for(var i = 0;
i < this.flakeCount;
++i){
var x = Math.floor(Math.random() * this.width),y = Math.floor(Math.random() * this.height),size = (Math.random()*3.5) + .5,speed = size*.5,opacity = (Math.random() * 0.5) + 0.1;
this.flakes.push({
speed:speed,velY:speed,velX:0,x:x,y:y,size:size,stepSize:(Math.random()) / 30,step:0,opacity:opacity}
);
}
this._snow();
}
;
Snow.prototype._snow = function(){
this.ctx.clearRect(0,0,this.width,this.height);
for(var i = 0;
i < this.flakeCount;
++i){
var flake = this.flakes[i],x = this.mX,y = this.mY,minDist = 150,x2 = flake.x,y2 = flake.y,dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),dx = x2 - x,dy = y2 - y;
if( dist < minDist ){
var force = minDist / (dist * dist),xcomp = (x - x2) / dist,ycomp = (y - y2) / dist,deltaV = force / 2;
flake.velX -= deltaV * xcomp;
flake.velY -= deltaV * ycomp;
}
else{
flake.velX *= .98;
if( flake.velY <= flake.speed ){
flake.velY = flake.speed}
flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
}
this.ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";
flake.y += flake.velY;
flake.x += flake.velX;
if( flake.y >= this.height || flake.y <= 0 ){
this._reset(flake);
}
if( flake.x >= this.width || flake.x <= 0 ){
this._reset(flake);
}
this.ctx.beginPath();
this.ctx.arc(flake.x,flake.y,flake.size,0,Math.PI * 2);
this.ctx.fill();
}
requestAnimationFrame(this._snow.bind(this));
}
;
Snow.prototype._reset = function(flake){
flake.x = Math.floor(Math.random() * this.width);
flake.y = 0;
flake.size = (Math.random() * 3.5) + .5;
flake.speed = flake.size*.5,flake.velY = flake.speed;
flake.velX = 0;
flake.opacity = (Math.random() * 0.5) + 0.1;
}
;
var calendarEl = document.querySelector('.calendar'),calendarDays = [].slice.call(calendarEl.children),settings ={
snow:true,tilt:false}
,bgEl = document.body,defaultBgColor = bgEl.style.backgroundColor,colortimeout,contentEl = document.querySelector('.content'),contents = contentEl.querySelectorAll('.content__block'),backCtrl = contentEl.querySelector('.btn-back'),contentNumber = contentEl.querySelector('.content__number'),isMobile = mobilecheck();
function init(){
layout();
}
function layout(){
new Calendar(calendarEl);
// If settings.snow === true then create the canvas element for the snow effect.if( settings.snow ){
var snow = new Snow();
bgEl = snow.canvas;
}
}
init();
}
)(window);
CSS代码(style1.css):
.cube__side,.no-js .cube{border:0.75vw solid #fff;outline:1px solid #fff;background:#f0f0f0 url(../img/mandala.png) no-repeat center center;}
.cube:not(.cube--inactive):nth-child(2n) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(2n){background-image:url(../img/mandala2.png);}
.cube:not(.cube--inactive):nth-child(3n) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(3n){background-image:url(../img/mandala3.png);}
.cube--inactive .cube__side,.no-js .cube--inactive{background:#e1e0e0;}
/* With JS we insert a number span into the cube */
.cube__number,.no-js .cube::after{font-family:'Avenir Next',Avenir,'Helvetica Neue',Helvetica,'Segoe UI',Arial,sans-serif;font-weight:700;line-height:2.5;width:2em;height:2em;padding:0 0 0 0.25em;text-align:center;letter-spacing:-0.05em;color:#fff;border-radius:100% 0 0 0;background:#f8af8d;}
.cube:nth-child(2n):not(.cube--inactive) .cube__number,.no-js .cube:nth-child(2n):not(.cube--inactive)::after{background:#f8d18d;}
.cube:nth-child(3n):not(.cube--inactive) .cube__number,.no-js .cube:nth-child(3n):not(.cube--inactive)::after{background:#8df88d;}
.cube--inactive .cube__number,.no-js .cube--inactive::after{background:#aaa;}
.js .content__block{text-align:right;}
.content__number{font-family:'Avenir Next',Avenir,'Helvetica Neue',Helvetica,'Segoe UI',Arial,sans-serif;font-size:40vw;font-weight:bold;line-height:0.5;right:0;bottom:30vh;text-indent:-0.175em;letter-spacing:-0.175em;color:#fff;}
CSS代码(style2.css):
body{font-family:'Montserrat',sans-serif;}
.cube__side,.no-js .cube{border:10px solid;outline:1px solid;background-color:currentColor;background-blend-mode:soft-light;}
.cube:not(.cube--inactive):nth-child(1) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(1){background-image:url(../img/1.png);color:#f44336;}
.cube:not(.cube--inactive):nth-child(2) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(2){background-image:url(../img/2.png);color:#e91e63;}
.cube:not(.cube--inactive):nth-child(3) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(3){background-image:url(../img/3.png);color:#9c27b0;}
.cube:not(.cube--inactive):nth-child(4) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(4){background-image:url(../img/4.png);color:#673ab7;}
.cube:not(.cube--inactive):nth-child(5) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(5){background-image:url(../img/5.png);color:#3f51b5;}
.cube:not(.cube--inactive):nth-child(6) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(6){background-image:url(../img/6.png);color:#2196f3;}
.cube:not(.cube--inactive):nth-child(7) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(7){background-image:url(../img/7.png);color:#03a9f4;}
.cube:not(.cube--inactive):nth-child(8) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(8){background-image:url(../img/8.png);color:#00bcd4;}
.cube:not(.cube--inactive):nth-child(9) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(9){background-image:url(../img/9.png);color:#009688;}
.cube:not(.cube--inactive):nth-child(10) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(10){background-image:url(../img/10.png);color:#4caf50;}
.cube:not(.cube--inactive):nth-child(11) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(11){background-image:url(../img/11.png);color:#8bc34a;}
.cube:not(.cube--inactive):nth-child(12) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(12){background-image:url(../img/12.png);color:#cddc39;}
.cube:not(.cube--inactive):nth-child(13) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(13){background-image:url(../img/13.png);color:#ffeb3b;}
.cube:not(.cube--inactive):nth-child(14) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(14){background-image:url(../img/14.png);color:#ffc107;}
.cube:not(.cube--inactive):nth-child(15) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(15){background-image:url(../img/15.png);color:#ff9800;}
.cube:not(.cube--inactive):nth-child(16) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(16){background-image:url(../img/16.png);color:#ff5722;}
.cube:not(.cube--inactive):nth-child(17) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(17){background-image:url(../img/17.png);color:#795548;}
.cube:not(.cube--inactive):nth-child(18) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(18){background-image:url(../img/18.png);color:#564545;}
.cube:not(.cube--inactive):nth-child(19) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(19){background-image:url(../img/19.png);color:#607d8b;}
.cube:not(.cube--inactive):nth-child(20) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(20){background-image:url(../img/20.png);color:#405d6b;}
.cube:not(.cube--inactive):nth-child(21) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(21){background-image:url(../img/21.png);color:#9e9e9e;}
.cube:not(.cube--inactive):nth-child(22) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(22){background-image:url(../img/22.png);color:#70737d;}
.cube--inactive .cube__side,.no-js .cube--inactive{background:#2e2e37;}
/* With JS we insert a number span into the cube */
.cube__number,.no-js .cube::after{bottom:auto;top:0.15em;left:0.25em;right:auto;line-height:1;font-size:2em;color:#fff;text-align:center;font-weight:bold;text-shadow:0 3px 5px rgba(0,0,0,0.2);}
@media screen and (max-width:50.75em){.cube__number,.no-js .cube::after{font-size:1em;}
}
.js .content__block{width:100%;text-align:center;left:0;padding:2em;}
.js .content__description{padding:0;max-width:30em;margin:2em auto 0.5em;}
.js .content__meta{padding:0;}
.content__number{color:#fff;font-weight:bold;line-height:0.5;letter-spacing:-0.175em;text-indent:-0.175em;font-size:40vw;left:50%;top:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);font-family:'Avenir Next',Avenir,'Helvetica Neue',Helvetica,'Segoe UI',Arial,sans-serif;}
CSS代码(style3.css):
body{background:#cc0019;color:#fceeb8;font-family:'BioRhyme',serif;}
a{color:#fff;}
a:hover,a:focus{color:#fceeb8;}
.codrops-header{background:none;}
.codrops-header__tagline,.codrops-demos,.content__description,.content__meta{font-family:'Roboto Condensed',sans-serif;}
.codrops-demos a.current-demo{color:#fceeb8;}
.calendar{-webkit-perspective:2500px;perspective:2500px;}
.cube__side,.no-js .cube{border:3px solid #fff;outline:1px solid #fff;background:#f0f0f0 url(../img/c1.png) no-repeat center center;}
.cube:not(.cube--inactive):nth-child(2n) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(2n){background-image:url(../img/c2.png);}
.cube:not(.cube--inactive):nth-child(3n) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(3n){background-image:url(../img/c3.png);}
.cube:not(.cube--inactive):nth-child(4n) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(4n){background-image:url(../img/c4.png);}
.cube:not(.cube--inactive):nth-child(5n) .cube__side,.no-js .cube:not(.cube--inactive):nth-child(5n){background-image:url(../img/c5.png);}
.cube--inactive .cube__side,.no-js .cube--inactive{background:#e6e6e6;}
/* With JS we insert a number span into the cube */
.cube__number,.no-js .cube::after{font-weight:700;color:#cc0019;background:#fff;width:100%;text-align:center;top:50%;height:1.5em;line-height:1.5;bottom:auto;margin:-0.75em 0 0;}
.cube--inactive .cube__number,.no-js .cube--inactive::after{color:#cac9c9;}
.js .content__block{width:100%;padding:0 5vw 0 20vw;}
.js .content__description{padding:0 0 0 4vw;}
.content__number{color:#000;font-weight:bold;line-height:0.5;letter-spacing:-0.175em;font-size:30vw;left:-5vw;bottom:8vh;}
.content__title{font-size:6vw;}
.title{color:#fceeb8;right:auto;left:3vw;}
@media screen and (max-width:50.75em){.js .content__block{padding:4em 2em 0;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;}
.content__number{bottom:30vh;}
}
分享到QQ
分享到微博
微信扫一扫
