Repository: codrops/StackMotionHoverEffects
Branch: master
Commit: 5ecaae4d7fc7
Files: 6
Total size: 69.0 KB
Directory structure:
gitextract_rdoa6q44/
├── .gitignore
├── README.md
├── css/
│ ├── demo.css
│ └── normalize.css
├── index.html
└── js/
└── main.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
*.DS_Store
================================================
FILE: README.md
================================================
# Stack Motion Hover Effect
Experimental hover effects that reveal a stack of multiple colored cards behind the hovered item, inspired by [Merci-Michel](http://www.merci-michel.com/projects/)
[Article on Codrops](https://tympanus.net/codrops/?p=30373)
[Demo](http://tympanus.net/Development/StackMotionHoverEffects/)
## Credits
- Idea based on the effect seen on the projects page of [Merci-Michel](http://www.merci-michel.com/projects/)
- [Anime.js](http://anime-js.com/) by Julian Garnier
- Images made with designs by [Freepik.com](http://www.freepik.com/free-vector/new-year-party-brochure-with-colorful-geometric-shapes_997206.htm)
- Typeface [Overpass Mono](https://fonts.google.com/specimen/Overpass+Mono) by Delve Withrington
## License
This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.
## Misc
Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/)
[© Codrops 2017](http://www.codrops.com)
================================================
FILE: css/demo.css
================================================
*,
*::after,
*::before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Overpass Mono', monospace;
color: #edecf2;
background: #37373e;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
color: #ff3d53;
outline: none;
transition: color 0.2s;
}
a:hover,
a:focus {
color: #fff;
}
.hidden {
position: absolute;
overflow: hidden;
width: 0;
height: 0;
pointer-events: none;
}
/* Icons */
.icon {
display: block;
width: 1.5em;
height: 1.5em;
margin: 0 auto;
fill: currentColor;
}
.message-mobile {
font-size: 0.85em;
display: none;
width: 100%;
padding: 0.5em;
text-align: center;
background: #ff3d53;
}
/* Header */
.codrops-header {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
width: 100%;
padding: 1.5em 1.5em 4em;
text-align: left;
}
.codrops-header__title {
font-size: 1.15em;
margin: 0;
padding: 0 0.5em;
}
.codrops-header__tagline {
font-size: 0.85em;
width: 100%;
margin: 0;
color: #b0adad;
}
.codrops-header__tagline::before {
content: '> ';
}
.github {
font-size: 0.85em;
font-weight: bold;
margin: 0 0 0 auto;
}
/* Top Navigation Style */
.codrops-links {
position: relative;
display: flex;
justify-content: center;
text-align: center;
white-space: nowrap;
}
.codrops-links::after {
content: '';
position: absolute;
top: 20%;
left: 50%;
width: 1px;
height: 60%;
background: #b0adad;
transform: rotate3d(0, 0, 1, 22.5deg);
}
.codrops-icon {
display: inline-block;
margin: 0.25em 0 0.25em 0.25em;
padding: 0.35em 0 0.35em 0.35em;
}
.codrops-icon:first-child {
margin: 0.25em 0.25em 0.25em 0;
padding: 0.35em 0.35em 0.35em 0;
}
/* Content */
.content {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0 0 1em;
}
.content:not(:first-child) {
padding: 4em 0;
}
.content.content--padded {
padding: 4em 0 8em;
}
.content__title {
font-size: 0.85em;
position: absolute;
top: 18%;
left: 2em;
width: 5em;
margin: 0.75em 0;
color: #b0adad;
}
/* Grid */
.grid {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%;
padding: 0 7em;
perspective: 800px;
perspective-origin: 50% 100%;
}
.grid__item {
position: relative;
display: block;
flex: none;
width: 250px;
margin: 1.5em 2vw;
cursor: default;
transform-style: preserve-3d;
}
.grid__item:hover,
.grid__item:focus {
outline: none;
}
.grid__item--c1,
.grid__item--c1:hover,
.grid__item--c1:focus {
color: #52649e;
}
.grid__item--c2,
.grid__item--c2:hover,
.grid__item--c2:focus {
color: #ee7074;
}
.grid__item--c3,
.grid__item--c3:hover,
.grid__item--c3:focus {
color: #f7f295;
}
.stack {
position: relative;
width: 100%;
height: 200px;
transform-style: preserve-3d;
}
.stack__deco {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: currentColor;
transform-origin: 50% 100%;
}
.stack__deco:first-child {
opacity: 0.2;
}
.stack__deco:nth-child(2) {
opacity: 0.4;
}
.stack__deco:nth-child(3) {
opacity: 0.6;
}
.stack__deco:nth-child(4) {
opacity: 0.8;
}
.stack__figure {
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
width: 100%;
height: 100%;
cursor: pointer;
transform-origin: 50% 100%;
}
.stack__img {
position: relative;
display: block;
flex: none;
}
.grid__item-caption {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
transform-style: preserve-3d;
}
.grid__item-title {
font-size: 1.15em;
width: 100%;
margin: 1em 0;
text-align: left;
color: #fff;
}
.column {
width: 50%;
padding: 0 0.5em;
opacity: 0;
}
.column--left {
text-align: right;
}
.column--right {
text-align: left;
}
.column__text {
font-size: 0.85em;
display: block;
color: #fff;
}
.column--left .column__text {
font-weight: bold;
}
.column--right .column__text {
color: #b0adad;
}
/* Individual effects */
/* Vega */
.grid--effect-vega .column {
opacity: 1;
}
/* Castor */
.grid--effect-castor .stack__figure,
.grid--effect-castor .stack__deco {
transform-origin: 50% 50%;
}
.grid--effect-castor .column {
opacity: 1;
}
/* Hamal */
.grid--effect-hamal {
perspective: none;
}
.grid--effect-hamal .column {
opacity: 1;
}
/* polaris */
.grid--effect-polaris {
perspective-origin: 100% -100%;
}
.grid--effect-polaris .column {
opacity: 1;
}
/* Alphard */
.grid--effect-alphard {
perspective: none;
}
.grid--effect-alphard .column {
opacity: 1;
}
.grid--effect-alphard .stack__figure,
.grid--effect-alphard .stack__deco {
transform-origin: 50% 150%;
}
/* Altair */
.grid--effect-altair {
perspective-origin: 50% -50%;
}
.grid--effect-altair .column {
opacity: 1;
}
.grid--effect-altair .stack__figure,
.grid--effect-altair .stack__deco {
transform-origin: 50% 100%;
}
/* rigel */
.grid--effect-rigel {
perspective-origin: 50% 100%;
}
.grid--effect-rigel .column {
opacity: 1;
}
/* Canopus */
.grid--effect-canopus {
perspective-origin: 50% 0%;
}
.grid--effect-canopus .column {
opacity: 1;
}
.grid--effect-canopus .stack__figure,
.grid--effect-canopus .stack__deco {
transform-origin: 50% 100%;
}
/* pollux */
.grid--effect-pollux {
perspective: 1000px;
perspective-origin: 50% -70%;
}
.grid--effect-pollux .column {
opacity: 1;
}
.grid--effect-pollux .stack__figure,
.grid--effect-pollux .stack__deco {
transform-origin: 50% 50%;
}
.grid--effect-pollux .grid__item-caption > .grid__item-title {
transform-origin: 50% -200%;
}
/* deneb */
.grid--effect-deneb {
perspective: none;
}
.grid--effect-deneb .stack__figure,
.grid--effect-deneb .stack__deco {
transform-origin: 50% 50%;
}
.grid--effect-deneb .grid__item-caption > .column {
transform-origin: 50% -200%;
}
/* Related demos */
.content.content--related {
font-weight: bold;
justify-content: center;
min-height: 0;
padding-bottom: 10em;
text-align: center;
background: #5d5d66;
}
.content--related a {
color: #b0adad;
}
.content--related a:hover,
.content--related a:focus {
color: #fff;
}
.content--related p:first-child {
padding: 6em 0 2em;
}
.content--related p {
width: 100%;
color: #37373e;
}
.media-item {
font-size: 0.85em;
display: inline-block;
padding: 1em 2vw;
vertical-align: top;
transition: color 0.3s;
}
.media-item__img {
max-width: 100%;
opacity: 0.6;
transition: opacity 0.3s;
}
.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
opacity: 1;
}
.media-item__title {
font-size: 1em;
margin: 0;
padding: 0.5em;
}
@media screen and (max-width: 42em) {
.codrops-header {
display: block;
text-align: center;
}
.github {
width: 100%;
margin: 0;
padding: 0.5em 0;
}
.message-mobile {
display: block;
}
}
================================================
FILE: css/normalize.css
================================================
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stack Motion Hover Effects | Codrops</title>
<meta name="description" content="Item hover effects that reveal a colored stack behind the hovered item" />
<meta name="keywords" content="hover effect, reveal, hover, css, animations, anime.js, javascript, motion, ux" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Overpass+Mono:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<script>document.documentElement.className = 'js';</script>
</head>
<body>
<svg class="hidden">
<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>
</svg>
<main>
<div class="message-mobile">This is a hover effect. Best viewed on desktop.</div>
<header class="codrops-header">
<div class="codrops-links">
<a class="codrops-icon codrops-icon--prev" href="https://tympanus.net/Development/GeekyGlasses/" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
<a class="codrops-icon codrops-icon--drop" href="https://tympanus.net/codrops/?p=30373" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
</div>
<h1 class="codrops-header__title">Stack Motion Hover Effects</h1>
<a class="github" href="https://github.com/codrops/StackMotionHoverEffects/">/Github</a>
<p class="codrops-header__tagline">Decorative motion hover effects for grid items</p>
<p class="codrops-header__tagline">Inspired by <a href="http://www.merci-michel.com/projects/">Merci-Michel</a></p>
</header>
<section class="content">
<h2 class="content__title">_001</h2>
<div class="grid grid--effect-vega">
<a href="#" class="grid__item grid__item--c1">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/1.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">anaerobic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
<a href="#" class="grid__item grid__item--c2">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/2.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">exothermic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
<a href="#" class="grid__item grid__item--c3">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/3.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">diatomic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
</div>
</section>
<section class="content">
<h2 class="content__title">_002</h2>
<div class="grid grid--effect-castor">
<a href="#" class="grid__item grid__item--c1">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/1.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">anaerobic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
<a href="#" class="grid__item grid__item--c2">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/2.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">exothermic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
<a href="#" class="grid__item grid__item--c3">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/3.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">diatomic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
</div>
</section>
<section class="content">
<h2 class="content__title">_003</h2>
<div class="grid grid--effect-hamal">
<a href="#" class="grid__item grid__item--c1">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/1.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">anaerobic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
<a href="#" class="grid__item grid__item--c2">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/2.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">exothermic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
<a href="#" class="grid__item grid__item--c3">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/3.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">diatomic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
</div>
</section>
<section class="content">
<h2 class="content__title">_004</h2>
<div class="grid grid--effect-polaris">
<a href="#" class="grid__item grid__item--c1">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/1.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">anaerobic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
<a href="#" class="grid__item grid__item--c2">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/2.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">exothermic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
<a href="#" class="grid__item grid__item--c3">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/3.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">diatomic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
</div>
</section>
<section class="content">
<h2 class="content__title">_005</h2>
<div class="grid grid--effect-alphard">
<a href="#" class="grid__item grid__item--c1">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/1.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">anaerobic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
<a href="#" class="grid__item grid__item--c2">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/2.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">exothermic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
<a href="#" class="grid__item grid__item--c3">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/3.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">diatomic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
</div>
</section>
<section class="content">
<h2 class="content__title">_006</h2>
<div class="grid grid--effect-altair">
<a href="#" class="grid__item grid__item--c1">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/1.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">anaerobic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
<a href="#" class="grid__item grid__item--c2">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/2.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">exothermic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
<a href="#" class="grid__item grid__item--c3">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/3.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">diatomic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
</div>
</section>
<section class="content">
<h2 class="content__title">_007</h2>
<div class="grid grid--effect-rigel">
<a href="#" class="grid__item grid__item--c1">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/1.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">anaerobic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
<a href="#" class="grid__item grid__item--c2">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/2.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">exothermic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
<a href="#" class="grid__item grid__item--c3">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/3.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">diatomic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
</div>
</section>
<section class="content">
<h2 class="content__title">_008</h2>
<div class="grid grid--effect-canopus">
<a href="#" class="grid__item grid__item--c1">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/1.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">anaerobic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
<a href="#" class="grid__item grid__item--c2">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/2.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">exothermic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
<a href="#" class="grid__item grid__item--c3">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/3.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">diatomic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
</div>
</section>
<section class="content">
<h2 class="content__title">_009</h2>
<div class="grid grid--effect-pollux">
<a href="#" class="grid__item grid__item--c1">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/1.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">anaerobic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
<a href="#" class="grid__item grid__item--c2">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/2.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">exothermic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
<a href="#" class="grid__item grid__item--c3">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/3.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">diatomic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
</div>
</section>
<section class="content content--padded">
<h2 class="content__title">_010</h2>
<div class="grid grid--effect-deneb">
<a href="#" class="grid__item grid__item--c1">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/1.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">anaerobic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
<a href="#" class="grid__item grid__item--c2">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/2.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">exothermic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
<a href="#" class="grid__item grid__item--c3">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/3.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">diatomic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
</div>
</section>
<!-- Related demos -->
<section class="content content--related">
<p>Images made with designs by <a href="http://www.freepik.com/free-vector/new-year-party-brochure-with-colorful-geometric-shapes_997206.htm">Freepik.com</a></p>
<p>If you enjoyed this demo you might also like:</p>
<a class="media-item" href="https://tympanus.net/Development/TiltHoverEffects/">
<img class="media-item__img" src="img/related/TiltHoverEffects.jpg">
<h3 class="media-item__title">Tilt Hover Effects</h3>
</a>
<a class="media-item" href="https://tympanus.net/Development/HoverEffectIdeas/">
<img class="media-item__img" src="img/related/HoverEffectIdeas.jpg">
<h3 class="media-item__title">Hover Effect Ideas</h3>
</a>
<a class="media-item" href="https://tympanus.net/Development/LineMenuStyles/">
<img class="media-item__img" src="img/related/LineMenuStyles.jpg">
<h3 class="media-item__title">Line Menu Styles</h3>
</a>
</section>
</main>
<script src="js/anime.min.js"></script>
<script src="js/main.js"></script>
<script>
(function() {
[].slice.call(document.querySelectorAll('.grid--effect-vega > .grid__item')).forEach(function(stackEl) {
new VegaFx(stackEl);
});
[].slice.call(document.querySelectorAll('.grid--effect-castor > .grid__item')).forEach(function(stackEl) {
new CastorFx(stackEl);
});
[].slice.call(document.querySelectorAll('.grid--effect-hamal > .grid__item')).forEach(function(stackEl) {
new HamalFx(stackEl);
});
[].slice.call(document.querySelectorAll('.grid--effect-polaris > .grid__item')).forEach(function(stackEl) {
new PolarisFx(stackEl);
});
[].slice.call(document.querySelectorAll('.grid--effect-alphard > .grid__item')).forEach(function(stackEl) {
new AlphardFx(stackEl);
});
[].slice.call(document.querySelectorAll('.grid--effect-altair > .grid__item')).forEach(function(stackEl) {
new AltairFx(stackEl);
});
[].slice.call(document.querySelectorAll('.grid--effect-rigel > .grid__item')).forEach(function(stackEl) {
new RigelFx(stackEl);
});
[].slice.call(document.querySelectorAll('.grid--effect-canopus > .grid__item')).forEach(function(stackEl) {
new CanopusFx(stackEl);
});
[].slice.call(document.querySelectorAll('.grid--effect-pollux > .grid__item')).forEach(function(stackEl) {
new PolluxFx(stackEl);
});
[].slice.call(document.querySelectorAll('.grid--effect-deneb > .grid__item')).forEach(function(stackEl) {
new DenebFx(stackEl);
});
})();
</script>
</body>
</html>
================================================
FILE: js/main.js
================================================
/**
* main.js
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2017, Codrops
* http://www.codrops.com
*/
;(function(window) {
'use strict';
/**
* StackFx: The parent class.
*/
function StackFx(el) {
this.DOM = {};
this.DOM.el = el;
this.DOM.stack = this.DOM.el.querySelector('.stack');
this.DOM.stackItems = [].slice.call(this.DOM.stack.children);
this.totalItems = this.DOM.stackItems.length;
this.DOM.img = this.DOM.stack.querySelector('.stack__figure > .stack__img');
this.DOM.caption = this.DOM.el.querySelector('.grid__item-caption');
this.DOM.title = this.DOM.caption.querySelector('.grid__item-title');
this.DOM.columns = {left: this.DOM.caption.querySelector('.column--left'), right: this.DOM.caption.querySelector('.column--right')};
}
StackFx.prototype._removeAnimeTargets = function() {
anime.remove(this.DOM.stackItems);
anime.remove(this.DOM.img);
anime.remove(this.DOM.title);
anime.remove(this.DOM.columns.left);
anime.remove(this.DOM.columns.right);
};
/************************************************************************
* VegaFx.
************************************************************************/
function VegaFx(el) {
StackFx.call(this, el);
this._initEvents();
}
VegaFx.prototype = Object.create(StackFx.prototype);
VegaFx.prototype.constructor = VegaFx;
VegaFx.prototype._initEvents = function() {
var self = this;
this._mouseenterFn = function() {
self._removeAnimeTargets();
self._in();
};
this._mouseleaveFn = function() {
self._removeAnimeTargets();
self._out();
};
this.DOM.stack.addEventListener('mouseenter', this._mouseenterFn);
this.DOM.stack.addEventListener('mouseleave', this._mouseleaveFn);
};
VegaFx.prototype._in = function() {
var self = this;
this.DOM.stackItems.map(function(e, i) {
e.style.opacity = i !== self.totalItems - 1 ? 0.2*i+0.2 : 1
});
anime({
targets: this.DOM.stackItems,
translateZ: [
{
value: function(target, index) {
return index*8 + 8;
},
duration: 200 ,
easing: [0.42,0,1,1]
},
{
value: function(target, index) {
return index*20 + 20;
},
duration: 700,
easing: [0.2,1,0.3,1]
}
],
rotateX: [
{
value: function(target, index) {
return -1 * (index*2 + 2);
},
duration: 200,
easing: [0.42,0,1,1]
},
{
value: 0,
duration: 700,
easing: [0.2,1,0.3,1]
}
]
});
anime({
targets: this.DOM.img,
duration: 900,
easing: [0.2,1,0.3,1],
scale: 0.7
});
anime({
targets: this.DOM.title,
translateY: {
value: [35,0],
duration: 500,
easing: [0.5,1,0.3,1]
},
opacity: {
value: [0,1],
duration: 400,
easing: 'linear'
}
});
anime({
targets: [this.DOM.columns.left, this.DOM.columns.right],
translateY: [
{
value: function(target, index) {
return index === 0 ? [40,0] : [60,0];
},
duration: 500,
easing: [0.5,1,0.3,1],
delay: 100
}
],
opacity: [
{value: [0,0], duration: 1, easing: 'linear'},
{value: 1, delay: 100, duration: 400, easing: 'linear'}
]
});
};
VegaFx.prototype._out = function() {
var self = this;
anime({
targets: this.DOM.stackItems,
translateZ: [
{
value: function(target, index) {
return index * 20 + 20 - 8;
},
duration: 200 ,
easing: [0.42,0,1,1]
},
{
value: 0,
duration: 900,
easing: [0.2,1,0.3,1]
}
],
rotateX: [
{
value: function(target, index) {
return index*2 + 2;
},
duration: 200,
easing: [0.42,0,1,1]
},
{
value: 0,
duration: 900,
easing: [0.2,1,0.3,1]
}
],
opacity: {
value: function(target, index, cnt) {
return index !== cnt - 1 ? 0 : 1
},
duration: 900,
delay: 200,
easing: [0.2,1,0.3,1]
}
});
anime({
targets: this.DOM.img,
duration: 900,
easing: [0.2,1,0.3,1],
scale: 1
});
anime({
targets: this.DOM.title,
duration: 750,
easing: [0.2,1,0.3,1],
translateY: 0,
opacity: 1
});
anime({
targets: [this.DOM.columns.left, this.DOM.columns.right],
duration: 750,
easing: [0.2,1,0.3,1],
translateY: 0,
opacity: 1
});
};
window.VegaFx = VegaFx;
/************************************************************************
* CastorFx.
************************************************************************/
function CastorFx(el) {
StackFx.call(this, el);
this._initEvents();
}
CastorFx.prototype = Object.create(StackFx.prototype);
CastorFx.prototype.constructor = CastorFx;
CastorFx.prototype._initEvents = function() {
var self = this;
this._mouseenterFn = function() {
self._removeAnimeTargets();
self._in();
};
this._mouseleaveFn = function() {
self._removeAnimeTargets();
self._out();
};
this.DOM.stack.addEventListener('mouseenter', this._mouseenterFn);
this.DOM.stack.addEventListener('mouseleave', this._mouseleaveFn);
};
CastorFx.prototype._in = function() {
var self = this;
anime({
targets: this.DOM.stackItems,
rotateX: {
value: function(target, index, cnt) {
return index === cnt - 1 ? 0 : [70, 0];
},
duration: 1000,
easing: 'easeOutExpo'
},
translateZ: {
value: function(target, index, cnt) {
return index === cnt - 1 ? index*20 : [-300, index*20];
},
duration: 1000,
easing: 'easeOutExpo'
},
opacity: {
value: function(target, index, cnt) {
return index === cnt - 1 ? 1 : [0,0.2*index+0.2];
},
duration: 1000,
easing: 'linear'
},
delay: function(target, index, cnt) {
return (cnt-index-1)*100
}
});
anime({
targets: this.DOM.img,
duration: 1000,
easing: 'easeOutExpo',
scale: 0.7
});
anime({
targets: this.DOM.title,
duration: 1000,
easing: 'easeOutExpo',
translateZ: 30
});
};
CastorFx.prototype._out = function() {
var self = this;
anime({
targets: this.DOM.stackItems,
duration: 1000,
easing: 'easeOutExpo',
translateZ: 0,
opacity: function(target, index, cnt) {
return index !== cnt - 1 ? 0 : 1
}
});
anime({
targets: this.DOM.img,
duration: 1000,
easing: 'easeOutExpo',
scale: 1
});
anime({
targets: this.DOM.title,
duration: 1000,
easing: 'easeOutExpo',
translateZ: 0
});
anime({
targets: [this.DOM.columns.left, this.DOM.columns.right],
duration: 500,
easing: 'easeOutExpo',
delay: function(target, index) {
return index === 0 ? 150 : 200;
},
translateX: 0,
translateY: 0
});
};
window.CastorFx = CastorFx;
/************************************************************************
* HamalFx.
************************************************************************/
function HamalFx(el) {
StackFx.call(this, el);
this._initEvents();
}
HamalFx.prototype = Object.create(StackFx.prototype);
HamalFx.prototype.constructor = HamalFx;
HamalFx.prototype._initEvents = function() {
var self = this;
this._mouseenterFn = function() {
self._removeAnimeTargets();
self._in();
};
this._mouseleaveFn = function() {
self._removeAnimeTargets();
self._out();
};
this.DOM.stack.addEventListener('mouseenter', this._mouseenterFn);
this.DOM.stack.addEventListener('mouseleave', this._mouseleaveFn);
};
HamalFx.prototype._in = function() {
var self = this;
this.DOM.stackItems.map(function(e, i) {
e.style.opacity = i !== self.totalItems - 1 ? 0.2*i+0.2 : 1
});
anime({
targets: this.DOM.stackItems,
duration: 1000,
easing: 'easeOutExpo',
translateY: function(target, index) {
return -1*index*5;
},
rotate: function(target, index, cnt) {
if( index === cnt - 1 ) {
return 0;
}
else {
return index%2 ? (cnt-index)*1 : -1*(cnt-index)*1;
}
},
scale: function(target, index, cnt) {
if( index === cnt - 1 ) {
return 1;
}
else {
return 1.05;
}
},
delay: function(target, index, cnt) {
return (cnt-index-1)*30
}
});
anime({
targets: this.DOM.img,
duration: 1000,
easing: 'easeOutExpo',
scale: 0.7
});
anime({
targets: [this.DOM.columns.left, this.DOM.columns.right],
duration: 1000,
easing: 'easeOutExpo',
translateX: function(target, index) {
return index === 0 ? -30 : 30;
}
});
};
HamalFx.prototype._out = function() {
var self = this;
anime({
targets: this.DOM.stackItems,
duration: 500,
easing: 'easeOutExpo',
translateY: 0,
rotate: 0,
scale: 1,
opacity: function(target, index, cnt) {
return index !== cnt - 1 ? 0 : 1
}
});
anime({
targets: this.DOM.img,
duration: 1000,
easing: 'easeOutElastic',
scale: 1
});
anime({
targets: [this.DOM.columns.left, this.DOM.columns.right],
duration: 500,
easing: 'easeOutExpo',
translateX: 0
});
};
window.HamalFx = HamalFx;
/************************************************************************
* PolarisFx.
************************************************************************/
function PolarisFx(el) {
StackFx.call(this, el);
this._initEvents();
}
PolarisFx.prototype = Object.create(StackFx.prototype);
PolarisFx.prototype.constructor = PolarisFx;
PolarisFx.prototype._initEvents = function() {
var self = this;
this._mouseenterFn = function() {
self._removeAnimeTargets();
self._in();
};
this._mouseleaveFn = function() {
self._removeAnimeTargets();
self._out();
};
this.DOM.stack.addEventListener('mouseenter', this._mouseenterFn);
this.DOM.stack.addEventListener('mouseleave', this._mouseleaveFn);
};
PolarisFx.prototype._in = function() {
var self = this;
this.DOM.stackItems.map(function(e, i) {
e.style.opacity = i !== self.totalItems - 1 ? 0.2*i+0.2 : 1
});
anime({
targets: this.DOM.stackItems,
duration: 1000,
easing: 'easeOutElastic',
translateZ: function(target, index) {
return index*10;
},
delay: function(target, index, cnt) {
return (cnt-index-1)*20
}
});
anime({
targets: this.DOM.img,
duration: 500,
easing: 'easeOutExpo',
scale: 0.7
});
anime({
targets: this.DOM.title,
duration: 1000,
easing: 'easeOutElastic',
translateZ: 30
});
anime({
targets: [this.DOM.columns.left, this.DOM.columns.right],
duration: 1000,
easing: 'easeOutElastic',
translateX: function(target, index) {
return index === 0 ? -30 : 30;
},
translateY: 30
});
};
PolarisFx.prototype._out = function() {
var self = this;
anime({
targets: this.DOM.stackItems,
duration: 1000,
easing: 'easeOutExpo',
translateZ: 0,
opacity: function(target, index, cnt) {
return index !== cnt - 1 ? 0 : 1
}
});
anime({
targets: this.DOM.img,
duration: 1000,
easing: 'easeOutExpo',
scale: 1
});
anime({
targets: this.DOM.title,
duration: 500,
delay: 100,
easing: 'easeOutExpo',
translateZ: 0
});
anime({
targets: [this.DOM.columns.left, this.DOM.columns.right],
duration: 500,
easing: 'easeOutExpo',
delay: function(target, index) {
return index === 0 ? 150 : 200;
},
translateX: 0,
translateY: 0
});
};
window.PolarisFx = PolarisFx;
/************************************************************************
* AlphardFx.
************************************************************************/
function AlphardFx(el) {
StackFx.call(this, el);
this._initEvents();
}
AlphardFx.prototype = Object.create(StackFx.prototype);
AlphardFx.prototype.constructor = AlphardFx;
AlphardFx.prototype._initEvents = function() {
var self = this;
this._mouseenterFn = function() {
self._removeAnimeTargets();
self._in();
};
this._mouseleaveFn = function() {
self._removeAnimeTargets();
self._out();
};
this.DOM.stack.addEventListener('mouseenter', this._mouseenterFn);
this.DOM.stack.addEventListener('mouseleave', this._mouseleaveFn);
};
AlphardFx.prototype._in = function() {
var self = this;
this.DOM.stackItems.map(function(e, i) {
e.style.opacity = i !== self.totalItems - 1 ? 0.2*i+0.2 : 1
});
anime({
targets: this.DOM.stackItems,
opacity: {
value: function(target, index, cnt) {
return index !== cnt - 1 ? [0,0.2*index+0.2] : 1
},
duration: 1,
easing: 'linear',
delay: function(target, index, cnt) {
return (cnt-index-1)*30 + 250
}
},
rotate: [
{
value: 12,
duration: 250,
easing: 'easeOutQuad'
},
{
value: function(target, index) {
return -1*index*3 - 3;
},
duration: 1000,
easing: 'easeOutExpo'
}
],
delay: function(target, index, cnt) {
return (cnt-index-1)*30
}
});
anime({
targets: this.DOM.img,
rotate: [
{
value: [0,12],
duration: 250,
easing: 'easeOutQuad',
},
{
value: [12,0],
duration: 1200,
delay: 50,
easing: 'easeOutExpo',
}
]
});
anime({
targets: [this.DOM.columns.left, this.DOM.columns.right],
duration: 500,
easing: 'easeOutExpo',
translateY: function(target, index) {
return index === 0 ? -5 : 5;
}
});
};
AlphardFx.prototype._out = function() {
var self = this;
anime({
targets: this.DOM.stackItems,
duration: 500,
easing: 'easeOutExpo',
rotate: 0,
opacity: function(target, index, cnt) {
return index !== cnt - 1 ? 0 : 1
}
});
anime({
targets: this.DOM.img,
duration: 1000,
easing: 'easeOutExpo',
rotate: 1
});
anime({
targets: [this.DOM.columns.left, this.DOM.columns.right],
duration: 500,
easing: 'easeOutExpo',
translateY: 0
});
};
window.AlphardFx = AlphardFx;
/************************************************************************
* AltairFx.
************************************************************************/
function AltairFx(el) {
StackFx.call(this, el);
this._initEvents();
}
AltairFx.prototype = Object.create(StackFx.prototype);
AltairFx.prototype.constructor = AltairFx;
AltairFx.prototype._initEvents = function() {
var self = this;
this._mouseenterFn = function() {
self._removeAnimeTargets();
self._in();
};
this._mouseleaveFn = function() {
self._removeAnimeTargets();
self._out();
};
this.DOM.stack.addEventListener('mouseenter', this._mouseenterFn);
this.DOM.stack.addEventListener('mouseleave', this._mouseleaveFn);
};
AltairFx.prototype._in = function() {
var self = this;
this.DOM.stackItems.map(function(e, i) {
e.style.opacity = i !== self.totalItems - 1 ? 0.2*i+0.2 : 1
});
anime({
targets: this.DOM.stackItems,
duration: 1000,
easing: 'easeOutElastic',
translateZ: function(target, index, cnt) {
return index*3;
},
rotateX: function(target, index, cnt) {
return -1*index*4;
},
delay: function(target, index, cnt) {
return (cnt-index-1)*30
}
});
anime({
targets: this.DOM.img,
duration: 500,
easing: 'easeOutExpo',
scale: 0.7
});
anime({
targets: this.DOM.title,
duration: 1000,
easing: 'easeOutElastic',
translateY: 20
});
anime({
targets: [this.DOM.columns.left, this.DOM.columns.right],
duration: 1000,
easing: 'easeOutElastic',
translateY: function(target, index) {
return index === 0 ? 30 : 20;
}
});
};
AltairFx.prototype._out = function() {
var self = this;
anime({
targets: this.DOM.stackItems,
duration: 500,
easing: 'easeOutExpo',
opacity: function(target, index, cnt) {
return index !== cnt - 1 ? 0 : 1
},
translateZ: 0,
rotateX: 0
});
anime({
targets: this.DOM.img,
duration: 500,
easing: 'easeOutExpo',
scale: 1
});
anime({
targets: [this.DOM.columns.left, this.DOM.columns.right, this.DOM.title],
duration: 500,
easing: 'easeOutExpo',
translateY: 0
});
};
window.AltairFx = AltairFx;
/************************************************************************
* RigelFx.
************************************************************************/
function RigelFx(el) {
StackFx.call(this, el);
this._initEvents();
}
RigelFx.prototype = Object.create(StackFx.prototype);
RigelFx.prototype.constructor = RigelFx;
RigelFx.prototype._initEvents = function() {
var self = this;
this._mouseenterFn = function() {
self._removeAnimeTargets();
self._in();
};
this._mouseleaveFn = function() {
self._removeAnimeTargets();
self._out();
};
this.DOM.stack.addEventListener('mouseenter', this._mouseenterFn);
this.DOM.stack.addEventListener('mouseleave', this._mouseleaveFn);
};
RigelFx.prototype._in = function() {
var self = this;
anime({
targets: this.DOM.stackItems,
translateZ: {
value: function(target, index) {
return index*10;
},
duration: 800,
easing: 'easeOutExpo',
delay: 200
},
opacity: {
value: function(target, index, cnt) {
return index !== cnt - 1 ? [0,0.1*index+0.1] : 1
},
duration: 1,
easing: 'linear',
delay: 200
},
translateY: [
{
value: function(target, index) {
return -1*index*10;
},
duration: 800,
delay: 200,
elasticity: 300
},
],
scaleY: [
{
value: 0.8,
duration: 200,
easing: 'easeOutExpo'
},
{
value: 1,
duration: 800,
elasticity: 300
}
],
scaleX: [
{
value: 1.1,
duration: 200,
easing: 'easeOutExpo'
},
{
value: 1,
duration: 800,
elasticity: 300
}
]
});
anime({
targets: this.DOM.img,
duration: 900,
easing: 'easeOutExpo',
delay: 200,
scale: 0.7
});
anime({
targets: this.DOM.title,
translateY: {
value: [200,0],
duration: 800,
easing: 'easeOutExpo',
},
opacity: {
value: [0,1],
duration: 400,
delay: 200,
easing: 'linear'
}
});
anime({
targets: [this.DOM.columns.left, this.DOM.columns.right],
translateY: [
{
value: [60,0],
duration: 800,
easing: 'easeOutExpo',
delay: 200
}
],
opacity: [
{value: [0,0], duration: 1, easing: 'linear'},
{value: 1, delay: 300, duration: 400, easing: 'linear'}
]
});
};
RigelFx.prototype._out = function() {
var self = this;
anime({
targets: this.DOM.stackItems,
duration: 800,
easing: 'easeOutElastic',
translateZ: 0,
opacity: function(target, index, cnt) {
return index !== cnt - 1 ? 0 : 1
},
translateY: 0
});
anime({
targets: this.DOM.img,
duration: 800,
easing: 'easeOutElastic',
scale: 1
});
anime({
targets: this.DOM.title,
duration: 800,
easing: 'easeOutExpo',
translateY: 0,
opacity: 1
});
anime({
targets: [this.DOM.columns.left, this.DOM.columns.right],
duration: 800,
easing: 'easeOutExpo',
translateY: 0,
opacity: 1
});
};
window.RigelFx = RigelFx;
/************************************************************************
* CanopusFx.
************************************************************************/
function CanopusFx(el) {
StackFx.call(this, el);
this._initEvents();
}
CanopusFx.prototype = Object.create(StackFx.prototype);
CanopusFx.prototype.constructor = CanopusFx;
CanopusFx.prototype._initEvents = function() {
var self = this;
this._mouseenterFn = function() {
self._removeAnimeTargets();
self._in();
};
this._mouseleaveFn = function() {
self._removeAnimeTargets();
self._out();
};
this.DOM.stack.addEventListener('mouseenter', this._mouseenterFn);
this.DOM.stack.addEventListener('mouseleave', this._mouseleaveFn);
};
CanopusFx.prototype._in = function() {
var self = this;
this.DOM.stackItems.map(function(e, i) {
e.style.opacity = i !== self.totalItems - 1 ? 0 : 1
});
var self = this;
anime({
targets: this.DOM.stackItems,
translateZ: {
value: function(target, index, cnt) {
return -1*(cnt-index-1)*20;
},
duration: 800,
easing: 'easeOutExpo',
delay: function(target, index, cnt) {
return (cnt-index-1)*70 + 200;
}
},
translateY: [
{
value: function(target, index) {
return -1*index*20 - 30;
},
duration: 800,
delay: function(target, index, cnt) {
return (cnt-index-1)*70 + 200;
},
elasticity: 500
},
],
scaleY: [
{
value: function(target, index, cnt) {
return index === cnt-1 ? 0.6 : 1;
},
duration: 200,
easing: 'easeOutExpo'
},
{
value: 0.8,
duration: 800,
elasticity: 450
}
],
scaleX: [
{
value: function(target, index, cnt) {
return index === cnt-1 ? 1.1 : 1;
},
duration: 200,
easing: 'easeOutExpo'
},
{
value: 0.8,
duration: 800,
elasticity: 300
}
],
opacity: {
value: function(target, index, cnt) {
return index === cnt-1 ? 1 : [0,0.2*index+0.2];
},
duration: 200,
easing: 'linear',
delay: function(target, index, cnt) {
return (cnt-index-1)*70 + 200;
}
}
});
anime({
targets: this.DOM.img,
scale: [
{
value: 1.8,
duration: 200,
easing: 'easeOutExpo'
},
{
value: 0.7,
duration: 1100,
easing: 'easeOutExpo'
}
]
});
anime({
targets: [this.DOM.title, this.DOM.columns.left, this.DOM.columns.right],
duration: 1000,
easing: 'easeOutElastic',
translateY: -30,
delay: 200
});
};
CanopusFx.prototype._out = function() {
var self = this;
anime({
targets: this.DOM.stackItems,
duration: 500,
easing: 'easeOutExpo',
translateZ: 0,
translateY: 0,
scaleY: 1,
scaleX: 1,
opacity: function(target, index, cnt) {
return index !== cnt - 1 ? 0 : 1
}
});
anime({
targets: this.DOM.img,
duration: 500,
easing: 'easeOutExpo',
scale: 1
});
anime({
targets: [this.DOM.title, this.DOM.columns.left, this.DOM.columns.right],
duration: 500,
easing: 'easeOutExpo',
translateY: 0
});
};
window.CanopusFx = CanopusFx;
/************************************************************************
* PolluxFx.
************************************************************************/
function PolluxFx(el) {
StackFx.call(this, el);
this._initEvents();
}
PolluxFx.prototype = Object.create(StackFx.prototype);
PolluxFx.prototype.constructor = PolluxFx;
PolluxFx.prototype._initEvents = function() {
var self = this;
this._mouseenterFn = function() {
self._removeAnimeTargets();
self._in();
};
this._mouseleaveFn = function() {
self._removeAnimeTargets();
self._out();
};
this.DOM.stack.addEventListener('mouseenter', this._mouseenterFn);
this.DOM.stack.addEventListener('mouseleave', this._mouseleaveFn);
};
PolluxFx.prototype._in = function() {
var self = this;
anime({
targets: this.DOM.stackItems,
duration: 1000,
opacity: {
value: function(target, index, cnt) {
return index !== cnt - 1 ? [0,0.1*index+0.1] : 1
},
easing: 'linear',
delay: function(target, index, cnt) {
return (cnt-index-1)*60;
}
},
translateY: {
value: function(target, index) {
return -1*index*10;
},
easing: 'easeInOutCubic'
},
rotateX: {
value: 80,
easing: 'easeInOutCubic'
},
rotateZ: {
value: 360,
easing: 'easeInOutCubic',
delay: function(target, index, cnt) {
return (cnt-index-1)*60;
}
}
});
anime({
targets: this.DOM.img,
duration: 1000,
easing: 'easeInOutCubic',
scale: 0.7
});
anime({
targets: this.DOM.title,
rotate: [
{
value: [0,10],
duration: 300,
delay: 300,
easing: 'easeOutCubic',
},
{
value: [-20,0],
duration: 300,
easing: 'easeOutCubic',
}
],
opacity: [
{
value: [1,0],
duration: 100,
delay: 300,
easing: 'easeOutCubic'
},
{
value: [0,1],
duration: 100,
delay: 300,
easing: 'easeOutCubic'
}
]
});
};
PolluxFx.prototype._out = function() {
var self = this;
anime({
targets: this.DOM.stackItems,
duration: 1000,
opacity: {
value: function(target, index, cnt) {
return index !== cnt - 1 ? 0 : 1
},
easing: 'linear',
delay: function(target, index) {
return index*60;
},
},
translateY: {
value: 0,
easing: 'easeInOutCubic'
},
rotateX: {
value: 0,
easing: 'easeInOutCubic'
},
rotateZ: {
value: 0,
easing: 'easeInOutCubic',
delay: function(target, index, cnt) {
return (cnt-index-1)*60;
}
}
});
anime({
targets: this.DOM.img,
duration: 1000,
easing: 'easeInOutCubic',
scale: 1
});
anime({
targets: this.DOM.title,
duration: 1000,
easing: 'easeInOutCubic',
rotate: 0,
opacity: 1
});
};
window.PolluxFx = PolluxFx;
/************************************************************************
* DenebFx.
************************************************************************/
function DenebFx(el) {
StackFx.call(this, el);
this._initEvents();
}
DenebFx.prototype = Object.create(StackFx.prototype);
DenebFx.prototype.constructor = DenebFx;
DenebFx.prototype._initEvents = function() {
var self = this;
this._mouseenterFn = function() {
self._removeAnimeTargets();
self._in();
};
this._mouseleaveFn = function() {
self._removeAnimeTargets();
self._out();
};
this.DOM.stack.addEventListener('mouseenter', this._mouseenterFn);
this.DOM.stack.addEventListener('mouseleave', this._mouseleaveFn);
};
DenebFx.prototype._in = function() {
var self = this;
anime({
targets: this.DOM.stackItems,
duration: 1000,
easing: [0.2,1,0.3,1],
rotate: 360,
opacity: function(target, index, cnt) {
return index !== cnt - 1 ? [0,0.1*index+0.1] : 1
},
delay: function(target, index, cnt) {
return (cnt-index-1)*30;
}
});
anime({
targets: this.DOM.img,
duration: 1100,
delay: 20,
easing: [0.2,1,0.3,1],
scale: 0.7,
rotate: 360
});
anime({
targets: [this.DOM.columns.left, this.DOM.columns.right],
duration: 650,
delay: 400,
easing: [0.2,1,0.3,1],
rotate: [-20,0],
opacity: 1
});
};
DenebFx.prototype._out = function() {
var self = this;
anime({
targets: this.DOM.stackItems,
duration: 1000,
easing: [0.2,1,0.3,1],
rotate: 0,
opacity: function(target, index, cnt) {
return index !== cnt - 1 ? [0,0.1*index+0.1] : 1
},
delay: function(target, index, cnt) {
return (cnt-index-1)*30;
}
});
anime({
targets: this.DOM.img,
duration: 1750,
easing: [0.2,1,0.3,1],
scale: 1,
rotate: 0
});
anime({
targets: [this.DOM.columns.left, this.DOM.columns.right],
duration: 400,
easing: 'easeInCubic',
rotate: [0,-10],
opacity: 0
});
};
window.DenebFx = DenebFx;
})(window);
gitextract_rdoa6q44/
├── .gitignore
├── README.md
├── css/
│ ├── demo.css
│ └── normalize.css
├── index.html
└── js/
└── main.js
SYMBOL INDEX (11 symbols across 1 files)
FILE: js/main.js
function StackFx (line 18) | function StackFx(el) {
function VegaFx (line 41) | function VegaFx(el) {
function CastorFx (line 216) | function CastorFx(el) {
function HamalFx (line 328) | function HamalFx(el) {
function PolarisFx (line 438) | function PolarisFx(el) {
function AlphardFx (line 549) | function AlphardFx(el) {
function AltairFx (line 669) | function AltairFx(el) {
function RigelFx (line 771) | function RigelFx(el) {
function CanopusFx (line 933) | function CanopusFx(el) {
function PolluxFx (line 1088) | function PolluxFx(el) {
function DenebFx (line 1236) | function DenebFx(el) {
Condensed preview — 6 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (85K chars).
[
{
"path": ".gitignore",
"chars": 11,
"preview": "*.DS_Store\n"
},
{
"path": "README.md",
"chars": 1574,
"preview": "# Stack Motion Hover Effect\n\nExperimental hover effects that reveal a stack of multiple colored cards behind the hovered"
},
{
"path": "css/demo.css",
"chars": 7268,
"preview": "*,\r\n*::after,\r\n*::before {\r\n\t-webkit-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n}\r\n\r\nbody {\r\n\tfont-family: 'Over"
},
{
"path": "css/normalize.css",
"chars": 1825,
"preview": "article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{"
},
{
"path": "index.html",
"chars": 32803,
"preview": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n\t<head>\n\t\t<meta charset=\"UTF-8\" />\n\t\t<meta name=\"viewport\" content=\"width"
},
{
"path": "js/main.js",
"chars": 27207,
"preview": "/**\n * main.js\n * http://www.codrops.com\n *\n * Licensed under the MIT license.\n * http://www.opensource.org/licenses/mit"
}
]
About this extraction
This page contains the full source code of the codrops/StackMotionHoverEffects GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 6 files (69.0 KB), approximately 21.8k tokens, and a symbol index with 11 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.