')
.addClass('effeckt-positional-modal-wrap ' + style)
.attr('data-effeckt-position', position);
modalWrap.html(content);
return modalWrap;
},
getSenderButton: function(modal) {
var i;
for (var i = 0, len = this.modalsList.length; i < len; i++) {
if ( this.modalsList[i].modal.get(0) == modal.get(0) ) {
return this.modalsList[i].element;
}
}
return false;
},
add: function($el, modal) {
// add element to dom
// on the active page wrap
$('.effeckt-page-active').append(modal);
// add element to modal list
this.modalsList.push({
element: $el,
'modal': modal
});
},
remove: function(modal){
var i;
for (var i = 0, len = this.modalsList.length; i < len; i++) {
if ( this.modalsList[i].modal.get(0) == modal.get(0) ) {
this.modalsList.splice( i, 1 );
return true;
}
}
},
// check if already has modal open
contains: function($el) {
var i;
for (var i = 0, len = this.modalsList.length; i < len; i++) {
if ( this.modalsList[i].element.get(0) == $el.get(0) ) {
return true;
}
}
return false;
}
};
EffecktPositionalModals.init();
================================================
FILE: js/modules/tabs.js
================================================
/*!
* strength.js
* Original author: @aaronlumsden
* Further changes, comments: @aaronlumsden
*
* Rewritten for effeckts project
*
* Licensed under the MIT license
*/
var Tabs = {
tabsWrapClass: '.effeckt-tabs-wrap',
tabsClass: '.effeckt-tabs a.effeckt-tab',
tabContentClass:'.effeckt-tab-content',
init: function() {
this.initComponent();
this.bindUIActions();
},
initComponent: function() {
//keep a reference to this (Tabs) object.
var self = this;
$(this.tabsWrapClass).each(function(){
var $el = $(this);
var effect = $el.data('effeckt-type');
var tabContents = $el.find(self.tabContentClass);
var firstTabContent = tabContents.first();
var tabs = $el.find(self.tabsClass);
tabs.removeClass('active').first().addClass('active');
tabContents.not(':eq(0)').addClass('effeckt-hide');
firstTabContent.addClass('effeckt-show');
tabContents.parent().height(firstTabContent.height());
});
},
bindUIActions: function() {
//keep a reference to this (Tabs) object.
var self = this;
$(this.tabsClass).on( Effeckt.buttonPressedEvent, function(e) {
e.preventDefault();
self.showTab(this);
});
},
showTab: function(el) {
var tab = $(el);
var tabsWrap = tab.parents(this.tabsWrapClass);
var tabs = tabsWrap.find(this.tabsClass);
var tabContents = tabsWrap.find(this.tabContentClass);
var effect = tabsWrap.data('effeckt-type');
//set active to this current clicked tab
tabs.removeClass('active');
tab.addClass('active');
var tabID = tab.attr('href');
var tabContent = tabContents.filter(tabID);
tabContents.removeClass('effeckt-show').addClass('effeckt-hide');
tabContent.addClass('effeckt-show');
//add parent height, just because of position: absolute;
tabContents.parent().height(tabContent.height());
}
};
Tabs.init();
================================================
FILE: package.json
================================================
{
"name": "Effeckt",
"version": "0.5.0",
"devDependencies": {
"assemble": "^0.4.42",
"autoprefixer": "^3.1.0",
"grunt": "^0.4.5",
"grunt-autoprefixer": "^1.0.1",
"grunt-contrib-concat": "^0.5.0",
"grunt-contrib-connect": "^0.8.0",
"grunt-contrib-copy": "^0.6.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-dev-update": "^0.9.0",
"grunt-gh-pages": "^0.9.1",
"grunt-sass": "^0.14.2",
"jit-grunt": "^0.8.0"
},
"engines": {
"node": ">=0.10"
}
}
================================================
FILE: readme.md
================================================
# This repo is archived
Effeckt.css
===========
**A Performant Transitions and Animations Library** : [http://h5bp.github.io/Effeckt.css](http://h5bp.github.io/Effeckt.css)
Ever notice how small flourishes and subtle transitions dramatically increases the value of the experience you enjoy with an app or site?
Designing and developing UIs for the mobile web is tricky, but it's extremely difficult to do that while delivering something that performs at 60fps. The best opportunities to getting jank-free transitions on phones/tablets are CSS transition and keyframe animation based, especially tapping into hardware-accelerated transforms and opacity changes.
@daneden did really nice work with [Animate.css](http://daneden.me/animate/) but I think the web would benefit if we could take that work to the next level. There's already been fantastic experiments and demos exploring CSS-based transitions, but it's distributed all over.
Originally started at [h5bp/lazyweb-requests#122](https://github.com/h5bp/lazyweb-requests/issues/122)
#### Effeckt Trailer
## Examples To Add
* [tympanus.net/Development/ModalWindowEffects/](http://tympanus.net/Development/ModalWindowEffects/)
* [tympanus.net/Development/PageTransitions/](http://tympanus.net/Development/PageTransitions/)
* [tympanus.net/Development/PFold/index2.html](http://tympanus.net/Development/PFold/index2.html)
* [leaverou.github.io/animatable/](http://leaverou.github.io/animatable/)
* [lab.hakim.se/ladda/](http://lab.hakim.se/ladda/)
* [lab.hakim.se/kontext/](http://lab.hakim.se/kontext/)
* [lab.hakim.se/avgrund/](http://lab.hakim.se/avgrund/)
* [lab.hakim.se/meny/](http://lab.hakim.se/meny/)
Because there are so many, I expect we could **group things by role**:
* button/touch effects
* state transition
* modal/notification transition
* attention attractors
## Goals
1. Provide a minimal UI. Only use style hooks for transitions and animations.
1. Designer-curated set of classy and reasonable effects. (no [`easeInBounce`](http://easings.net/#easeInBounce))
1. Establish browser support guidelines (e.g. Android 2.3 would gracefully degrade)
1. CSS performance regression testing (a la [bench.topcoat.io](http://bench.topcoat.io))
1. Deliver jank-free *60fps* performance on target browsers/devices
1. If a particular effect cannot deliver target performance (hey `blur()` css filter), it cannot be included.
1. Guidelines on what to avoid when styling these affected elements (avoid expensive CSS)
1. Deliver a builder so users can pull only the CSS they need.
1. There is no hover on the mobile web, so any hover-based effects would be excluded or have a tap-based equivalent.
## Action
* If you know other transition/animation based demos/experiments that make sense to include here, file a ticket.
* If you're interested in helping to define the API, let's hear it! File a ticket.
* A web-based builder is a must. A command-line builder isn't important for this.
## Getting Started
- [https://github.com/h5bp/Effeckt.css/wiki/Getting-Started](https://github.com/h5bp/Effeckt.css/wiki/Getting-Started)
## Code Style Guide
- [https://github.com/h5bp/Effeckt.css/wiki/Code-Style-Guide](https://github.com/h5bp/Effeckt.css/wiki/Code-Style-Guide)
## General Inquiries & Support
- Effeckt.css Mailing List [https://groups.google.com/d/forum/effeckt](https://groups.google.com/d/forum/effeckt)
## Bug Reports & Feature Requests
- [http://github.com/h5bp/Effeckt.css/issues](https://github.com/h5bp/Effeckt.css/issues)
================================================
FILE: scss/_global.scss
================================================
.effeckt-perspective {
perspective: $effeckt-perspective;
}
.effeckt-show {
visibility: visible;
}
================================================
FILE: scss/_variables.scss
================================================
// Overall
$effeckt-transition-duration: 500ms !default;
$effeckt-perspective: 600px !default;
// Modals
$effeckt-modal-transition-duration: 500ms !default;
$effeckt-modal-animation-duration: $effeckt-modal-transition-duration*2 !default;
// Forcing size so we can center w/o translate()
$effeckt-modal-min-width: 320px !default;
$effeckt-modal-max-width: 320px !default;
$effeckt-modal-z-index: 2000 !default;
// Buttons
$effeckt-buttons-transition-duration: $effeckt-transition-duration !default;
$effeckt-buttons-spinner-size: 32px !default;
$effeckt-button-icon: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPCEtLSBHZW5lcmF0b3I6IEljb01vb24uaW8gLS0+IDwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+IDxzdmcgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIGZpbGw9IiNmZmZmZmYiPjxnPjxwYXRoIGQ9Ik0gMTYsMyBDIDEyLjUyOCwzIDkuMjYzLDQuMzUyIDYuODA4LDYuODA4IEMgNC4zNTIsOS4yNjMgMywxMi41MjggMywxNiBDIDMsMTkuNDcyIDQuMzUyLDIyLjczNyA2LjgwOCwyNS4xOTIgQyA5LjI2MywyNy42NDggMTIuNTI4LDI5IDE2LDI5IEMgMTkuNDcyLDI5IDIyLjczNywyNy42NDggMjUuMTkyLDI1LjE5MiBDIDI3LjY0OCwyMi43MzcgMjksMTkuNDcyIDI5LDE2IEMgMjksMTIuNTI4IDI3LjY0OCw5LjI2MyAyNS4xOTIsNi44MDggQyAyMi43MzcsNC4zNTIgMTkuNDcyLDMgMTYsMyBaIE0gMTYsMCBMIDE2LDAgQyAyNC44MzcsMCAzMiw3LjE2MyAzMiwxNiBDIDMyLDI0LjgzNyAyNC44MzcsMzIgMTYsMzIgQyA3LjE2MywzMiAwLDI0LjgzNyAwLDE2IEMgMCw3LjE2MyA3LjE2MywwIDE2LDAgWk0gMTQsMjJMIDE4LDIyTCAxOCwyNkwgMTQsMjZ6TSAxNCw2TCAxOCw2TCAxOCwxOEwgMTQsMTh6Ij48L3BhdGg+PC9nPjwvc3ZnPg==";
$effeckt-button-spinner: "data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf///6+vr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs/Ly8vz8/AAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ/V/nmOM82XiHRLYKhKP1oZmADdEAAAh+QQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY/CZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB+A4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6+Ho7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq+B6QDtuetcaBPnW6+O7wDHpIiK9SaVK5GgV543tzjgGcghAgAh+QQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK++G+w48edZPK+M6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE+G+cD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm+FNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk+aV+oJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0/VNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc+XiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30/iI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE/jiuL04RGEBgwWhShRgQExHBAAh+QQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR+ipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY+Yip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd+MFCN6HAAIKgNggY0KtEBAAh+QQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1+vsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d+jYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg+ygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0+bm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h+Kr0SJ8MFihpNbx+4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX+BP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA==";
// Page Transitions
$effeckt-page-transition-duration: $effeckt-transition-duration * 2 !default;
// Off Screen Nav
$effeckt-off-screen-navigation-transition-duration: $effeckt-transition-duration !default;
$effeckt-off-screen-navigation-list-item-amount: 15;
// List Items
$effeckt-list-item-transition-duration: $effeckt-transition-duration !default;
$effeckt-list-scroll-transition-duration: $effeckt-transition-duration !default;
// Form Elements
// Radio and Checkboxes
$effeckt-form-element-ckradio-ios7bg-off: #FFF !default;
$effeckt-form-element-ckradio-ios7bg-on: #666 !default;
$effeckt-form-element-ckradio-ios7border-radius: 15px !default;
$effeckt-form-element-ckradio-ios7transition: all .3s ease-out !default;
$effeckt-form-element-ckradio-ios7transition-after: all 0.1s ease-in .1s !default;
// Tabs
$effeckt-tabs-transition-duration: $effeckt-transition-duration !default;
// Tooltips
$effeckt-tooltip-transition-delay: .2s !default;
$effeckt-tooltip-transition-duration: .3s !default;
$effeckt-tooltip-background: black !default;
$effeckt-tooltip-forground: white !default;
$effeckt-tooltip-arrow-size: 5px !default;
// Lazy loading
$effeckt-lazy-loading-transition-duration: 0.5s;
================================================
FILE: scss/demo/demo.scss
================================================
// This version of Sass doesn't like using string MQ's apparently.
// $mini: "(max-width: 500px)";
// Reset
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.warning {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0.5rem;
background: linear-gradient(#fff94d, #ddd610);
opacity: 0.95;
text-align: center;
z-index: 1000;
}
// to avoid extranaous animations while page settles
.no-transitions,
.no-transitions * {
transition: none !important;
}
// clearfix
.group:after {
content: "";
display: block;
clear: both;
}
:root { // rem
font-size: large;
line-height: 1.4;
@media (max-width: 500px) {
font-size: small;
}
}
// is needed for overlay
html, body {
height: 100%;
// testing
overflow: hidden;
}
body {
background: #eee;
font-family: Sans-serif;
overflow: hidden; // for logo effect
// This is kinda good for performance overall
// But... you can't fixed position inside it then
// transform: translateZ(0);
@media (max-width: 500px) {
}
}
// Layout
.page-wrap {
// Required for non-janky off-screen squishing
float: right;
width: 100%;
}
.effeckt {
padding: 2rem;
background: white;
margin: 0 0 1rem 0;
@media (max-width: 500px) {
padding: 1.5rem;
}
header {
margin: 0 0 1rem 0;
border-bottom: 2px solid #eee;
position: relative;
.source {
position: absolute;
right: 0;
bottom: 2px;
@media (max-width: 500px) {
position: relative;
display: block;
margin: 0.2rem 0;
}
}
&:nth-of-type(n+2) { // all but first
margin-top: 2rem;
}
}
}
.button-group {
line-height: 2;
}
// Typography
a {
text-decoration: none;
color: #ccc;
}
a:hover, a:active {
color: black;
}
subhead {
display: block;
font-size: 1.4rem;
margin: 0 0 2rem 0;
}
.mobile-break {
display: none;
@media (max-width: 500px) {
display: block;
}
}
h1 {
margin: 0 0 1rem 0;
@media (max-width: 500px) {
line-height: 0.8;
}
}
h1 span {
font-size: 1.5rem;
position: relative;
display: inline-block;
opacity: 0;
width: 50px;
height: 50px;
line-height: 50px;
background: #ccc;
color: white;
text-align: center;
text-transform: uppercase;
@media (max-width: 500px) {
font-size: 0.8rem;
width: 28px;
height: 28px;
line-height: 28px;
}
}
h2 {
margin: 0;
}
h3 {
margin: 0;
}
h4 {
margin: 0 0 0.5rem 0;
}
p, ul, ol, blockquote, pre {
margin: 0 0 1rem 0;
}
button {
padding: 0.25rem;
}
hr {
height: 0;
border: 0;
border-top: 1px solid #ccc;
}
h1 span:nth-of-type(1) {
animation: logo-from-horz 0.5s ease forwards;
transform: translateX(-50px);
background: #666;
}
h1 span:nth-of-type(2) {
animation: logo-from-vert 0.5s 0.1s ease forwards;
transform: translateY(-50px);
background: #444;
}
h1 span:nth-of-type(3) {
animation: logo-from-vert 0.5s 0.2s ease forwards;
transform: translateX(50px);
background: #666;
}
h1 span:nth-of-type(4) {
animation: logo-from-horz 0.3s 0.3s ease forwards;
transform: translateX(50px);
background: #444;
}
h1 span:nth-of-type(5) {
animation: logo-from-horz 0.3s 0.4s ease forwards;
transform: translateX(-50px);
background: #666;
}
h1 span:nth-of-type(6) {
animation: logo-from-horz 0.3s 0.5s ease forwards;
transform: translateX(50px);
background: #444;
}
h1 span:nth-of-type(7) {
animation: logo-from-vert 0.3s 0.6s ease forwards;
transform: translateY(-50px);
background: #666;
}
h1 span:nth-of-type(8) {
animation: logo-from-horz 0.2s 1.1s ease forwards;
transform: translateX(1000px);
background: none;
color: black;
}
h1 span:nth-of-type(9) {
animation: logo-from-horz 0.2s 1.1s ease forwards;
transform: translateX(1000px);
}
h1 span:nth-of-type(10) {
animation: logo-from-horz 0.2s 1.1s ease forwards;
transform: translateX(1000px);
}
h1 span:nth-of-type(11) {
animation: logo-from-horz 0.2s 1.1s ease forwards;
transform: translateX(1000px);
}
@keyframes logo-from-horz {
100% { transform: translateX(0); opacity: 1; }
}
@keyframes logo-from-vert {
100% { transform: translateY(0); opacity: 1;}
}
// Contributors
.contributors {
background: #222;
color: #eee;
header {
border-bottom-color: #666;
}
ol { margin-left: 35px; }
hr { margin: 15px 0; }
}
.fluid-video {
height: 0;
padding-top: 62.5%;
position: relative;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
// Individual demos, not specific to style
.button-demo-wrap {
width: 35%;
float: left;
&:nth-child(2n) {
clear: both;
}
@media (max-width: 500px) {
width: 100%;
float: none;
}
}
.effeckt-list-wrap {
width: 50%;
float: left;
margin: 0 0 2rem 0;
&:nth-child(even) {
clear: both;
padding-right: 20px;
}
}
.effeckt-demo-list-scroll {
> ul {
width: 32%;
float: left;
margin-right: 2%;
margin-bottom: 2%;
&:nth-of-type(3n) {
margin-right: 0;
}
@media (max-width: 500px) {
width: 100%;
float: none;
height: 250px;
margin: 0 0 1rem 0;
}
}
}
.effeckt-toggle-demo {
min-height: 220px;
}
[data-toggle-trigger] { // Toggle buttons
margin-bottom: 20px;
}
.effeckt-modal {
background: white;
h3 {
padding: 1rem;
color: white;
background: #444;
}
}
.effeckt-modal-content {
padding: 1rem;
}
.effeckt-modal-overlay {
z-index: 1000;
background: rgba(black, 0.5);
}
// Pisitional Modal
.effeckt-positional-modal-wrap {
.effeckt-modal {
padding: 10px;
background: #ccc;
}
.effeckt-modal-content {
background: white;
}
}
// Buttons
.effeckt-button {
background: #444;
color: white;
border: 0;
padding: 0.8rem 1rem;
font-family: inherit;
font-size: 1.3em;
margin: 0 0.25rem 0.6rem 0;
white-space: nowrap;
cursor: pointer;
outline: none;
// As of 8-17-13, Autoprefixer does not catch these
-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(black, 0);
}
.effeckt-button[data-effeckt-type="3d-rotate-success"]:after {
background: #7aca7c;
color: #358337;
}
.effeckt-button[data-effeckt-type="3d-rotate-error"]:before {
background: #e96a6a;
color: #a33a3a;
}
.effeckt-button[data-loading] {
cursor: default;
}
.effeckt-page-transition {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
overflow: hidden;
background: #555;
}
.effeckt-page-transition-content{
position: relative;
top: 50%;
left: 50%;
width: 200px;
margin: -100px 0 0 -100px;
color: white;
}
.effeckt-off-screen-nav {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
bottom: 0;
overflow-y: auto;
background: #333;
visibility: hidden;
width: 12rem; // default, but some effects require different things
ul {
list-style: none;
}
li {
&:first-child {
a { border-top: 0; }
}
&:last-child {
a { border-bottom: 0; }
}
a {
display: block;
padding: 0.3rem 1rem;
color: white;
border-bottom: 1px solid #444;
&:hover, &:focus {
background: #444;
}
&:active {
background: #222;
}
}
}
// Make the close button move along with the header
header {
position: relative;
}
h4 {
color: white;
background: #333;
border-bottom: 1px solid #eee;
padding: 1rem 0.5rem 0.2rem 0;
margin: 0 1rem 1rem;
text-transform: uppercase;
font-size: 0.65rem;
letter-spacing: 0.1rem;
position: relative;
}
}
.effeckt-off-screen-nav-close {
position: absolute;
right: 1rem;
top: 0.65rem;
font-size: 100%;
z-index: 300;
&:hover, &:focus {
color: red;
}
}
.effeckt-off-screen-nav-rotate.effeckt-off-screen-nav-show ~ .page-wrap .off-screen-nav-cover {
background: linear-gradient(left, rgba(#eee, 0), rgba(#eee, 0.9));
}
.effeckt-off-screen-nav-top-card-deck,
.effeckt-off-screen-nav-bottom-card-deck {
cursor: pointer;
background: transparent;
h4 {
margin:0;
padding: 1rem;
border-bottom: 0;
}
li {
background-color: #333;
border-bottom:1px solid #eee;
}
a {
height: 100%;
}
.effeckt-off-screen-nav-close {
right: 1rem;
}
}
.effeckt-off-screen-nav-bottom-card-deck {
li {
border-top:1px solid #eee;
border-bottom:none;
}
}
.effeckt-off-screen-nav-left-bounce,
.effeckt-off-screen-nav-left-bounce-out,
.effeckt-off-screen-nav-right-bounce,
.effeckt-off-screen-nav-right-bounce-out {
box-sizing: content-box;
}
// The Captions
.effeckt-caption {
float: left;
overflow: hidden;
width: 48%;
margin: 0 4% 1rem 0;
&:nth-child(2n) {
margin-right: 0;
}
img {
width: 100%;
display: block;
}
figcaption {
background: rgba(black, 0.8);
color: white;
padding: 1rem;
h3 {
font-size: 1.2rem;
}
p {
margin: 0;
}
}
}
.effeckt-list {
list-style: none;
li {
background: #e6e6e6;
padding: 0 0.5rem;
overflow: hidden;
margin-bottom: 2px;
line-height: 2;
&.new-item {
background: #ccc;
}
}
}
.effeckt-list-scroll {
width: 230px;
height: 480px;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: scroll;
list-style: none;
> li {
padding: 0.5rem;
background: #eee;
color: #252525;
font-size: 18px;
&:nth-child(odd) {
background: #e6e6e6;
}
}
}
// Contributors
.contributors-list {
list-style: none;
overflow: hidden;
li {
float: left;
margin: 0 10px 10px 0;
}
img {
width: 40px;
height: 40px;
}
}
// Extra pages (page transition testing)
[data-effeckt-page="page-1"] {
background-color: #EEEEEE;
}
[data-effeckt-page="page-2"] {
color: #203513;
background-color: #99CF78;
}
[data-effeckt-page="page-3"] {
color: #282828;
background-color: #FECD3D;
}
[data-effeckt-page="page-4"] {
color: #FFFEFE;
background-color: #CD4F5B;
}
[data-effeckt-page="page-5"] {
color: #194772;
background-color:#62A1DC;
}
// Tabs
ul.effeckt-tabs {
margin: 0;
padding: 0;
list-style: none;
li {
float: left;
margin-right:2px;
a {
display: block;
padding: 10px 15px;
color: #383838;
background-color: #EEEEEE;
&.active, &:hover {
background-color: #E8E8E8;
}
}
}
}
.effeckt-tabs-container {
padding:10px;
margin-bottom: 20px;
border:1px solid #DDD;
.effeckt-tab-content {
top: 10px;
}
}
.effeckt-lazy-loading-options {
margin:0 0 15px;
label {
margin: 0 5px;
}
}
.effeckt-lazy-loading {
// Maybe this won't work on many browsers
// But the animations looks cooler like this.
column-count:3;
column-gap:0;
li {
display: block;
list-style-type: none;
padding: 0 5px 5px 0;
}
a {
display: inline-block;
background: #DDD;
border:1px solid #ccc;
width: 100%;
height: 250px;
}
li:nth-child(1) a,
li:nth-child(12n+12) a {
height: 500px;
}
li:nth-child(3n+3) a {
height: 350px;
}
li:nth-child(5n+5) a {
height: 200px;
}
}
================================================
FILE: scss/effeckt.scss
================================================
@import "_variables";
@import "_global";
@import "modules/buttons";
@import "modules/captions";
@import "modules/list-items";
@import "modules/list-scroll";
@import "modules/modal";
@import "modules/off-screen-nav";
@import "modules/page-transitions";
@import "modules/tooltips";
@import "modules/form-elements";
@import "modules/tabs";
@import "modules/positional-modals";
//@import "modules/lazy-loading";
================================================
FILE: scss/effeckts/captions/_mixins.scss
================================================
@mixin effecktCaptionFade() {
figcaption {
opacity: 1;
}
}
@mixin effecktCaptionOffset() {
figcaption {
transform: translate(15px, 15px);
opacity: 1;
z-index: 100; //prevent ovarslap
overflow: hidden;
}
}
@mixin effecktCaptionSlide() {
img {
transform: translateY(-50%);
}
figcaption {
transform: translateY(50%);
}
}
@mixin effecktCaptionGuillotine($direction) {
img {
transform: translateY($direction);
}
}
@mixin effecktQrtrSlideUp() {
figcaption {
opacity: 1;
transform: translateY(0);
}
}
@mixin effecktSqoosh() {
.effeckt-figcaption-wrap {
opacity: 1;
transition-delay: 0.25s;
}
img {
transform: scale(0.5) translateY(-80px);
transition-delay: 0;
}
}
@mixin effecktQrtrSlide() {
figcaption {
opacity: 1;
transform: translateX(0);
}
}
@mixin effecktQrtrFall() {
figcaption {
transform: translateX(0) rotate(0deg);
opacity: 1;
}
}
@mixin effecktQrtrTwoStep() {
figcaption {
transform: translateX(0);
opacity: 1;
}
.effeckt-figcaption-wrap {
transform: translateX(0);
}
}
@mixin effecktCoverPushRight() {
figcaption {
transform: translateX(0);
opacity: 1;
}
img {
transform: translateX(100%);
}
}
@mixin effecktCoverSlideTop() {
figcaption {
transform: translateY(0);
opacity: 1;
}
}
@mixin effecktQrtrZoom() {
figcaption {
transform: scale(1);
opacity: 1;
}
img {
transform: scale(1.1);
}
}
@mixin effecktRevolvingDoor($rotate-dir: y, $perspective:1300px, $rotate-start:0, $rotate-end: -180deg) {
@if $rotate-dir == y {
figcaption {
transform: perspective($perspective) rotateY($rotate-start);
}
img {
transform: perspective($perspective) rotateY($rotate-end);
}
} @else {
figcaption {
transform: perspective($perspective) rotateX($rotate-start);
}
img {
transform: perspective($perspective) rotateX($rotate-end);
}
}
}
================================================
FILE: scss/effeckts/modals/_3ds.scss
================================================
// Effect: 3D flip horizontal
.flip-horizontal-3D {
perspective: $effeckt-perspective;
}
.flip-horizontal-3D .effeckt-content {
transform: rotateY(-70deg);
transform-style: preserve-3d;
opacity: 0;
}
.effeckt-show.flip-horizontal-3D .effeckt-content {
transform: rotateY(0deg);
opacity: 1;
}
// Effect: 3D flip vertical
.flip-vertical-3D {
perspective: $effeckt-perspective;
}
.flip-vertical-3D .effeckt-content {
transform: rotateX(-70deg);
transform-style: preserve-3d;
opacity: 0;
}
.effeckt-show.flip-vertical-3D .effeckt-content {
transform: rotateX(0deg);
opacity: 1;
}
// Effect: 3D sign
.sign-3D {
perspective: $effeckt-perspective;
}
.sign-3D .effeckt-content {
transform: rotateX(-60deg);
transform-origin: 50% 0;
transform-style: preserve-3d;
opacity: 0;
}
.effeckt-show.sign-3D .effeckt-content {
transform: rotateX(0deg);
opacity: 1;
}
// Effect: 3D Slit
.slit-3D {
perspective: $effeckt-perspective;
}
.slit-3D .effeckt-content {
transform: translateZ(-3000px) rotateY(90deg);
transform-style: preserve-3d;
opacity: 0;
}
.effeckt-show.slit-3D .effeckt-content {
animation: modalSlit 0.7s forwards ease-out;
}
@keyframes modalSlit {
50% {
transform: translateZ(-250px) rotateY(89deg);
opacity: 0.75;
animation-timing-function: ease-in;
}
100% {
transform: translateZ(0) rotateY(0deg);
opacity: 1;
}
}
// Effect: 3D Rotate from bottom
.rotate-from-bottom-3D {
perspective: $effeckt-perspective;
}
.rotate-from-bottom-3D .effeckt-content {
transform: translateY(100%) rotateX(90deg);
transform-style: preserve-3d;
transform-origin: 0 100%;
opacity: 0;
}
.effeckt-show.rotate-from-bottom-3D .effeckt-content {
transform: translateY(0%) rotateX(0deg);
opacity: 1;
}
// Effect: 3D Rotate in from left
.rotate-from-left-3D {
perspective: $effeckt-perspective;
}
.rotate-from-left-3D .effeckt-content {
transform: translateZ(100px) translateX(-30%) rotateY(90deg);
transform-style: preserve-3d;
transform-origin: 0 100%;
opacity: 0;
}
.effeckt-show.rotate-from-left-3D .effeckt-content {
transform: translateZ(0px) translateX(0%) rotateY(0deg);
opacity: 1;
}
// Let me in
.let-me-in ~ [data-effeckt-page].effeckt-page-active {
transition: $effeckt-modal-transition-duration;
transform: translate3d(0, 0, 0);
transform-origin: 50% 0%;
transform-style: preserve-3d;
}
.let-me-in .effeckt-content {
opacity: 0;
transform: translate3d(0, 200%, 0);
}
.effeckt-show.let-me-in ~ [data-effeckt-page].effeckt-page-active {
transform: rotateX(-7deg);
opacity: 1;
&:after {
opacity: 1;
visibility: visible;
}
}
.effeckt-show.let-me-in .effeckt-content {
transform: translate3d(0, -50%, 0);
opacity: 1;
}
// Effect: Make way
.make-way {
perspective: $effeckt-perspective;
}
.make-way ~ [data-effeckt-page].effeckt-page-active {
transform-style: preserve-3d;
transform-origin: 0% 50%;
}
.make-way .effeckt-content {
transform: translate3d(200%, 0, 0);
opacity: 0;
}
.effeckt-show.make-way ~ [data-effeckt-page].effeckt-page-active {
animation: makeWay $effeckt-modal-transition-duration forwards ease-in;
}
.effeckt-show.make-way .effeckt-content {
transform: translate3d(0, 0, 0);
opacity: 1;
}
@keyframes makeWay {
50% {
transform: translate3d(0, 0, -50px) rotateY(5deg);
}
100% {
transform: translate3d(0, 0, -200px);
}
}
// Effect: Deep Content
.deep-content .effeckt-content {
transform: scale(0.8);
opacity: 0;
}
.effeckt-show.deep-content .effeckt-content {
transform: scale(1.1);
opacity: 1;
}
.deep-content ~ [data-effeckt-page].effeckt-page-active {
transform: translate3d(0, 0, 0);
transition: $effeckt-modal-transition-duration;
}
.effeckt-show.deep-content ~ [data-effeckt-page].effeckt-page-active {
transform: translate3d(0, 0, -85px);
filter: blur(3px);
}
================================================
FILE: scss/effeckts/modals/_misc.scss
================================================
// Effect: Newspaper
.newspaper .effeckt-content {
transform: scale(0.5) rotate(720deg);
opacity: 0;
}
.effeckt-show.newspaper .effeckt-content {
transform: scale(1) rotate(0deg);
opacity: 1;
}
// Effect: Side fall
.side-fall {
perspective: $effeckt-perspective;
transform-style: preserve-3d;
}
.side-fall .effeckt-content {
transition-timing-function: ease-out;
transform: translateZ(600px) translateX(30%) rotate(10deg);
opacity: 0;
}
.effeckt-show.side-fall .effeckt-content {
transition-timing-function: ease-in;
transform: translateZ(0) translateX(0) rotate(0deg);
opacity: 1;
}
// Effect: Fade In (Just me)
.fade-in .effeckt-content {
opacity: 0;
}
.effeckt-show.fade-in .effeckt-content {
opacity: 1;
}
// Effect: Blur
.effeckt-show.blur ~ [data-effeckt-page] {
filter: blur(3px);
transform: translate3d(0, 0, 0);
}
.blur .effeckt-content {
opacity: 0;
}
.effeckt-show.blur ~ [data-effeckt-page] {
transition: all $effeckt-modal-transition-duration ease;
}
.effeckt-show.blur .effeckt-content {
opacity: 1;
}
// Effect: Tilt Fall / From the top to bottom with left tilt on the way out */
.tilt-fall .effeckt-content {
transform: translateY(100%) rotate(-25deg);
opacity: 0;
}
// Effect: Shake
.shake .effeckt-content {
opacity: 0;
}
.effeckt-show.shake .effeckt-content {
opacity: 1;
animation-name: shake;
animation-timing-function: ease;
}
@keyframes shake {
0%, 100% {transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
20%, 40%, 60%, 80% {transform: translateX(10px);}
}
// Effect: Bounce
.bounce .effeckt-content {
opacity: 0;
}
.effeckt-show.bounce .effeckt-content {
opacity: 1;
animation-name: bounce;
animation-timing-function: ease;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
// Effect: Pulse
.pulse .effeckt-content {
opacity: 0;
}
.effeckt-show.pulse .effeckt-content {
opacity: 1;
animation-name: pulse;
animation-timing-function: ease;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
// Effect: wobble
.wobble .effeckt-content {
opacity: 0;
}
.effeckt-show.wobble .effeckt-content {
opacity: 1;
animation-name: wobble;
animation-timing-function: ease;
}
@keyframes wobble {
0% { transform: translateX(0%); }
15% { transform: translateX(-25%) rotate(-5deg); }
30% { transform: translateX(20%) rotate(3deg); }
45% { transform: translateX(-15%) rotate(-3deg); }
60% { transform: translateX(10%) rotate(2deg); }
75% { transform: translateX(-5%) rotate(-1deg); }
100% { transform: translateX(0%); }
}
// Effect: Swing
.swing .effeckt-content {
transform-origin: 50% 0%;
opacity: 0;
}
.effeckt-show.swing .effeckt-content {
opacity: 1;
animation-name: swing;
animation-timing-function: ease;
}
@keyframes swing {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
// Effect: Tada
.tada .effeckt-content {
opacity: 0;
}
.effeckt-show.tada .effeckt-content {
opacity: 1;
animation-name: tada;
animation-timing-function: ease;
}
@keyframes tada {
0% {transform: scale(1);}
10%, 20% {transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
100% {transform: scale(1) rotate(0);}
}
================================================
FILE: scss/effeckts/modals/_scale.scss
================================================
// Effeckt: Scale Up From Below
.from-below .effeckt-content {
transform: scale(0.5);
opacity: 0;
}
.effeckt-show.from-below .effeckt-content {
transform: scale(1);
opacity: 1;
}
// Effeckt: Scale Down From Above
.from-above .effeckt-content {
transform: scale(1.5);
opacity: 0;
}
.effeckt-show.from-above .effeckt-content {
transform: scale(1);
opacity: 1;
}
// Effeckt Out: Scale Down To Below
.to-below .effeckt-content {
transform: scale(0.5);
opacity: 0;
}
// Effeckt Out: Scale Up To Above
.to-above .effeckt-content {
transform: scale(1.5);
opacity: 0;
}
================================================
FILE: scss/effeckts/modals/_slide.scss
================================================
// Effect: Slide from the top
.slide-in-top .effeckt-content {
transform: translate3d(0, -100%, 0);
opacity: 0;
}
.effeckt-show.slide-in-top .effeckt-content {
transform: translate3d(0, 0, 0);
opacity: 1;
}
// Effect: Slide from the right
.slide-in-right .effeckt-content {
transform: translate3d(30%, 0, 0);
opacity: 0;
}
.effeckt-show.slide-in-right .effeckt-content {
transform: translate3d(0, 0, 0);
opacity: 1;
}
// Effect: Slide from the bottom
.slide-in-bottom .effeckt-content {
transform: translate3d(0, 30%, 0);
opacity: 0;
}
.effeckt-show.slide-in-bottom .effeckt-content {
transform: translate3d(0, 0, 0);
opacity: 1;
}
// Effect: Slide from the left
.slide-in-left .effeckt-content {
transform: translate3d(-30%, 0, 0);
opacity: 0;
}
.effeckt-show.slide-in-left .effeckt-content {
transform: translate3d(0, 0, 0);
opacity: 1;
}
// Effect: Stick Up
.sticky-up {
top: 0;
transform: translate(-50%, 0);
}
.sticky-up .effeckt-content {
transform: translate3d(0, -100%, 0);
opacity: 0;
}
.effeckt-show.sticky-up .effeckt-content {
transform: translate3d(0, 0, 0);
opacity: 1;
}
// Effect: Slip in from the top with perspective on container
.slip-in-from-top ~ [data-effeckt-page],
.slip-in-from-top ~ .effeckt-overlay {
transform-style: preserve-3d;
transform-origin: 50% 100%;
}
.slip-in-from-top .effeckt-content {
transform: translateY(-200%);
opacity: 0;
}
.effeckt-show.slip-in-from-top ~ [data-effeckt-page],
.effeckt-show.slip-in-from-top ~ .effeckt-overlay {
animation: OpenTop $effeckt-modal-transition-duration forwards ease-in;
}
.effeckt-show.slip-in-from-top .effeckt-content {
transform: translateY(0);
opacity: 1;
}
@keyframes OpenTop {
50% {
transform: rotateX(10deg);
animation-timing-function: ease-out;
}
}
// Effeckt Out: Slide Out Bottom
.slide-out-bottom .effeckt-content {
transform: translateY(100%);
opacity: 0;
}
// Effeckt Out: Slide Out Top
.slide-out-top .effeckt-content {
transform: translateY(-100%);
opacity: 0;
}
// Effeckt Out: Slide Out Right
.slide-out-right .effeckt-content {
transform: translateX(100%);
opacity: 0;
}
// Effeckt Out: Slide Out Left
.slide-out-left .effeckt-content {
transform: translateX(-100%);
opacity: 0;
}
================================================
FILE: scss/modules/buttons.scss
================================================
// TODO
// - Some of the moment happening here is happening with top/left instead of translate()
@import "../_variables";
.effeckt-button {
position: relative;
}
// Spinner animation
.effeckt-button .spinner {
position: absolute;
width: $effeckt-buttons-spinner-size;
height: $effeckt-buttons-spinner-size;
top: 50%;
margin-top: -($effeckt-buttons-spinner-size / 2);
margin-left: -($effeckt-buttons-spinner-size / 2);
opacity: 0;
background-image: url(#{$effeckt-button-spinner});
background-size: $effeckt-buttons-spinner-size auto;
}
// Easing Setup
.effeckt-button,
.effeckt-button .spinner,
.effeckt-button .label {
transition: $effeckt-buttons-transition-duration cubic-bezier(0.175, 0.885, 0.320, 1.275) all;
}
// Expand Right
.effeckt-button[data-effeckt-type="expand-right"] .spinner {
right: $effeckt-buttons-spinner-size / 2;
}
.effeckt-button[data-effeckt-type="expand-right"][data-loading] {
padding-right: $effeckt-buttons-spinner-size * 2;
}
.effeckt-button[data-effeckt-type="expand-right"][data-loading] .spinner {
opacity: 1;
}
// Expand Left
.effeckt-button[data-effeckt-type="expand-left"] .spinner {
left: $effeckt-buttons-spinner-size / 2;
margin-left: 0;
}
.effeckt-button[data-effeckt-type="expand-left"][data-loading] {
padding-left: $effeckt-buttons-spinner-size * 2
}
.effeckt-button[data-effeckt-type="expand-left"][data-loading] .spinner {
opacity: 1;
}
// Expand Up
.effeckt-button[data-effeckt-type="expand-up"] {
overflow: hidden;
}
.effeckt-button[data-effeckt-type="expand-up"] .spinner {
top: $effeckt-buttons-spinner-size;
left: 50%;
}
.effeckt-button[data-effeckt-type="expand-up"][data-loading] {
padding-top: $effeckt-buttons-spinner-size * 2;
}
.effeckt-button[data-effeckt-type="expand-up"][data-loading] .spinner {
opacity: 1;
top: $effeckt-buttons-spinner-size / 2;
margin-top: 0;
}
// Expand Down
.effeckt-button[data-effeckt-type="expand-down"] {
overflow: hidden;
}
.effeckt-button[data-effeckt-type="expand-down"] .spinner {
left: 50%;
top: 100%;
margin-top: -($effeckt-buttons-spinner-size * 1.5);
}
.effeckt-button[data-effeckt-type="expand-down"][data-loading] {
padding-bottom: $effeckt-buttons-spinner-size * 2;
}
.effeckt-button[data-effeckt-type="expand-down"][data-loading] .spinner {
opacity: 1;
}
// Slide Left
.effeckt-button[data-effeckt-type="slide-left"] {
overflow: hidden;
}
.effeckt-button[data-effeckt-type="slide-left"] .label {
position: relative;
}
.effeckt-button[data-effeckt-type="slide-left"] .spinner {
left: 100%;
}
.effeckt-button[data-effeckt-type="slide-left"][data-loading] .label {
opacity: 0;
left: -100%;
}
.effeckt-button[data-effeckt-type="slide-left"][data-loading] .spinner {
opacity: 1;
left: 50%;
}
// Slide right
.effeckt-button[data-effeckt-type="slide-right"] {
overflow: hidden;
}
.effeckt-button[data-effeckt-type="slide-right"] .label {
position: relative;
}
.effeckt-button[data-effeckt-type="slide-right"] .spinner {
left: 0%;
}
.effeckt-button[data-effeckt-type="slide-right"][data-loading] .label {
opacity: 0;
left: 100%;
}
.effeckt-button[data-effeckt-type="slide-right"][data-loading] .spinner {
opacity: 1;
left: 50%;
}
// Slide Up
.effeckt-button[data-effeckt-type="slide-up"] {
overflow: hidden;
}
.effeckt-button[data-effeckt-type="slide-up"] .label {
position: relative;
}
.effeckt-button[data-effeckt-type="slide-up"] .spinner {
left: 50%;
top: 100%;
}
.effeckt-button[data-effeckt-type="slide-up"][data-loading] .label {
opacity: 0;
top: -1em;
}
.effeckt-button[data-effeckt-type="slide-up"][data-loading] .spinner {
opacity: 1;
top: 50%;
}
// Slide Down
.effeckt-button[data-effeckt-type="slide-down"] {
overflow: hidden;
}
.effeckt-button[data-effeckt-type="slide-down"] .label {
position: relative;
}
.effeckt-button[data-effeckt-type="slide-down"] .spinner {
left: 50%;
top: 0%;
}
.effeckt-button[data-effeckt-type="slide-down"][data-loading] .label {
opacity: 0;
top: 1em;
}
.effeckt-button[data-effeckt-type="slide-down"][data-loading] .spinner {
opacity: 1;
top: 50%;
}
.effeckt-button[data-effeckt-type="zoom-in"],
.effeckt-button[data-effeckt-type="zoom-in"] .spinner,
.effeckt-button[data-effeckt-type="zoom-in"] .label,
.effeckt-button[data-effeckt-type="zoom-out"],
.effeckt-button[data-effeckt-type="zoom-out"] .spinner,
.effeckt-button[data-effeckt-type="zoom-out"] .label {
transition: $effeckt-buttons-transition-duration ease all;
}
// Zoom Out
.effeckt-button[data-effeckt-type="zoom-out"] {
overflow: hidden;
}
.effeckt-button[data-effeckt-type="zoom-out"] .spinner {
left: 50%;
transform: scale(2.5);
}
.effeckt-button[data-effeckt-type="zoom-out"] .label {
position: relative;
display: inline-block;
}
.effeckt-button[data-effeckt-type="zoom-out"][data-loading] .label {
opacity: 0;
transform: scale(0.5);
}
.effeckt-button[data-effeckt-type="zoom-out"][data-loading] .spinner {
opacity: 1;
transform: none;
}
// Zoom in
.effeckt-button[data-effeckt-type="zoom-in"] {
overflow: hidden;
}
.effeckt-button[data-effeckt-type="zoom-in"] .spinner {
left: 50%;
transform: scale(0.2);
}
.effeckt-button[data-effeckt-type="zoom-in"] .label {
position: relative;
display: inline-block;
}
.effeckt-button[data-effeckt-type="zoom-in"][data-loading] .label {
opacity: 0;
transform: scale(2.2);
}
.effeckt-button[data-effeckt-type="zoom-in"][data-loading] .spinner {
opacity: 1;
transform: none;
}
/*==========================
FILL
==========================*/
@mixin effeckt-button-fill($translateX:0, $translateY:0) {
overflow: hidden;
position: relative;
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: #000;
transform: translate($translateX, $translateY);
transition: transform $effeckt-buttons-transition-duration;
}
&[data-loading] {
&:after {
transform: translate(0, 0);
}
}
.effeckt-button-label {
position: relative;
z-index: 1;
}
}
// Fill from left
.effeckt-button[data-effeckt-type="fill-from-left"] {
@include effeckt-button-fill(-100%,0);
}
// Fill from right
.effeckt-button[data-effeckt-type="fill-from-right"] {
@include effeckt-button-fill(100%,0);
}
// Fill from top
.effeckt-button[data-effeckt-type="fill-from-top"] {
@include effeckt-button-fill(0,-100%);
}
// Fill from bottom
.effeckt-button[data-effeckt-type="fill-from-bottom"] {
@include effeckt-button-fill(0,100%);
}
/*==========================
ICON SLIDE
Example markup:
==========================*/
/// The "effeckt-button-icon" data-URI and "demo-button-icon" class
// are for demo purposes. A user could apply their own class to the
// button's label to designate the icon/image they want sliding in
// and out -- utilizing the :before pseudo-element to place a
// background image or character from an icon font.
.demo-button-icon:before {
background: url(#{$effeckt-button-icon}) no-repeat center center;
background-size: 30px;
}
// General styles
.effeckt-button[data-effeckt-type~="icon-slide"] {
overflow: hidden;
// Any padding has to be applied to the inner element, instead of the container.
// So, override the default styling of .effeckt-button from demo.scss.
padding: 0;
.effeckt-button-label {
padding: 0.8rem 1rem; // And re-apply it here.
display: block;
position: relative;
transition: transform $effeckt-buttons-transition-duration;
&:before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
}
}
}
// Direction-specific styles
.effeckt-button[data-effeckt-type~="icon-slide"] {
// From top
&[data-effeckt-type~="from-top"] .effeckt-button-label:before {
top: -100%;
left: 0;
right: 0;
}
// From bottom
&[data-effeckt-type~="from-bottom"] .effeckt-button-label:before {
bottom: -100%;
left: 0;
right: 0;
}
// From left
&[data-effeckt-type~="from-left"] .effeckt-button-label:before {
left: -100%;
top: 0;
bottom: 0;
}
// From left
&[data-effeckt-type~="from-right"] .effeckt-button-label:before {
right: -100%;
top: 0;
bottom: 0;
}
}
// Active state -- could be applied to a class or data-attribute, instead,
// to make it JS triggered. Hover is easiest for the demo.
.effeckt-button[data-effeckt-type~="icon-slide"][data-loading] {
&[data-effeckt-type~="from-top"] .effeckt-button-label {
transform: translateY(100%);
}
&[data-effeckt-type~="from-bottom"] .effeckt-button-label {
transform: translateY(-100%);
}
&[data-effeckt-type~="from-left"] .effeckt-button-label {
transform: translateX(100%);
}
&[data-effeckt-type~="from-right"] .effeckt-button-label {
transform: translateX(-100%);
}
}
// 3D Rotate Success/Error
.effeckt-button[data-effeckt-type="3d-rotate-success"],
.effeckt-button[data-effeckt-type="3d-rotate-error"] {
transition: all $effeckt-buttons-transition-duration;
transform-style: preserve-3d;
backface-visibility: hidden;
}
// Hidden side of the button
.effeckt-button[data-effeckt-type="3d-rotate-error"]:before,
.effeckt-button[data-effeckt-type="3d-rotate-success"]:after {
white-space: nowrap;
width: 100%;
height: 100%;
position: absolute;
left: 0;
line-height: 2em;
}
// Hidden side of the button
.effeckt-button[data-effeckt-type="3d-rotate-error"]:before {
top: 100%;
content: attr(data-effeckt-message);
transform-origin: 0% 0%;
transform: rotateX(-90deg);
backface-visibility: hidden;
}
// JS add's a 'data-loading' attr, which will triger the transition
.effeckt-button[data-effeckt-type="3d-rotate-error"][data-loading] {
transform-origin: 50% 0%;
transform: rotateX(90deg) translateY(-100%);
}
// Hidden side of the button
.effeckt-button[data-effeckt-type="3d-rotate-success"]:after {
top: -100%;
content: attr(data-effeckt-message);
transform-origin: 0% 100%;
transform: rotateX(90deg);
backface-visibility: hidden;
}
// JS add's a 'data-loading' attr, which will triger the transition
.effeckt-button[data-effeckt-type="3d-rotate-success"][data-loading] {
transform-origin: 50% 100%;
transform: rotateX(-90deg) translateY(100%);
}
================================================
FILE: scss/modules/captions.scss
================================================
// ==========================================================================
// $Effeckt Captions
// @dependencies
// js/libs/jquery-2.0.3.min.js
// js/modules/captions.js
// ==========================================================================
$effeckt-caption-transition-duration: 500ms !default;
/*
Captions Markup Pattern & Explanation
data-effeckt-type =
""
![]()
*/
// ==========================================================================
// Styles
// ==========================================================================
.effeckt-caption {
position: relative;
img {
transition: $effeckt-caption-transition-duration;
}
figcaption {
position: absolute;
transition: $effeckt-caption-transition-duration;
width: 100%;
}
// Effect 1: Appear
&[data-effeckt-type="quarter-appear"] {
figcaption {
bottom: 0;
left: 0;
opacity: 0;
}
&:hover,
&:active,
&.active {
figcaption {
opacity: 1;
}
}
}
// Effect 2: Quarter Slide Up
&[data-effeckt-type="quarter-slide-up"] {
figcaption {
bottom: 0;
left: 0;
opacity: 0;
transform: translateY(100%);
}
&:hover,
&:active,
&.active {
figcaption {
opacity: 1;
transform: translateY(0);
}
}
}
// Effect 3: Sqwoosh
&[data-effeckt-type="sqkwoosh"] {
figcaption {
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: none;
z-index: 0;
}
img {
position: relative;
z-index: 1;
transition-delay: 0.25s;
}
.effeckt-figcaption-wrap {
position: absolute;
bottom: 1rem;
opacity: 0;
transition: opacity 0.25s linear 0s;
}
&:hover,
&:active,
&.active {
.effeckt-figcaption-wrap {
opacity: 1;
transition-delay: 0.25s;
}
img {
transform: scale(0.5) translateY(-80px);
transition-delay: 0;
}
}
}
// Effect 4: Quarter Slide Side
&[data-effeckt-type="quarter-slide-side"] {
figcaption {
left: 0;
bottom: 0;
opacity: 0;
transform: translateX(100%);
}
&:hover,
&:active,
&.active {
figcaption {
opacity: 1;
transform: translateX(0);
}
}
}
// Effect 5: Cover Fade
&[data-effeckt-type="cover-fade"] {
figcaption {
top: 0;
left: 0;
height: 100%;
opacity: 0;
}
&:hover,
&:active,
&.active {
figcaption {
opacity: 1;
}
}
}
// Effect 6 - Quarter Fall in
&[data-effeckt-type="quarter-fall-in"] {
figcaption {
top: 0;
left: 0;
transform: translateX(100%) rotate(20deg);
opacity: 0;
}
&:hover,
&:active,
&.active {
figcaption {
transform: translateX(0) rotate(0deg);
opacity: 1;
}
}
}
// Effect 7 - 3Quarter Two Step
&[data-effeckt-type="quarter-two-step"] {
figcaption {
top: 0;
left: 0;
transform: translateX(-100%);
opacity: 0;
z-index: 2;
}
.effeckt-figcaption-wrap {
transition: $effeckt-caption-transition-duration $effeckt-caption-transition-duration/2;
transform: translateX(200%);
}
&:hover,
&:active,
&.active {
figcaption {
transform: translateX(0);
opacity: 1;
}
.effeckt-figcaption-wrap {
transform: translateX(0);
}
}
}
// Effect 8 - Cover Push Right
&[data-effeckt-type="cover-push-right"] {
figcaption {
top: 0;
left: 0;
height: 100%;
transform: translateX(-100%);
opacity: 0;
}
img {
transition: $effeckt-caption-transition-duration;
transform: translateX(0);
}
&:hover,
&:active,
&.active {
figcaption {
transform: translateX(0);
opacity: 1;
}
img {
transform: translateX(100%);
}
}
}
// Effect 15 - Cover Slide Top
&[data-effeckt-type="cover-slide-top"] {
figcaption {
top: 0;
left: 0;
height: 100%;
transform: translateY(-100%);
opacity: 0;
}
img {
transition: $effeckt-caption-transition-duration;
}
&:hover,
&:active,
&.active {
figcaption {
transform: translateY(0);
opacity: 1;
}
}
}
// Effect 9 - Quarter Caption Zoom
&[data-effeckt-type="quarter-zoom"] {
figcaption {
top: 0;
left: 0;
transform: scale(2);
text-align: center;
opacity: 0;
}
img {
transition: $effeckt-caption-transition-duration;
}
&:hover,
&:active,
&.active {
figcaption {
transform: scale(1);
opacity: 1;
}
img {
transform: scale(1.1);
}
}
}
// Effect 10 - Revolving Door
&[data-effeckt-type="revolving-door-left"] {
overflow: visible;
figcaption {
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: perspective(1300px) rotateY(180deg);
backface-visibility: hidden;
}
img {
transform: perspective(1300px);
transition: $effeckt-caption-transition-duration;
}
&:hover,
&:active,
&.active {
figcaption {
transform: perspective(1300px) rotateY(0deg);
}
img {
transform: perspective(1300px) rotateY(-180deg);
}
}
}
// Effect 11 - Revolving Door Right
&[data-effeckt-type="revolving-door-right"] {
overflow: visible;
figcaption {
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: perspective(1300px) rotateY(180deg);
backface-visibility: hidden;
}
img {
transform: perspective(1300px);
transition: $effeckt-caption-transition-duration;
}
&:hover,
&:active,
&.active {
figcaption {
transform: perspective(1300px) rotateY(360deg);
}
img {
transform: perspective(1300px) rotateY(180deg);
}
}
}
// Effect 12 - Revolving Door Top
&[data-effeckt-type="revolving-door-top"] {
overflow: visible;
figcaption {
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: perspective(1300px) rotateX(180deg);
backface-visibility: hidden;
}
img {
transform: perspective(1300px);
transition: $effeckt-caption-transition-duration;
}
&:hover,
&:active,
&.active {
figcaption {
transform: perspective(1300px) rotateX(360deg);
}
img {
transform: perspective(1300px) rotateX(180deg);
}
}
}
// Effect 13 - Revolving Door Bottom
&[data-effeckt-type="revolving-door-bottom"] {
overflow: visible;
figcaption {
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: perspective(1300px) rotateX(180deg);
backface-visibility: hidden;
}
img {
transform: perspective(1300px);
transition: $effeckt-caption-transition-duration;
}
&:hover,
&:active,
&.active {
figcaption {
transform: perspective(1300px) rotateX(0deg);
}
img {
transform: perspective(1300px) rotateX(-180deg);
}
}
}
// Effect 14 - Caption Offset
&[data-effeckt-type="offset"] {
overflow: visible;
figcaption {
top: 0;
left: 0;
text-align: center;
opacity: 0;
height: 100%;
}
img {
transition: $effeckt-caption-transition-duration;
}
&:hover,
&:active,
&.active {
figcaption {
transform: translate(15px, 15px);
opacity: 1;
z-index: 100; //prevent overlap
overflow: hidden;
}
}
}
// Effect 15 - Guillotine Reverse / Reveal Up
&[data-effeckt-type="guillotine-reverse"] {
overflow: visible;
figcaption {
top: 0;
left: 0;
text-align: center;
height: 100%;
}
img {
display: block;
position:relative;
z-index:10;
transition: $effeckt-caption-transition-duration;
}
&:hover,
&:active,
&.active {
img {
transform: translateY(-100%);
}
}
}
// Effect 16 - Half Slide
&[data-effeckt-type="half-slide"] {
figcaption {
top: 0;
left: 0;
text-align: center;
height: 100%;
transform: translateY(100%);
}
img {
display: block;
position:relative;
transition: $effeckt-caption-transition-duration;
}
&:hover,
&:active,
&.active {
img {
transform: translateY(-50%);
}
figcaption {
transform: translateY(50%);
}
}
}
// Effect 17 - Tunnel
&[data-effeckt-type="tunnel"] {
figcaption {
top: 0;
left: 0;
text-align: center;
height: 100%;
opacity: 0;
transform: scale(0.7);
}
img {
display: block;
position:relative;
z-index: 10;
transition: $effeckt-caption-transition-duration;
}
&:hover,
&:active,
&.active {
img {
transform: scale(0.4);
}
figcaption {
opacity:1;
transform: scale(1);
}
}
}
}
================================================
FILE: scss/modules/form-elements.scss
================================================
@import "../_variables";
// Notes: Only works in WebKit for now
// is this acceptable to our goals?
// Fallback
// Apply this style only on WebKit
// To prevent ugly styles on non-WebKit Browser
@media screen and (-webkit-min-device-pixel-ratio:0) {
.effeckt-ckbox-ios7[type=checkbox],
.effeckt-rdio-ios7[type=radio] {
// Not caught by autoprefixer
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: inset 0px 0px 0px 1px #e6e6e6;
border-radius: $effeckt-form-element-ckradio-ios7border-radius;
cursor: pointer;
display: inline-block;
height: 31px;
padding: 1px;
position: relative;
margin: 0px;
width: 52px;
outline: 0;
transition: $effeckt-form-element-ckradio-ios7transition;
transform: scale(1); // Adjust size here
background: $effeckt-form-element-ckradio-ios7bg-off;
}
.effeckt-ckbox-ios7[type=checkbox]:checked,
.effeckt-rdio-ios7:checked {
box-shadow: inset 0px 0px 0px 20px $effeckt-form-element-ckradio-ios7bg-on;
}
.effeckt-ckbox-ios7[type=checkbox]:after,
.effeckt-rdio-ios7[type=radio]:after {
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
border-radius: $effeckt-form-element-ckradio-ios7border-radius;
content: '';
cursor: pointer;
height: 29px;
position: absolute;
width: 29px;
transition: $effeckt-form-element-ckradio-ios7transition-after;
background: $effeckt-form-element-ckradio-ios7bg-off;
}
.effeckt-ckbox-ios7[type="checkbox"]:checked:after,
.effeckt-rdio-ios7[type="radio"]:checked:after {
left: 22px;
}
// Android
.effeckt-ckbox-android[type=checkbox],
.effeckt-rdio-android[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: inset 0px 0px 0px 1px #e6e6e6;
border-radius: 1px;
cursor: pointer;
display: inline-block;
height: 21px;
padding: 1px;
position: relative;
margin: 0px;
width: 72px;
outline: 0;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
background: #333;
}
.effeckt-ckbox-android[type=checkbox]:checked,
.effeckt-rdio-android:checked {
box-shadow: inset 0px 0px 0px 20px #666666;
}
.effeckt-ckbox-android[type=checkbox]:after,
.effeckt-rdio-android[type=radio]:after {
box-shadow: 0px 0px 0px 0px ;
border-radius: 1px;
content: '';
cursor: pointer;
height: 19px;
position: absolute;
width: 29px;
-webkit-transition: all 0.1s ease-in 0.1s;
-o-transition: all 0.1s ease-in 0.1s;
transition: all 0.1s ease-in 0.1s;
background: #4d4d4d;
}
.effeckt-ckbox-android[type="checkbox"]:checked:after,
.effeckt-rdio-android[type="radio"]:checked:after {
left: 43px;
}
}
================================================
FILE: scss/modules/lazy-loading.scss
================================================
@import "../_variables";
.effeckt-lazy-loading-element {
opacity:0;
&.shown {
opacity: 1;
}
}
// Effeckt: Fade
[data-effeckt-type="fade"] {
.effeckt-lazy-loading-element {
&.animating {
opacity:0;
animation: fadeIn $effeckt-lazy-loading-transition-duration ease forwards;
}
}
}
@keyframes fadeIn {
to { opacity: 1; }
}
// Effeckt: Slide Up
[data-effeckt-type="slide-up"] {
.effeckt-lazy-loading-element {
&.animating {
opacity:0;
transform: translateY(200px);
animation: slideUp $effeckt-lazy-loading-transition-duration ease forwards;
}
}
}
@keyframes slideUp {
to { opacity: 1; transform: translateY(0px); }
}
// Effeckt: Scale Up
[data-effeckt-type="scale-up"] {
.effeckt-lazy-loading-element {
&.animating {
opacity:0;
transform: scale(0.6);
animation: scaleUp $effeckt-lazy-loading-transition-duration ease forwards;
}
}
}
@keyframes scaleUp {
to { opacity: 1; transform: scale(1); }
}
// Effeckt: Scale Down
[data-effeckt-type="scale-down"] {
perspective: 1300px;
.effeckt-lazy-loading-element {
&.animating {
opacity:0;
transform-style: preserve-3d;
transform: scale(1.4);
animation: scaleDown $effeckt-lazy-loading-transition-duration ease forwards;
}
}
}
@keyframes scaleDown {
to { opacity:1; transform: scale(1); }
}
// Effeckt: Fall
[data-effeckt-type="fall"] {
perspective: 1300px;
.effeckt-lazy-loading-element {
&.animating {
opacity:0;
transform-style: preserve-3d;
transform: translateZ(400px) translateY(300px) rotateX(-90deg);
animation: fall $effeckt-lazy-loading-transition-duration*1.5 ease forwards;
}
}
}
@keyframes fall {
to { opacity:1; transform: translateZ(0px) translateY(0px) rotateX(0deg); }
}
// Effeckt: Fly
[data-effeckt-type="fly"] {
perspective: 1300px;
.effeckt-lazy-loading-element {
&.animating {
transform-style: preserve-3d;
transform-origin: 50% 50% -300px;
transform: rotateX(-180deg);
animation: fly $effeckt-lazy-loading-transition-duration ease-in-out forwards;
}
}
}
@keyframes fly {
to { opacity:1; transform: rotateX(0deg); }
}
// Effeckt: 3D Sign
[data-effeckt-type="sign-3D"] {
perspective: 1300px;
.effeckt-lazy-loading-element {
&.animating {
opacity:0;
transform-style: preserve-3d;
transform-origin: 0% 0%;
transform: rotateX(-80deg);
animation: sign3D $effeckt-lazy-loading-transition-duration ease-in-out forwards;
}
}
}
@keyframes sign3D {
to { opacity:1; transform: rotateX(0deg); }
}
// Effeckt: Helix
[data-effeckt-type="helix"] {
perspective: 1300px;
.effeckt-lazy-loading-element {
&.animating {
opacity:0;
transform-style: preserve-3d;
transform: rotateY(-180deg);
animation: helix $effeckt-lazy-loading-transition-duration ease-in-out forwards;
}
}
}
@keyframes helix {
to { opacity:1; transform: rotateY(0deg); }
}
// Effeckt: Pop Up
[data-effeckt-type="popup"] {
perspective: 1300px;
.effeckt-lazy-loading-element {
&.animating {
opacity:0;
transform-style: preserve-3d;
transform: scale(0.4);
animation: popup $effeckt-lazy-loading-transition-duration ease-in-out forwards;
}
}
}
@keyframes popup {
70% { transform: scale(1.1); opacity: .8; animation-timing-function: ease-out; }
100% { opacity: 1; transform: scale(1); }
}
================================================
FILE: scss/modules/list-items.scss
================================================
@import "../_variables";
// TODO: Removal Animations as well
// Pop-in
.effeckt-list[data-effeckt-type='pop-in'] {
overflow: hidden;
}
.effeckt-list[data-effeckt-type='pop-in'] .new-item {
max-height: 0;
opacity: 0;
transform: translateX(-300px);
animation:
openSpace $effeckt-list-item-transition-duration ease forwards,
moveIn $effeckt-list-item-transition-duration*1.5 $effeckt-list-item-transition-duration ease forwards;
}
.effeckt-list[data-effeckt-type='pop-in'] .remove-item {
max-height: 50px;
opacity: 1;
animation:
moveOut $effeckt-list-item-transition-duration*1.5 $effeckt-list-item-transition-duration ease forwards,
closeSpace $effeckt-list-item-transition-duration ease forwards $effeckt-list-item-transition-duration*1.5;
}
@keyframes openSpace {
to {
max-height: 50px;
}
}
@keyframes moveIn {
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes moveOut {
to {
opacity: 0;
transform: translateX(-300px);
}
}
@keyframes closeSpace {
to {
max-height: 0px;
}
from {
max-height: 50px;
}
}
// Expand in
.effeckt-list[data-effeckt-type='expand-in'] .new-item {
max-height: 0;
opacity: 0;
transform: scale(0);
animation: growHeight $effeckt-list-item-transition-duration ease forwards;
}
.effeckt-list[data-effeckt-type='expand-in'] .remove-item {
animation: shrinkHeight $effeckt-list-item-transition-duration ease forwards;
}
@keyframes growHeight {
to {
// max-height kinda janky way to do this
max-height: 50px;
opacity: 1;
transform: scale(1);
}
}
@keyframes shrinkHeight {
to {
max-height: 0;
opacity: 1;
transform: scale(0);
}
from {
max-height: 50px;
opacity: 1;
transform: scale(1);
}
}
// Wobble in
.effeckt-list[data-effeckt-type='wobble-in'] .new-item {
backface-visibility: visible;
animation:
WobbleInX $effeckt-list-item-transition-duration*5 both $effeckt-list-item-transition-duration,
openSpace $effeckt-list-item-transition-duration ease forwards;
}
.effeckt-list[data-effeckt-type='wobble-in'] .remove-item {
backface-visibility: visible;
animation:
WobbleOutX $effeckt-list-item-transition-duration*5 both $effeckt-list-item-transition-duration,
closeSpace $effeckt-list-item-transition-duration*2 ease forwards $effeckt-list-item-transition-duration*3;
}
@keyframes WobbleInX {
0% {
transform: perspective(250px) rotateX(90deg);
opacity: 0;
}
40% {
transform: perspective(250px) rotateX(-10deg);
}
70% {
transform: perspective(250px) rotateX(10deg);
}
100% {
transform: perspective(250px) rotateX(0deg);
opacity: 1;
}
}
@keyframes WobbleOutX {
0% {
transform: perspective(250px) rotateX(0deg);
opacity: 1;
}
100% {
transform: perspective(250px) rotateX(90deg);
opacity: 0;
}
}
// Flip in
.effeckt-list[data-effeckt-type='flip-in'] .new-item {
backface-visibility: visible;
transform-origin: top left;
animation:
FlipIn $effeckt-list-item-transition-duration*5 both $effeckt-list-item-transition-duration,
openSpace $effeckt-list-item-transition-duration ease forwards;
}
.effeckt-list[data-effeckt-type='flip-in'] .remove-item {
backface-visibility: visible;
transform-origin: top left;
animation:
FlipOut $effeckt-list-item-transition-duration*5 both $effeckt-list-item-transition-duration,
closeSpace $effeckt-list-item-transition-duration*2 ease forwards $effeckt-list-item-transition-duration*2;
}
@keyframes FlipIn {
0% {
transform: perspective(300px) rotateX(90deg);
opacity: 0;
}
100% {
transform: perspective(300px) rotateX(0deg);
opacity: 1;
}
}
@keyframes FlipOut {
0% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
// Fall in
.effeckt-list[data-effeckt-type='fall-in'] .new-item {
backface-visibility: visible;
animation:
openSpace $effeckt-list-item-transition-duration*2 ease forwards,
fallInX $effeckt-list-item-transition-duration*2 both;
}
.effeckt-list[data-effeckt-type='fall-in'] .remove-item {
backface-visibility: visible;
transform-origin: top left;
animation:
fallOffX $effeckt-list-item-transition-duration*2 both,
closeSpace $effeckt-list-item-transition-duration*1.5 ease forwards $effeckt-list-item-transition-duration;
}
@keyframes fallInX {
0% {
opacity: 0;
transform: translateY(-200px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fallOffX {
0% {
opacity: 1;
transform: rotateZ(0);
}
100% {
opacity: 0;
transform: translateY(200px) rotateZ(90deg);
}
}
// From Above
.effeckt-list[data-effeckt-type='from-above'] .new-item {
backface-visibility: visible;
animation:
openSpace $effeckt-list-item-transition-duration*2 ease forwards,
fromAbove $effeckt-list-item-transition-duration*2 both $effeckt-list-item-transition-duration;
}
.effeckt-list[data-effeckt-type='from-above'] .remove-item {
backface-visibility: visible;
animation:
toAbove $effeckt-list-item-transition-duration*2 both,
closeSpace $effeckt-list-item-transition-duration ease forwards $effeckt-list-item-transition-duration*1.3;
}
@keyframes fromAbove {
0% {
opacity: 0;
transform: scale(3);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes toAbove {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(3);
}
}
// Wobble Out
.effeckt-list[data-effeckt-type='wobble-out'] .new-item {
backface-visibility: visible;
animation:
openSpace $effeckt-list-item-transition-duration*2 ease forwards,
fallInX $effeckt-list-item-transition-duration*2 both;
}
.effeckt-list[data-effeckt-type='wobble-out'] .remove-item {
backface-visibility: visible;
transform-origin: top left;
animation:
wobbleOutY $effeckt-list-item-transition-duration*3 both $effeckt-list-item-transition-duration,
closeSpace $effeckt-list-item-transition-duration ease forwards $effeckt-list-item-transition-duration*3;
}
@keyframes wobbleOutY {
0% {
opacity: 1;
transform: rotateZ(0);
}
20% {
opacity: 1;
transform: rotateZ(140deg);
}
40% {
opacity: 1;
transform: rotateZ(60deg);
}
60% {
opacity: 1;
transform: rotateZ(110deg);
}
70% {
opacity: 1;
transform: rotateZ(90deg) translateX(0);
}
90% {
opacity: 1;
transform: rotateZ(90deg) translateX(400px);
}
100% {
opacity: 0;
transform: rotateZ(90deg) translateX(400px);
}
}
// Bouncy Slide In
.effeckt-list[data-effeckt-type='bouncy-slide-in'] .new-item {
backface-visibility: visible;
animation:
bouncySlideIn $effeckt-list-item-transition-duration*2 both,
openSpace $effeckt-list-item-transition-duration ease forwards;
}
.effeckt-list[data-effeckt-type='bouncy-slide-in'] .remove-item {
backface-visibility: visible;
animation:
fallOffY $effeckt-list-item-transition-duration*3 both $effeckt-list-item-transition-duration,
closeSpace $effeckt-list-item-transition-duration ease forwards $effeckt-list-item-transition-duration*3.25;
}
@keyframes bouncySlideIn {
0% {
opacity: 0;
transform: translateX(300px);
}
70% {
opacity: 1;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fallOffY {
0% {
opacity: 1;
transform: translateX(0) translateY(0) rotateZ(0deg);
}
50% {
opacity: 1;
transform: translateX(-50%) translateY(0) rotateZ(0deg);
}
75% {
opacity: 0.75;
transform: translateX(-50%) translateY(0) rotateZ(-30deg);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(300px) rotateZ(-60deg);
}
}
================================================
FILE: scss/modules/list-scroll.scss
================================================
@import "../_variables";
.effeckt-list-scroll {
position: relative;
overflow-x: hidden;
overflow-y: scroll;
perspective: 400px;
> li {
position: relative;
z-index: 2;
transform: translateZ(0);
}
}
// Grow
[data-effeckt-type="grow"] li {
transition: all $effeckt-list-scroll-transition-duration ease;
transform-origin: 50% 50%;
&.past, &.future {
transform: scale(0.01);
}
}
// Curl
[data-effeckt-type="curl"] li {
// this was originally applied to the 'li',
// was this a mistake? Seems like it should
// be part of the parent
-
perspective: 600px;
perspective-origin: 0% 50%;
transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/3 ease;
transform-origin: 0% 0%;
backface-visibility: hidden;
&.past {
opacity: 0;
transform: rotateY(90deg);
}
&.future {
opacity: 0;
transform: rotateY(90deg);
}
}
// Wave
[data-effeckt-type="wave"] li {
transition: all $effeckt-list-scroll-transition-duration cubic-bezier(0.260, 0.860, 0.440, 0.985);
&.past {
transform: translateX(-70%);
}
&.future {
transform: translateX(-70%);
}
}
// Fan
[data-effeckt-type="fan"] li {
transition: all $effeckt-list-scroll-transition-duration cubic-bezier(0.390, 0.575, 0.565, 1.000);
transform-origin: 0% 0%;
&.past {
transform: rotate(-60deg);
}
&.future {
transform: rotate(70deg);
}
}
// Fade
[data-effeckt-type="fade"] li {
transition: opacity $effeckt-list-scroll-transition-duration/2 ease-in-out;
&.past, &.future {
opacity: 0;
}
}
// Fly
[data-effeckt-type="fly"] {
perspective: 400px;
perspective-origin: 50% 50%;
li {
transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/2 ease;
transform-origin: 50% 50% -50px;
&.past, &.future {
opacity: 0;
}
&.past {
transform: rotateX(180deg);
}
&.future {
transform: rotateX(-180deg);
}
}
}
//landing
[data-effeckt-type="landing"] {
perspective: 400px;
perspective-origin: 50% 50%;
li {
transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/2 ease;
transform-origin: 50% 50%;
&.past, &.future {
opacity: 0;
}
&.past {
transform: scale(1.5) translate(10%,-50%);
}
&.future {
transform: scale(1.5) translate(-10%,50%);
}
}
}
//swing from back to front
[data-effeckt-type="swing-front"] {
perspective: 400px;
perspective-origin: 50% 50%;
li {
transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/2 ease;
&.past, &.future {
opacity: 0;
}
&.past {
transform-origin: bottom;
transform: rotateX(140deg);
}
&.future {
transform-origin: top;
transform: rotateX(-140deg);
}
}
}
//swing from front to back
[data-effeckt-type="swing-back"] {
perspective: 400px;
perspective-origin: 50% 50%;
li {
transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/2 ease;
&.past, &.future {
opacity: 0;
}
&.past {
transform-origin: bottom;
transform: rotateX(-140deg);
}
&.future {
transform-origin: top;
transform: rotateX(140deg);
}
}
}
//swing from front to back
[data-effeckt-type="twist"] {
perspective: 400px;
perspective-origin: 50% 50%;
li {
transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/2 ease;
transform-origin: center;
&.past, &.future {
opacity: 0;
}
&.past {
transform: rotateY(-180deg);
}
&.future {
transform: rotateY(180deg);
}
}
}
//open door effect
[data-effeckt-type="door"] {
perspective: 400px;
perspective-origin: 50% 50%;
li {
transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/2 ease;
transform-origin: 0% 0%;
&.past, &.future {
opacity: 0;
transform: rotateY(-90deg);
}
}
}
//climb effect
[data-effeckt-type="climb"] {
perspective: 400px;
perspective-origin: 50% 50%;
li {
transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/2 ease;
transform-origin: 0% 0%;
&.past {
transform: translateY(-200%);
}
&.future {
transform: translateY(200%);
}
}
}
================================================
FILE: scss/modules/modal.scss
================================================
@import "../_variables";
//------------------------------------------------------------
// Modal Effects
// Some Based on https://github.com/daneden/animate.css
//
// Rewritten for effeckts project
//------------------------------------------------------------
// Modal itself
.effeckt-modal-wrap {
// Line that causes blur
// But would be **SUPER RAD** if we could use so modals are centered no matter what author does
// transform: translate(-50%, -50%);
// Possible blur fix
// https://twitter.com/iamwarry/status/354595007937789954
// Problems:
// 1) Autoprefixer (?) garbles this to -webkit-transform: translate(-webkit-calc(-50%1px), -webkit-calc(-50%1px));
// 2) Safari just doesn't allow it even when syntax is right.
// 3) It doesn't always work. Still blurry = http://cl.ly/QVGo ; Sharp = http://cl.ly/QUgo
position: fixed;
// Sizing with sloppy centering so at least not blurry
top: 50%;
left: 50%;
max-width: $effeckt-modal-max-width;
min-width: $effeckt-modal-min-width;
transform: translate(-50%, -50%);
z-index: $effeckt-modal-z-index;
visibility: hidden;
backface-visibility: hidden;
}
.effeckt-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition-duration: $effeckt-modal-transition-duration;
}
.effeckt-show.effeckt-modal-wrap {
visibility: visible;
~ .effeckt-modal-overlay {
visibility: visible;
opacity: 1;
}
}
.effeckt-modal {
transition-property: all;
transition-duration: $effeckt-modal-transition-duration;
transition-timing-function: cubic-bezier(.4, 0, 0, 1.5);
animation-duration: $effeckt-modal-animation-duration;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(.4, 0, 0, 1.5);
}
@import "../effeckts/modals/scale";
@import "../effeckts/modals/slide";
@import "../effeckts/modals/3ds";
@import "../effeckts/modals/misc";
================================================
FILE: scss/modules/off-screen-nav.scss
================================================
@import "../_variables";
// TODO: translateX(-260px) or translateY(-260px) need to be nav size
// this need to be handle by JS or CSS Variable
// Nav Overlay
.effeckt-off-screen-nav {
~ [data-effeckt-page].effeckt-page-active:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background: rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
transition: $effeckt-off-screen-navigation-transition-duration;
}
&.effeckt-show {
~ [data-effeckt-page].effeckt-page-active:after {
opacity: 1;
visibility: visible;
}
}
}
// 1 Left Overlay
.effeckt-off-screen-nav-left-overlay {
transform: translateX(-100%);
transition: $effeckt-off-screen-navigation-transition-duration cubic-bezier(.09,.68,0,.99);
&.effeckt-show {
transform: translateX(0);
}
}
// 2 Left Push
.effeckt-off-screen-nav-left-push {
// Needs to be fixed size so .page-wrap can move same distance
transform: translateX(-12rem);
transition: $effeckt-off-screen-navigation-transition-duration;
&.effeckt-show {
transform: translateX(0);
~ [data-effeckt-page].effeckt-page-active {
transform: translateX(12rem);
}
}
~ [data-effeckt-page].effeckt-page-active {
transition: $effeckt-off-screen-navigation-transition-duration;
transform: translateX(0);
}
}
// 3 Left Reveal
.effeckt-off-screen-nav-left-reveal {
// Needs to be fixed size so .page-wrap can move same distance
width: 0px;
transform: translate3D(0, 0, 0);
transition: $effeckt-off-screen-navigation-transition-duration;
& h4 {
width: 10rem;
}
&.effeckt-show {
width: 12rem;
transform: translateX(0);
~ [data-effeckt-page] {
transform: translateX(12rem);
}
}
~ [data-effeckt-page] {
transition: $effeckt-off-screen-navigation-transition-duration;
}
}
// 4 Left Squeeze
.effeckt-off-screen-nav-left-squeeze {
// Needs to be percentage so can be equal parts with .page-wrap
width: 40%;
transform: translateX(-100%);
transition: $effeckt-off-screen-navigation-transition-duration;
&.effeckt-show {
transform: translateX(0);
~ [data-effeckt-page] {
width: 60%;
}
}
~ [data-effeckt-page] {
float: right;
transition: width $effeckt-off-screen-navigation-transition-duration;
max-width: none; // reset from demo
}
}
// 5 Right Overlay
.effeckt-off-screen-nav-right-overlay {
right: 0;
left: auto;
transform: translateX(100%);
transition: $effeckt-off-screen-navigation-transition-duration cubic-bezier(.09, .68, 0, .99);
&.effeckt-show {
transform: translateX(0);
}
}
// 6 Right Push
.effeckt-off-screen-nav-right-push {
// Needs to be fixed size so .page-wrap can move same distance
left: auto;
right: 0;
transform: translateX(12rem);
transition: $effeckt-off-screen-navigation-transition-duration;
&.effeckt-show {
transform: translateX(0);
~ [data-effeckt-page] {
transform: translateX(-12rem);
}
}
~ [data-effeckt-page] {
transition: $effeckt-off-screen-navigation-transition-duration;
}
}
// 7 Right Reveal
.effeckt-off-screen-nav-right-reveal {
// Needs to be fixed size so .page-wrap can move same distance
width: 0;
overflow: hidden;
left: auto;
right: 0;
transform: translate3D(0, 0, 0);
transition: $effeckt-off-screen-navigation-transition-duration;
& h4 {
width: 10rem;
position: absolute;
top: 0px;
right: 0;
}
& ul {
width: 12rem;
position: absolute;
top: 3.2rem;
right: 0;
}
&.effeckt-show {
width: 12rem;
~ [data-effeckt-page] {
transform: translateX(-12rem);
}
}
~ [data-effeckt-page] {
transition: $effeckt-off-screen-navigation-transition-duration;
}
}
// 8 Right Squeeze
.effeckt-off-screen-nav-right-squeeze {
// Needs to be percentage so can be equal parts with .page-wrap
left: auto;
right: 0;
width: 40%;
transform: translateX(100%);
transition: $effeckt-off-screen-navigation-transition-duration;
&.effeckt-show {
transform: translateX(0);
~ [data-effeckt-page] {
width: 60%;
}
}
~ [data-effeckt-page] {
float: left;
transition: width $effeckt-off-screen-navigation-transition-duration;
max-width: none; // reset from demo
}
}
// 9 Rotate from Left
.effeckt-off-screen-nav-left-rotate {
transform-origin: 100% 50%;
transition: $effeckt-off-screen-navigation-transition-duration;
transform: translateX(-100%) scale(1.01) rotateY(-30deg);
~ [data-effeckt-page].effeckt-page-active {
transform-origin: 0 50%;
transition: $effeckt-off-screen-navigation-transition-duration;
}
~ .effeckt-overlay {
z-index:900;
visibility: visible;
opacity: 1;
}
&.effeckt-show {
transform: none;
~ [data-effeckt-page].effeckt-page-active {
transform: translateX(260px) rotateY(15deg);
// Prevent scrolling
overflow: hidden;
&:after {
background: none;
}
}
// dont nest > 3 levels deep
~ [data-effeckt-page] .off-screen-nav-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
// 10 Top Overlay
.effeckt-off-screen-nav-top-overlay {
width: 100%;
bottom:auto;
transition: $effeckt-off-screen-navigation-transition-duration;
transform: translateY(-100%);
&.effeckt-show {
visibility: visible;
transform: translateY(0%);
}
}
// 11 Bottom Overlay
.effeckt-off-screen-nav-bottom-overlay {
width: 100%;
top:auto;
transition: $effeckt-off-screen-navigation-transition-duration;
transform: translateY(100%);
&.effeckt-show {
transform: translateY(0%);
}
}
// 12.1 Top Bounce
.effeckt-off-screen-nav-top-bounce {
width: 100%;
bottom:auto;
transition: $effeckt-off-screen-navigation-transition-duration;
&.effeckt-show {
visibility: visible;
animation: navFromTopBounceIn $effeckt-off-screen-navigation-transition-duration both ease;
}
&.effeckt-hide {
animation: navFromTopBounceOut $effeckt-off-screen-navigation-transition-duration both ease;
}
}
// 12.2 Top Bounce Out Only
.effeckt-off-screen-nav-top-bounce-out {
width: 100%;
bottom:auto;
transform: translateY(-100%);
transition: $effeckt-off-screen-navigation-transition-duration;
&.effeckt-show {
visibility: visible;
transform: translateY(0%);
}
&.effeckt-hide {
animation: navFromTopBounceOut $effeckt-off-screen-navigation-transition-duration both ease;
}
}
@keyframes navFromTopBounceIn {
0% { transform: translateY(-100%); }
20% { padding-top: 0px; transform: translateY(0%); }
60% { padding-top: 20px; }
100% { padding-top: 0; }
}
@keyframes navFromTopBounceOut {
0% { transform: translateY(0%); padding-top: 0px; }
40%{ transform: translateY(0%); padding-top: 20px; }
80%{ padding-top: 0px; }
90%, 100%{ transform: translateY(-100%); }
}
// 13.1 Bottom Bounce
.effeckt-off-screen-nav-bottom-bounce {
width: 100%;
top:auto;
transition: $effeckt-off-screen-navigation-transition-duration;
&.effeckt-show {
animation: navFromBottomBounceIn $effeckt-off-screen-navigation-transition-duration both ease;
}
&.effeckt-hide {
animation: navFromBottomBounceOut $effeckt-off-screen-navigation-transition-duration both ease;
}
}
// 13.2 Bottom Bounce Out Only
.effeckt-off-screen-nav-bottom-bounce-out {
width: 100%;
top:auto;
transform: translateY(100%);
transition: $effeckt-off-screen-navigation-transition-duration;
&.effeckt-show {
transform: translateY(0%);
}
&.effeckt-hide {
animation: navFromBottomBounceOut $effeckt-off-screen-navigation-transition-duration both ease;
}
}
@keyframes navFromBottomBounceIn {
0% { transform: translateY(100%); }
20% { padding-bottom: 0px; transform: translateY(0%); }
60% { padding-bottom: 20px; }
100% { padding-bottom: 0; }
}
@keyframes navFromBottomBounceOut {
0% { transform: translateY(0%); padding-bottom: 0px; }
40%{ transform: translateY(0%); padding-bottom: 20px; }
80%{ padding-bottom: 0; }
90%, 100%{ transform: translateY(100%); }
}
// 14 Push Top
.effeckt-off-screen-nav-push-top {
width: 100%;
bottom:auto;
transition: $effeckt-off-screen-navigation-transition-duration;
transform: translateY(-100%);
&.effeckt-show {
visibility: visible;
transform: translateY(0%);
~ [data-effeckt-page] {
transform: translateY(12rem);
}
}
~ [data-effeckt-page] {
transition: $effeckt-off-screen-navigation-transition-duration;
}
}
// 15 Push Bottom
.effeckt-off-screen-nav-push-bottom {
width: 100%;
top:auto;
transition: $effeckt-off-screen-navigation-transition-duration;
transform: translateY(100%);
&.effeckt-show {
visibility: visible;
transform: translateY(0%);
~ [data-effeckt-page] {
transform: translateY(-12rem);
}
}
~ [data-effeckt-page] {
transition: $effeckt-off-screen-navigation-transition-duration;
}
}
// 16 Rotate from Right
.effeckt-off-screen-nav-right-rotate {
left: auto;
right: 0;
transform-origin: 100% 50%;
transition: $effeckt-off-screen-navigation-transition-duration;
transform: rotateY(30deg) translateX(100%) scale(1.01);
~ [data-effeckt-page] {
transform-origin: 100% 50%;
transition: $effeckt-off-screen-navigation-transition-duration;
}
~ .effeckt-overlay {
z-index:900;
visibility: visible;
opacity: 1;
}
&.effeckt-show {
transform: none;
~ [data-effeckt-page] {
transform: translateX(-260px) rotateY(-15deg);
// Prevent scrolling
overflow: hidden;
&:after {
background: none;
}
}
// dont nest > 3 levels deep
~ [data-effeckt-page] .off-screen-nav-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
// 17 Card Deck From Top
.effeckt-off-screen-nav-top-card-deck {
perspective: 800px;
bottom: auto;
transform: translateY(-100%);
width: 100%;
overflow:visible;
transition: transform $effeckt-off-screen-navigation-transition-duration/2;
&.effeckt-show {
transform: translateY(0%);
}
h4 {
position: relative;
z-index: 300;
backface-visibility: hidden;
transform-style: preserve-3d;
transform-origin: 50% 0%;
transition: all $effeckt-off-screen-navigation-transition-duration/2 ease-out;
display:block;
&:active {
transform: rotateX(60deg);
}
}
ul {
position: absolute;
width: 100%;
height: 100%;
top: 0;
margin:0;
li {
transition: all $effeckt-off-screen-navigation-transition-duration/2 ease-out;
position: absolute;
top: 0;
z-index: 0;
width:100%;
height:100%;
transform: translateY(0px);
}
}
}
// 18 Card Deck From Bottom
.effeckt-off-screen-nav-bottom-card-deck {
perspective: 800px;
top: auto;
transform: translateY(100%);
width: 100%;
overflow:visible;
transition: transform $effeckt-off-screen-navigation-transition-duration/2;
&.effeckt-show {
transform: translateY(0%);
}
h4 {
position: relative;
z-index: 300;
backface-visibility: hidden;
transform-style: preserve-3d;
transform-origin: 50% 100%;
transition: all $effeckt-off-screen-navigation-transition-duration/2 ease-out;
display:block;
&:active {
transform: rotateX(-60deg);
}
}
ul {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
margin:0;
li {
transition: all $effeckt-off-screen-navigation-transition-duration/2 ease-out;
position: absolute;
top: 0;
z-index: 0;
width:100%;
height:100%;
transform: translateY(300px);
}
}
}
// 19.1 Left Bounce
.effeckt-off-screen-nav-left-bounce {
transition: $effeckt-off-screen-navigation-transition-duration;
transform: translateX(-100%);
&.effeckt-show {
visibility: visible;
transform: translateX(0%);
animation: navFromLeftBounceIn $effeckt-off-screen-navigation-transition-duration both ease;
}
&.effeckt-hide {
transform: translateX(-100%);
animation: navFromLeftBounceOut $effeckt-off-screen-navigation-transition-duration both ease;
}
}
@keyframes navFromLeftBounceIn {
0% { transform: translateX(-100%); }
20% { padding-left: 0px; transform: translateX(0%); }
60% { padding-left: 20px; }
100% { padding-left: 0px; }
}
@keyframes navFromLeftBounceOut {
0% { transform: translateX(0%); padding-left: 0px; }
40%{ transform: translateX(0%); padding-left: 20px; }
80%{ padding-left: 0px; }
90%, 100%{ transform: translateX(-100%); }
}
// 19.2 Left Bounce Out Only
.effeckt-off-screen-nav-left-bounce-out {
transform: translateX(-100%);
transition: $effeckt-off-screen-navigation-transition-duration;
&.effeckt-show {
visibility: visible;
transform: translateY(0%);
}
&.effeckt-hide {
animation: navFromLeftBounceOut $effeckt-off-screen-navigation-transition-duration both ease;
}
}
// 20.1 Right Bounce
.effeckt-off-screen-nav-right-bounce {
left: auto;
right: 0;
transition: $effeckt-off-screen-navigation-transition-duration;
&.effeckt-show {
visibility: visible;
animation: navFromRightBounceIn $effeckt-off-screen-navigation-transition-duration both ease;
}
&.effeckt-hide {
animation: navFromRightBounceOut $effeckt-off-screen-navigation-transition-duration both ease;
}
}
@keyframes navFromRightBounceIn {
0% { transform: translateX(100%); }
20% { padding-right: 0px; transform: translateX(0%); }
60% { padding-right: 20px; }
100% { padding-right: 0px; }
}
@keyframes navFromRightBounceOut {
0% { transform: translateX(0%); padding-right: 0px; }
40%{ transform: translateX(0%); padding-right: 20px; }
80%{ padding-right: 0px; }
90%, 100%{ transform: translateX(100%); }
}
// 20.2 Left Bounce Out Only
.effeckt-off-screen-nav-right-bounce-out {
left: auto;
right: 0;
transform: translateX(100%);
transition: $effeckt-off-screen-navigation-transition-duration;
&.effeckt-show {
visibility: visible;
transform: translateY(0%);
}
&.effeckt-hide {
animation: navFromRightBounceOut $effeckt-off-screen-navigation-transition-duration both ease;
}
}
// 21 Rotate from Bottom
.effeckt-off-screen-nav-bottom-rotate {
top: auto;
width: 100%;
transform-origin: 100% 50%;
transition: $effeckt-off-screen-navigation-transition-duration;
transform: translateY(100%) scale(1.01) rotateX(-30deg);
~ [data-effeckt-page].effeckt-page-active {
transform-origin: 0% 100%;
transition: $effeckt-off-screen-navigation-transition-duration;
}
~ .effeckt-overlay {
z-index:900;
visibility: visible;
opacity: 1;
}
&.effeckt-show {
transform: none;
~ [data-effeckt-page].effeckt-page-active {
transform: translateY(-260px) rotateX(15deg);
// Prevent scrolling
overflow: hidden;
&:after {
background: none;
}
}
// dont nest > 3 levels deep
~ [data-effeckt-page] .off-screen-nav-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
// 22 Rotate from Top
.effeckt-off-screen-nav-top-rotate {
bottom: auto;
width: 100%;
transform-origin: 50% 0%;
transition: $effeckt-off-screen-navigation-transition-duration;
transform: translateY(-100%) scale(1.01) rotateX(30deg);
~ [data-effeckt-page].effeckt-page-active {
transform-origin: 100% 0%;
transition: $effeckt-off-screen-navigation-transition-duration;
}
~ .effeckt-overlay {
z-index:900;
visibility: visible;
opacity: 1;
}
&.effeckt-show {
transform: none;
~ [data-effeckt-page].effeckt-page-active {
transform: translateY(260px) rotateX(-15deg);
// Prevent scrolling
overflow: hidden;
&:after {
background: none;
}
}
// dont nest > 3 levels deep
~ [data-effeckt-page] .off-screen-nav-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
// 23 Minimize then reveal
// based on left-reveal (2) and Rotate from Top (22)
@mixin minimize-reveal-list-items-hidden {
li, h4 {
transition: $effeckt-off-screen-navigation-transition-duration cubic-bezier(.16,.86,.33,.97);
transform: translateX(5%);
opacity: 0;
}
}
@mixin minimize-reveal-list-items-fade {
transform: translateX(0);
opacity: 1;
}
@mixin minimize-reveal-list-items-shown {
h4 {
@include minimize-reveal-list-items-fade();
//fade in header first.
transition-delay: $effeckt-off-screen-navigation-transition-duration;
}
@for $i from 1 through $effeckt-off-screen-navigation-list-item-amount {
li:nth-child(#{$i}) {
@include minimize-reveal-list-items-fade();
//wait until the header has finished
transition-delay: $effeckt-off-screen-navigation-transition-duration * 2 + $effeckt-off-screen-navigation-transition-duration * $i * 0.25;
}
}
}
.effeckt-off-screen-nav-minimize-reaveal {
width: 100%;
transition: $effeckt-off-screen-navigation-transition-duration;
// padding-right: 35%;
~ [data-effeckt-page].effeckt-page-active {
transition: $effeckt-off-screen-navigation-transition-duration;
box-shadow: 0px 0px 50px #CACACA;
z-index: 1000;
}
@include minimize-reveal-list-items-hidden();
&.effeckt-show {
@include minimize-reveal-list-items-shown();
~ [data-effeckt-page].effeckt-page-active {
transition: $effeckt-off-screen-navigation-transition-duration * 1.5 cubic-bezier(.16,.86,.33,.97);
transform: translateX(50%) scale3d(0.5,0.5,1);
overflow: hidden;
}
// dont nest > 3 levels deep
~ [data-effeckt-page] .off-screen-nav-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
.effeckt-off-screen-nav-minimize-flip {
width: 100%;
transition: $effeckt-off-screen-navigation-transition-duration;
// padding-right: 35%;
~ [data-effeckt-page].effeckt-page-active {
transition: $effeckt-off-screen-navigation-transition-duration;
box-shadow: 0px 0px 50px #CACACA;
z-index: 1000;
}
@include minimize-reveal-list-items-hidden();
&.effeckt-show {
@include minimize-reveal-list-items-shown();
~ [data-effeckt-page].effeckt-page-active {
transition: $effeckt-off-screen-navigation-transition-duration * 1.5 cubic-bezier(.16,.86,.33,.97);
transform: translateX(50%) rotateY(-15deg) scale3d(0.5,0.5,1);
overflow: hidden;
}
// dont nest > 3 levels deep
~ [data-effeckt-page] .off-screen-nav-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
================================================
FILE: scss/modules/page-transitions.scss
================================================
//------------------------------------------------------------
// Page Transitions
// Based on http://tympanus.net/Development/PageTransitions/
//
// Rewritten for effeckts project
//------------------------------------------------------------
@import "../_variables";
[data-effeckt-page] {
position: relative;
top:0;
left:0;
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
visibility: hidden;
z-index:0;
padding: 2rem 4rem 0;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
transform-style: preserve-3d;
display: none;
&.effeckt-page-active {
display: block;
visibility: visible;
z-index:10;
}
&.effeckt-page-animating {
overflow: hidden;
z-index: 100;
position: absolute;
}
}
//-----------------------------------------------------
// Slide's Classes
//-----------------------------------------------------
// Slide From/To Left
[data-effeckt-page].slide-from-left {
animation: slideFromLeft $effeckt-page-transition-duration forwards ease-in-out;
}
[data-effeckt-page].slide-to-left {
animation: slideToLeft $effeckt-page-transition-duration forwards ease-in-out;
}
// Slide From/To Right
[data-effeckt-page].slide-from-right {
animation: slideFromRight $effeckt-page-transition-duration forwards ease-in-out;
}
[data-effeckt-page].slide-to-right {
animation: slideToRight $effeckt-page-transition-duration forwards ease-in-out;
}
// Slide From/To Top
[data-effeckt-page].slide-from-top {
animation: slideFromTop $effeckt-page-transition-duration forwards ease-in-out;
}
[data-effeckt-page].slide-to-top {
animation: slideToTop $effeckt-page-transition-duration forwards ease-in-out;
}
// Slide From/To Bottom
[data-effeckt-page].slide-from-bottom {
animation: slideFromBottom $effeckt-page-transition-duration forwards ease-in-out;
}
[data-effeckt-page].slide-to-bottom {
animation: slideToBottom $effeckt-page-transition-duration forwards ease-in-out;
}
// Scale Up From Behind
[data-effeckt-page].scale-up-from-behind {
animation: scaleUpFromBehind $effeckt-page-transition-duration forwards ease-in-out;
@extend .animation-delay-300;
}
//-----------------------------------------------------
// Scale's Classes
//-----------------------------------------------------
// Scale Up To Front
[data-effeckt-page].scale-up-to-front {
animation: scaleUpToFront $effeckt-page-transition-duration forwards ease-in-out;
&.effeckt-page-animating {
@extend .page-on-top;
}
}
// Scale Down To Behind
[data-effeckt-page].scale-down-to-behind {
animation: scaleDownToBehind $effeckt-page-transition-duration forwards ease-in-out;
}
// Scale Down From Front
[data-effeckt-page].scale-down-from-front {
animation: scaleDownFromFront $effeckt-page-transition-duration forwards ease-in-out;
@extend %animation-delay-300;
&.effeckt-page-animating {
@extend .page-on-top;
}
}
// Scale Down Slide To Left
[data-effeckt-page].scale-down-slide-to-left {
animation: scaleDownSlideToLeft $effeckt-page-transition-duration * 2 forwards ease-in-out;
}
// Scale Down Slide From Right
[data-effeckt-page].scale-down-slide-from-right {
animation: scaleDownSlideFromRight $effeckt-page-transition-duration * 2 forwards ease-in-out;
}
// Scale Down Slide From Left
[data-effeckt-page].scale-down-slide-from-left {
animation: scaleDownSlideFromLeft $effeckt-page-transition-duration * 2 forwards ease-in-out;
}
// Scale Down Slide To Right
[data-effeckt-page].scale-down-slide-to-right {
animation: scaleDownSlideToRight $effeckt-page-transition-duration * 2 forwards ease-in-out;
}
// Scale Down Slide From Top
[data-effeckt-page].scale-down-slide-from-top {
animation: scaleDownSlideFromTop $effeckt-page-transition-duration * 2 forwards ease-in-out;
}
// Scale Down Slide To Bottom
[data-effeckt-page].scale-down-slide-to-bottom {
animation: scaleDownSlideToBottom $effeckt-page-transition-duration * 2 forwards ease-in-out;
}
// Scale Down Slide From Bottom
[data-effeckt-page].scale-down-slide-from-bottom {
animation: scaleDownSlideFromBottom $effeckt-page-transition-duration * 2 forwards ease-in-out;
}
// Scale Down Slide To Top
[data-effeckt-page].scale-down-slide-to-top {
animation: scaleDownSlideToTop $effeckt-page-transition-duration * 2 forwards ease-in-out;
}
//-----------------------------------------------------
// Rotate's Classes
//-----------------------------------------------------
// Rotate to Behind
[data-effeckt-page].rotate-to-behind {
transform-origin: -50% 50%;
animation: rotateToBehind $effeckt-page-transition-duration/2 both ease-in;
}
// Rotate to Front
[data-effeckt-page].rotate-to-front {
transform-origin: 150% 50%;
animation: rotateToFront $effeckt-page-transition-duration/2 both ease-out;
}
//-----------------------------------------------------
// Flip's Classes
//-----------------------------------------------------
// Flip to Right
[data-effeckt-page].flip-to-right-front {
backface-visibility: hidden;
animation: flipToRightBack $effeckt-page-transition-duration forwards ease;
}
[data-effeckt-page].flip-to-right-back {
backface-visibility: hidden;
animation: flipToRight $effeckt-page-transition-duration forwards ease;
}
// Flip to Left
[data-effeckt-page].flip-to-left-front {
backface-visibility: hidden;
animation: flipToLeftBack $effeckt-page-transition-duration forwards ease;
}
[data-effeckt-page].flip-to-left-back {
backface-visibility: hidden;
animation: flipToLeft $effeckt-page-transition-duration forwards ease;
}
// Flip to Top
[data-effeckt-page].flip-to-top-front {
backface-visibility: hidden;
animation: flipToTopBack $effeckt-page-transition-duration forwards ease;
}
[data-effeckt-page].flip-to-top-back {
backface-visibility: hidden;
animation: flipToTop $effeckt-page-transition-duration forwards ease;
}
// Flip to Bottom
[data-effeckt-page].flip-to-bottom-front {
backface-visibility: hidden;
animation: flipToBottomBack $effeckt-page-transition-duration forwards ease;
}
[data-effeckt-page].flip-to-bottom-back {
backface-visibility: hidden;
animation: flipToBottom $effeckt-page-transition-duration forwards ease;
}
//-----------------------------------------------------
// Animations
//-----------------------------------------------------
// Slides Animations
@keyframes slideFromTop {
from {
transform: translateY(-100%);
}
}
@keyframes slideToTop {
to {
transform: translateY(-100%);
}
}
@keyframes slideFromRight {
from {
transform: translateX(100%);
}
}
@keyframes slideToRight {
to {
transform: translateX(100%);
}
}
@keyframes slideFromBottom {
from {
transform: translateY(100%);
}
}
@keyframes slideToBottom {
to {
transform: translateY(100%);
}
}
@keyframes slideFromLeft {
from {
transform: translateX(-100%);
}
}
@keyframes slideToLeft {
to {
transform: translateX(-100%);
}
}
// Scale Animations
@keyframes scaleUpFromBehind {
from {
opacity:0;
transform: scale(0.5);
}
}
@keyframes scaleUpToFront {
to {
opacity:0;
transform: scale(1.3);
}
}
@keyframes scaleDownToBehind {
to {
opacity: 0;
transform: scale(0.5);
}
}
@keyframes scaleDownFromFront {
from {
opacity: 0;
transform: scale(1.3);
}
to {
opacity:1;
}
}
// Scale Down Slide Animations
@keyframes scaleDownSlideToLeft {
25% { opacity: .5; transform: translateZ(-500px); }
75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
}
@keyframes scaleDownSlideFromRight {
0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); }
75% { opacity: .5; transform: translateZ(-500px); }
100% { opacity: 1; transform: translateZ(0) translateX(0); }
}
@keyframes scaleDownSlideFromLeft {
0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
75% { opacity: .5; transform: translateZ(-500px); }
100% { opacity: 1; transform: translateZ(0) translateX(0%); }
}
@keyframes scaleDownSlideToRight {
25% { opacity: .5; transform: translateZ(-500px); }
75% { opacity: .5; transform: translateZ(-500px) translateX(200%); }
100% { opacity: .5; transform: translateZ(-500px) translateX(200%); }
}
@keyframes scaleDownSlideFromTop {
0%, 25% { opacity: .5; transform: translateZ(-500px) translateY(-200%); }
75% { opacity: .5; transform: translateZ(-500px); }
100% { opacity: 1; transform: translateZ(0) translateY(0%); }
}
@keyframes scaleDownSlideToBottom {
25% { opacity: .5; transform: translateZ(-500px); }
75% { opacity: .5; transform: translateZ(-500px) translateY(200%); }
100% { opacity: .5; transform: translateZ(-500px) translateY(200%); }
}
@keyframes scaleDownSlideFromBottom {
0%, 25% { opacity: .5; transform: translateZ(-500px) translateY(200%); }
75% { opacity: .5; transform: translateZ(-500px); }
100% { opacity: 1; transform: translateZ(0) translateY(0%); }
}
@keyframes scaleDownSlideToTop {
25% { opacity: .5; transform: translateZ(-500px); }
75% { opacity: .5; transform: translateZ(-500px) translateY(-200%); }
100% { opacity: .5; transform: translateZ(-500px) translateY(-200%); }
}
// Rotate Animations
@keyframes rotateToBehind {
to { opacity: 0; transform: translateZ(-500px) rotateY(90deg); }
}
@keyframes rotateToFront {
from { opacity: 0; transform: translateZ(-500px) rotateY(-90deg); }
}
// Flip Animations
@keyframes flipToRight {
to {
transform: rotateY(180deg);
}
}
@keyframes flipToRightBack {
from {
transform: rotateY(-180deg);
}
}
@keyframes flipToLeft {
to {
transform: rotateY(-180deg);
}
}
@keyframes flipToLeftBack {
from {
transform: rotateY(180deg);
}
}
@keyframes flipToTop {
to {
transform: rotateX(180deg);
}
}
@keyframes flipToTopBack {
from {
transform: rotateX(-180deg);
}
}
@keyframes flipToBottom {
to {
transform: rotateX(-180deg);
}
}
@keyframes flipToBottomBack {
from {
transform: rotateX(180deg);
}
}
//-----------------------------------------------------
// Utils Classes
// If you want to use it againts normal definition
//-----------------------------------------------------
// Make this page on top
.page-on-top {
z-index:999;
}
// Animation Delay Classes
.animation-delay-100 {
animation-delay: .100s;
}
.animation-delay-200 {
animation-delay: .200s;
}
.animation-delay-300 {
animation-delay: .300s;
}
.animation-delay-500 {
animation-delay: .500s;
}
.animation-delay-700 {
animation-delay: .700s;
}
.animation-delay-1000 {
animation-delay: 1000s;
}
================================================
FILE: scss/modules/positional-modals.scss
================================================
@import "../_variables";
// TODO
// - use more variables
.effeckt-positional-modal-wrap {
position: absolute;
z-index: 10;
display: none;
&.effeckt-front {
z-index: 20;
}
}
.effeckt-positional-modal-wrap {
&[data-effeckt-position="above"] {
margin-top: -15px;
.effeckt-modal {
&:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
margin-left: -10px;
border-top: 10px solid #ccc;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
}
}
&[data-effeckt-position="below"] {
margin-top: 15px;
.effeckt-modal {
&:before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
width: 0;
height: 0;
margin-left: -10px;
border-bottom: 10px solid #ccc;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
}
}
&[data-effeckt-position="right"] {
margin-left: 15px;
.effeckt-modal {
&:before {
content: "";
position: absolute;
top: 50%;
right: 100%;
width: 0;
height: 0;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #ccc;
}
}
}
&[data-effeckt-position="left"] {
margin-left: -15px;
.effeckt-modal {
&:before {
content: "";
position: absolute;
top: 50%;
left: 100%;
width: 0;
height: 0;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #ccc;
}
}
}
}
================================================
FILE: scss/modules/tabs.scss
================================================
@import "../_variables";
.effeckt-tabs-wrap {
position: relative;
ul.effeckt-tabs {
overflow: hidden; // used to be clearfix
}
.effeckt-tabs-container {
position: relative;
transition: all $effeckt-tabs-transition-duration ease-in-out;
.effeckt-tab-content {
position: absolute;
transition: all $effeckt-tabs-transition-duration/2 ease-in-out;
}
}
&[data-effeckt-type='scale'] {
.effeckt-tab-content {
&.effeckt-hide {
transform: scale(0.9);
opacity:0;
}
&.effeckt-show {
transform: scale(1);
transition-delay: 0.3s;
opacity: 1;
}
}
}
&[data-effeckt-type='scale-up'] {
.effeckt-tab-content {
&.effeckt-hide {
transform: scale(1.1);
opacity:0;
}
&.effeckt-show {
transform: scale(1);
transition-delay: 0.3s;
opacity: 1;
}
}
}
&[data-effeckt-type='slide-left'] {
.effeckt-tabs-container{
overflow:hidden;
.effeckt-tab-content {
&.effeckt-hide {
transform: translateX(-100%);
opacity:0;
}
&.effeckt-show {
transform: translateX(0%);
transition-delay: 0.3s;
opacity: 1;
}
}
}
}
&[data-effeckt-type='slide-right'] {
.effeckt-tabs-container{
overflow:hidden;
.effeckt-tab-content {
&.effeckt-hide {
transform: translateX(100%);
opacity:0;
}
&.effeckt-show {
transform: translateX(0%);
transition-delay: 0.3s;
opacity: 1;
}
}
}
}
&[data-effeckt-type='slide-up'] {
.effeckt-tabs-container{
overflow:hidden;
.effeckt-tab-content {
&.effeckt-hide {
transform: translateY(-100%);
opacity:0;
}
&.effeckt-show {
transform: translateY(0%);
transition-delay: 0.3s;
opacity: 1;
}
}
}
}
&[data-effeckt-type='slide-down'] {
.effeckt-tabs-container{
overflow:hidden;
.effeckt-tab-content {
&.effeckt-hide {
transform: translateY(100%);
opacity:0;
}
&.effeckt-show {
transform: translateX(0%);
transition-delay: 0.3s;
opacity: 1;
}
}
}
}
&[data-effeckt-type='flip'] {
.effeckt-tabs-container{
overflow:hidden;
.effeckt-tab-content {
&.effeckt-hide {
transform: rotateY(-90deg) scale(1.1);
opacity:0;
}
&.effeckt-show {
transform: rotateY(0deg) scale(1);
transition-delay: 0.3s;
opacity: 1;
}
}
}
}
}
================================================
FILE: scss/modules/tooltips.scss
================================================
// TODO
// Use variables where we can in here
// Adjust position based on $effeckt-tooltip-arrow-size
@import "../_variables";
// Basic .effeck-tooltip
.effeckt-tooltip[data-effeckt-tooltip-text] {
position: relative;
// make tooltip text to be always on the same line
// this prevent out of position tooltip
display: inline-block;
&::before, &::after {
opacity: 0;
transition: $effeckt-tooltip-transition-delay; // no delay on hover off
}
&:hover::before, &:hover::after {
visibility: visible;
opacity: 1;
transition: $effeckt-tooltip-transition-delay $effeckt-tooltip-transition-duration; // slight delay on hover on
}
}
// tooltip bubble
.effeckt-tooltip[data-effeckt-type="bubble"]{
&::after { // text of tooltip
content: attr(data-effeckt-tooltip-text);
position: absolute;
border-radius: 10px;
background: $effeckt-tooltip-background;
color: $effeckt-tooltip-forground;
padding: 0.45rem 0.8rem;
font-size: 90%;
white-space: nowrap;
visibility: hidden; // makes un-hoverable when hidden (opacity alone doesn't work)
z-index: 2; //prevent collapse between another tooltip
}
&::before { // triangle / speech bubble arrow
content: "";
width: 0;
height: 0;
position: absolute;
}
}
// bubble top and bottom
.effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="top"],
.effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="bottom"] {
&::after {
transform: translateX(-50%); // horizontal centering
left:50%;
}
&:before {
left: 50%;
margin-left: -5px;
}
}
// bubble orientation top
.effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="top"] {
&::after, &::before {
bottom: 125%;
}
&::before {
border-top: $effeckt-tooltip-arrow-size solid $effeckt-tooltip-background;
border-left: $effeckt-tooltip-arrow-size solid transparent;
border-right: $effeckt-tooltip-arrow-size solid transparent;
margin-bottom: -($effeckt-tooltip-arrow-size - 1); // one less pixel to prevent occational 1px gap
}
&:hover::before, &:hover::after {
bottom: 115%;
}
}
// bubble orientation bottom
.effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="bottom"] {
&::after, &::before {
top: 125%;
}
&::before {
border-bottom: $effeckt-tooltip-arrow-size solid $effeckt-tooltip-background;
border-left: $effeckt-tooltip-arrow-size solid transparent;
border-right: $effeckt-tooltip-arrow-size solid transparent;
margin-top: -($effeckt-tooltip-arrow-size - 1); // one less pixel to prevent occational 1px gap
}
&:hover::before, &:hover::after {
top: 115%;
}
}
// bubble top and bottom
.effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="right"],
.effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="left"] {
&::after, &:before {
top:45%;
transform: translateY(-45%); // half font-size size
margin-top:2px;
}
}
// bubble orientation right
.effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="right"] {
&::after, &::before {
left: 115%;
}
&::before {
border-right: $effeckt-tooltip-arrow-size solid $effeckt-tooltip-background;
border-top: $effeckt-tooltip-arrow-size solid transparent;
border-bottom: $effeckt-tooltip-arrow-size solid transparent;
margin-left: -($effeckt-tooltip-arrow-size - 1); // one less pixel to prevent occational 1px gap
}
&:hover::before, &:hover::after {
left: 105%;
}
}
// bubble orientation left
.effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="left"] {
&::after, &::before {
right: 115%;
}
&::before {
border-left: $effeckt-tooltip-arrow-size solid $effeckt-tooltip-background;
border-top: $effeckt-tooltip-arrow-size solid transparent;
border-bottom: $effeckt-tooltip-arrow-size solid transparent;
margin-right: -($effeckt-tooltip-arrow-size - 1); // one less pixel to prevent occational 1px gap
}
&:hover::before, &:hover::after {
right: 105%;
}
}
================================================
FILE: src/templates/layouts/layout.hbs
================================================
- It provides very little UI of its own. It's only hooks for transitions/animations.
- Designer-curated set of classy and reasonable effects. (no
easeInBounce) - Establish browser support guidelines (e.g. Android 2.3 would gracefully degrade)
- CSS performance regression testing (a la bench.topcoat.io)
- Deliver jank-free 60fps performance on target browsers/devices
- If a particular effect cannot deliver target performance (hey
blur()CSS filter), it cannot be included. - Guidelines on what to avoid when styling these affected elements (avoid expensive CSS)
- Deliver a builder so users can pull only the CSS they need.
- There is no hover on the mobile web, so any hover-based effects would be excluded or have a tap equivalent.
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- ELEMENT
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
- Nine
- Ten
- Eleven
- Twelve
- Thirteen
- Fourteen
- Fifteen
- Sixteen
- Seventeen
- Eighteen
- Nineteen
- Twenty
- Twentyone
- Twentytwo
- Twentythree
- Twentyfour
- Twentyfive
- Twentysix
- Twentyseven
- Twentyeight
- Twentynine
- Thirty
- Thirtyone
- Thirtytwo
- Thirtythree
- Thirtyfour
- Thirtyfive
- Thirtysix
- Thirtyseven
- Thirtyeight
- Thirtynine
- Forty
- Fortyone
- Fortytwo
- Fortythree
- Fortyfour
- Fortyfive
- Fortysix
- Fortyseven
- Fortyeight
- Fortynine
- Fifty
- Fiftyone
- Fiftytwo
- Fiftythree
- Fiftyfour
- Fiftyfive
- Fiftysix
- Fiftyseven
- Fiftyeight
- Fiftynine
- Sixty
- Sixtyone
- Sixtytwo
- Sixtythree
- Sixtyfour
- Sixtyfive
- Sixtysix
- Sixtyseven
- Sixtyeight
- Sixtynine
- Seventy
- Seventyone
- Seventytwo
- Seventythree
- Seventyfour
- Seventyfive
- Seventysix
- Seventyseven
- Seventyeight
- Seventynine
- Eighty
- Eightyone
- Eightytwo
- Eightythree
- Eightyfour
- Eightyfive
- Eightysix
- Eightyseven
- Eightyeight
- Eightynine
- Ninety
- Ninetyone
- Ninetytwo
- Ninetythree
- Ninetyfour
- Ninetyfive
- Ninetysix
- Ninetyseven
- Ninetyeight
- Ninetynine
- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
- Nine
- Ten
- Eleven
- Twelve
- Thirteen
- Fourteen
- Fifteen
- Sixteen
- Seventeen
- Eighteen
- Nineteen
- Twenty
- Twentyone
- Twentytwo
- Twentythree
- Twentyfour
- Twentyfive
- Twentysix
- Twentyseven
- Twentyeight
- Twentynine
- Thirty
- Thirtyone
- Thirtytwo
- Thirtythree
- Thirtyfour
- Thirtyfive
- Thirtysix
- Thirtyseven
- Thirtyeight
- Thirtynine
- Forty
- Fortyone
- Fortytwo
- Fortythree
- Fortyfour
- Fortyfive
- Fortysix
- Fortyseven
- Fortyeight
- Fortynine
- Fifty
- Fiftyone
- Fiftytwo
- Fiftythree
- Fiftyfour
- Fiftyfive
- Fiftysix
- Fiftyseven
- Fiftyeight
- Fiftynine
- Sixty
- Sixtyone
- Sixtytwo
- Sixtythree
- Sixtyfour
- Sixtyfive
- Sixtysix
- Sixtyseven
- Sixtyeight
- Sixtynine
- Seventy
- Seventyone
- Seventytwo
- Seventythree
- Seventyfour
- Seventyfive
- Seventysix
- Seventyseven
- Seventyeight
- Seventynine
- Eighty
- Eightyone
- Eightytwo
- Eightythree
- Eightyfour
- Eightyfive
- Eightysix
- Eightyseven
- Eightyeight
- Eightynine
- Ninety
- Ninetyone
- Ninetytwo
- Ninetythree
- Ninetyfour
- Ninetyfive
- Ninetysix
- Ninetyseven
- Ninetyeight
- Ninetynine
- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
- Nine
- Ten
- Eleven
- Twelve
- Thirteen
- Fourteen
- Fifteen
- Sixteen
- Seventeen
- Eighteen
- Nineteen
- Twenty
- Twentyone
- Twentytwo
- Twentythree
- Twentyfour
- Twentyfive
- Twentysix
- Twentyseven
- Twentyeight
- Twentynine
- Thirty
- Thirtyone
- Thirtytwo
- Thirtythree
- Thirtyfour
- Thirtyfive
- Thirtysix
- Thirtyseven
- Thirtyeight
- Thirtynine
- Forty
- Fortyone
- Fortytwo
- Fortythree
- Fortyfour
- Fortyfive
- Fortysix
- Fortyseven
- Fortyeight
- Fortynine
- Fifty
- Fiftyone
- Fiftytwo
- Fiftythree
- Fiftyfour
- Fiftyfive
- Fiftysix
- Fiftyseven
- Fiftyeight
- Fiftynine
- Sixty
- Sixtyone
- Sixtytwo
- Sixtythree
- Sixtyfour
- Sixtyfive
- Sixtysix
- Sixtyseven
- Sixtyeight
- Sixtynine
- Seventy
- Seventyone
- Seventytwo
- Seventythree
- Seventyfour
- Seventyfive
- Seventysix
- Seventyseven
- Seventyeight
- Seventynine
- Eighty
- Eightyone
- Eightytwo
- Eightythree
- Eightyfour
- Eightyfive
- Eightysix
- Eightyseven
- Eightyeight
- Eightynine
- Ninety
- Ninetyone
- Ninetytwo
- Ninetythree
- Ninetyfour
- Ninetyfive
- Ninetysix
- Ninetyseven
- Ninetyeight
- Ninetynine
- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
- Nine
- Ten
- Eleven
- Twelve
- Thirteen
- Fourteen
- Fifteen
- Sixteen
- Seventeen
- Eighteen
- Nineteen
- Twenty
- Twentyone
- Twentytwo
- Twentythree
- Twentyfour
- Twentyfive
- Twentysix
- Twentyseven
- Twentyeight
- Twentynine
- Thirty
- Thirtyone
- Thirtytwo
- Thirtythree
- Thirtyfour
- Thirtyfive
- Thirtysix
- Thirtyseven
- Thirtyeight
- Thirtynine
- Forty
- Fortyone
- Fortytwo
- Fortythree
- Fortyfour
- Fortyfive
- Fortysix
- Fortyseven
- Fortyeight
- Fortynine
- Fifty
- Fiftyone
- Fiftytwo
- Fiftythree
- Fiftyfour
- Fiftyfive
- Fiftysix
- Fiftyseven
- Fiftyeight
- Fiftynine
- Sixty
- Sixtyone
- Sixtytwo
- Sixtythree
- Sixtyfour
- Sixtyfive
- Sixtysix
- Sixtyseven
- Sixtyeight
- Sixtynine
- Seventy
- Seventyone
- Seventytwo
- Seventythree
- Seventyfour
- Seventyfive
- Seventysix
- Seventyseven
- Seventyeight
- Seventynine
- Eighty
- Eightyone
- Eightytwo
- Eightythree
- Eightyfour
- Eightyfive
- Eightysix
- Eightyseven
- Eightyeight
- Eightynine
- Ninety
- Ninetyone
- Ninetytwo
- Ninetythree
- Ninetyfour
- Ninetyfive
- Ninetysix
- Ninetyseven
- Ninetyeight
- Ninetynine
- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
- Nine
- Ten
- Eleven
- Twelve
- Thirteen
- Fourteen
- Fifteen
- Sixteen
- Seventeen
- Eighteen
- Nineteen
- Twenty
- Twentyone
- Twentytwo
- Twentythree
- Twentyfour
- Twentyfive
- Twentysix
- Twentyseven
- Twentyeight
- Twentynine
- Thirty
- Thirtyone
- Thirtytwo
- Thirtythree
- Thirtyfour
- Thirtyfive
- Thirtysix
- Thirtyseven
- Thirtyeight
- Thirtynine
- Forty
- Fortyone
- Fortytwo
- Fortythree
- Fortyfour
- Fortyfive
- Fortysix
- Fortyseven
- Fortyeight
- Fortynine
- Fifty
- Fiftyone
- Fiftytwo
- Fiftythree
- Fiftyfour
- Fiftyfive
- Fiftysix
- Fiftyseven
- Fiftyeight
- Fiftynine
- Sixty
- Sixtyone
- Sixtytwo
- Sixtythree
- Sixtyfour
- Sixtyfive
- Sixtysix
- Sixtyseven
- Sixtyeight
- Sixtynine
- Seventy
- Seventyone
- Seventytwo
- Seventythree
- Seventyfour
- Seventyfive
- Seventysix
- Seventyseven
- Seventyeight
- Seventynine
- Eighty
- Eightyone
- Eightytwo
- Eightythree
- Eightyfour
- Eightyfive
- Eightysix
- Eightyseven
- Eightyeight
- Eightynine
- Ninety
- Ninetyone
- Ninetytwo
- Ninetythree
- Ninetyfour
- Ninetyfive
- Ninetysix
- Ninetyseven
- Ninetyeight
- Ninetynine
- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
- Nine
- Ten
- Eleven
- Twelve
- Thirteen
- Fourteen
- Fifteen
- Sixteen
- Seventeen
- Eighteen
- Nineteen
- Twenty
- Twentyone
- Twentytwo
- Twentythree
- Twentyfour
- Twentyfive
- Twentysix
- Twentyseven
- Twentyeight
- Twentynine
- Thirty
- Thirtyone
- Thirtytwo
- Thirtythree
- Thirtyfour
- Thirtyfive
- Thirtysix
- Thirtyseven
- Thirtyeight
- Thirtynine
- Forty
- Fortyone
- Fortytwo
- Fortythree
- Fortyfour
- Fortyfive
- Fortysix
- Fortyseven
- Fortyeight
- Fortynine
- Fifty
- Fiftyone
- Fiftytwo
- Fiftythree
- Fiftyfour
- Fiftyfive
- Fiftysix
- Fiftyseven
- Fiftyeight
- Fiftynine
- Sixty
- Sixtyone
- Sixtytwo
- Sixtythree
- Sixtyfour
- Sixtyfive
- Sixtysix
- Sixtyseven
- Sixtyeight
- Sixtynine
- Seventy
- Seventyone
- Seventytwo
- Seventythree
- Seventyfour
- Seventyfive
- Seventysix
- Seventyseven
- Seventyeight
- Seventynine
- Eighty
- Eightyone
- Eightytwo
- Eightythree
- Eightyfour
- Eightyfive
- Eightysix
- Eightyseven
- Eightyeight
- Eightynine
- Ninety
- Ninetyone
- Ninetytwo
- Ninetythree
- Ninetyfour
- Ninetyfive
- Ninetysix
- Ninetyseven
- Ninetyeight
- Ninetynine
- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
- Nine
- Ten
- Eleven
- Twelve
- Thirteen
- Fourteen
- Fifteen
- Sixteen
- Seventeen
- Eighteen
- Nineteen
- Twenty
- Twentyone
- Twentytwo
- Twentythree
- Twentyfour
- Twentyfive
- Twentysix
- Twentyseven
- Twentyeight
- Twentynine
- Thirty
- Thirtyone
- Thirtytwo
- Thirtythree
- Thirtyfour
- Thirtyfive
- Thirtysix
- Thirtyseven
- Thirtyeight
- Thirtynine
- Forty
- Fortyone
- Fortytwo
- Fortythree
- Fortyfour
- Fortyfive
- Fortysix
- Fortyseven
- Fortyeight
- Fortynine
- Fifty
- Fiftyone
- Fiftytwo
- Fiftythree
- Fiftyfour
- Fiftyfive
- Fiftysix
- Fiftyseven
- Fiftyeight
- Fiftynine
- Sixty
- Sixtyone
- Sixtytwo
- Sixtythree
- Sixtyfour
- Sixtyfive
- Sixtysix
- Sixtyseven
- Sixtyeight
- Sixtynine
- Seventy
- Seventyone
- Seventytwo
- Seventythree
- Seventyfour
- Seventyfive
- Seventysix
- Seventyseven
- Seventyeight
- Seventynine
- Eighty
- Eightyone
- Eightytwo
- Eightythree
- Eightyfour
- Eightyfive
- Eightysix
- Eightyseven
- Eightyeight
- Eightynine
- Ninety
- Ninetyone
- Ninetytwo
- Ninetythree
- Ninetyfour
- Ninetyfive
- Ninetysix
- Ninetyseven
- Ninetyeight
- Ninetynine
- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
- Nine
- Ten
- Eleven
- Twelve
- Thirteen
- Fourteen
- Fifteen
- Sixteen
- Seventeen
- Eighteen
- Nineteen
- Twenty
- Twentyone
- Twentytwo
- Twentythree
- Twentyfour
- Twentyfive
- Twentysix
- Twentyseven
- Twentyeight
- Twentynine
- Thirty
- Thirtyone
- Thirtytwo
- Thirtythree
- Thirtyfour
- Thirtyfive
- Thirtysix
- Thirtyseven
- Thirtyeight
- Thirtynine
- Forty
- Fortyone
- Fortytwo
- Fortythree
- Fortyfour
- Fortyfive
- Fortysix
- Fortyseven
- Fortyeight
- Fortynine
- Fifty
- Fiftyone
- Fiftytwo
- Fiftythree
- Fiftyfour
- Fiftyfive
- Fiftysix
- Fiftyseven
- Fiftyeight
- Fiftynine
- Sixty
- Sixtyone
- Sixtytwo
- Sixtythree
- Sixtyfour
- Sixtyfive
- Sixtysix
- Sixtyseven
- Sixtyeight
- Sixtynine
- Seventy
- Seventyone
- Seventytwo
- Seventythree
- Seventyfour
- Seventyfive
- Seventysix
- Seventyseven
- Seventyeight
- Seventynine
- Eighty
- Eightyone
- Eightytwo
- Eightythree
- Eightyfour
- Eightyfive
- Eightysix
- Eightyseven
- Eightyeight
- Eightynine
- Ninety
- Ninetyone
- Ninetytwo
- Ninetythree
- Ninetyfour
- Ninetyfive
- Ninetysix
- Ninetyseven
- Ninetyeight
- Ninetynine
- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
- Nine
- Ten
- Eleven
- Twelve
- Thirteen
- Fourteen
- Fifteen
- Sixteen
- Seventeen
- Eighteen
- Nineteen
- Twenty
- Twentyone
- Twentytwo
- Twentythree
- Twentyfour
- Twentyfive
- Twentysix
- Twentyseven
- Twentyeight
- Twentynine
- Thirty
- Thirtyone
- Thirtytwo
- Thirtythree
- Thirtyfour
- Thirtyfive
- Thirtysix
- Thirtyseven
- Thirtyeight
- Thirtynine
- Forty
- Fortyone
- Fortytwo
- Fortythree
- Fortyfour
- Fortyfive
- Fortysix
- Fortyseven
- Fortyeight
- Fortynine
- Fifty
- Fiftyone
- Fiftytwo
- Fiftythree
- Fiftyfour
- Fiftyfive
- Fiftysix
- Fiftyseven
- Fiftyeight
- Fiftynine
- Sixty
- Sixtyone
- Sixtytwo
- Sixtythree
- Sixtyfour
- Sixtyfive
- Sixtysix
- Sixtyseven
- Sixtyeight
- Sixtynine
- Seventy
- Seventyone
- Seventytwo
- Seventythree
- Seventyfour
- Seventyfive
- Seventysix
- Seventyseven
- Seventyeight
- Seventynine
- Eighty
- Eightyone
- Eightytwo
- Eightythree
- Eightyfour
- Eightyfive
- Eightysix
- Eightyseven
- Eightyeight
- Eightynine
- Ninety
- Ninetyone
- Ninetytwo
- Ninetythree
- Ninetyfour
- Ninetyfive
- Ninetysix
- Ninetyseven
- Ninetyeight
- Ninetynine
- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
- Nine
- Ten
- Eleven
- Twelve
- Thirteen
- Fourteen
- Fifteen
- Sixteen
- Seventeen
- Eighteen
- Nineteen
- Twenty
- Twentyone
- Twentytwo
- Twentythree
- Twentyfour
- Twentyfive
- Twentysix
- Twentyseven
- Twentyeight
- Twentynine
- Thirty
- Thirtyone
- Thirtytwo
- Thirtythree
- Thirtyfour
- Thirtyfive
- Thirtysix
- Thirtyseven
- Thirtyeight
- Thirtynine
- Forty
- Fortyone
- Fortytwo
- Fortythree
- Fortyfour
- Fortyfive
- Fortysix
- Fortyseven
- Fortyeight
- Fortynine
- Fifty
- Fiftyone
- Fiftytwo
- Fiftythree
- Fiftyfour
- Fiftyfive
- Fiftysix
- Fiftyseven
- Fiftyeight
- Fiftynine
- Sixty
- Sixtyone
- Sixtytwo
- Sixtythree
- Sixtyfour
- Sixtyfive
- Sixtysix
- Sixtyseven
- Sixtyeight
- Sixtynine
- Seventy
- Seventyone
- Seventytwo
- Seventythree
- Seventyfour
- Seventyfive
- Seventysix
- Seventyseven
- Seventyeight
- Seventynine
- Eighty
- Eightyone
- Eightytwo
- Eightythree
- Eightyfour
- Eightyfive
- Eightysix
- Eightyseven
- Eightyeight
- Eightynine
- Ninety
- Ninetyone
- Ninetytwo
- Ninetythree
- Ninetyfour
- Ninetyfive
- Ninetysix
- Ninetyseven
- Ninetyeight
- Ninetynine
- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
- Nine
- Ten
- Eleven
- Twelve
- Thirteen
- Fourteen
- Fifteen
- Sixteen
- Seventeen
- Eighteen
- Nineteen
- Twenty
- Twentyone
- Twentytwo
- Twentythree
- Twentyfour
- Twentyfive
- Twentysix
- Twentyseven
- Twentyeight
- Twentynine
- Thirty
- Thirtyone
- Thirtytwo
- Thirtythree
- Thirtyfour
- Thirtyfive
- Thirtysix
- Thirtyseven
- Thirtyeight
- Thirtynine
- Forty
- Fortyone
- Fortytwo
- Fortythree
- Fortyfour
- Fortyfive
- Fortysix
- Fortyseven
- Fortyeight
- Fortynine
- Fifty
- Fiftyone
- Fiftytwo
- Fiftythree
- Fiftyfour
- Fiftyfive
- Fiftysix
- Fiftyseven
- Fiftyeight
- Fiftynine
- Sixty
- Sixtyone
- Sixtytwo
- Sixtythree
- Sixtyfour
- Sixtyfive
- Sixtysix
- Sixtyseven
- Sixtyeight
- Sixtynine
- Seventy
- Seventyone
- Seventytwo
- Seventythree
- Seventyfour
- Seventyfive
- Seventysix
- Seventyseven
- Seventyeight
- Seventynine
- Eighty
- Eightyone
- Eightytwo
- Eightythree
- Eightyfour
- Eightyfive
- Eightysix
- Eightyseven
- Eightyeight
- Eightynine
- Ninety
- Ninetyone
- Ninetytwo
- Ninetythree
- Ninetyfour
- Ninetyfive
- Ninetysix
- Ninetyseven
- Ninetyeight
- Ninetynine
- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
- Nine
- Ten
- Eleven
- Twelve
- Thirteen
- Fourteen
- Fifteen
- Sixteen
- Seventeen
- Eighteen
- Nineteen
- Twenty
- Twentyone
- Twentytwo
- Twentythree
- Twentyfour
- Twentyfive
- Twentysix
- Twentyseven
- Twentyeight
- Twentynine
- Thirty
- Thirtyone
- Thirtytwo
- Thirtythree
- Thirtyfour
- Thirtyfive
- Thirtysix
- Thirtyseven
- Thirtyeight
- Thirtynine
- Forty
- Fortyone
- Fortytwo
- Fortythree
- Fortyfour
- Fortyfive
- Fortysix
- Fortyseven
- Fortyeight
- Fortynine
- Fifty
- Fiftyone
- Fiftytwo
- Fiftythree
- Fiftyfour
- Fiftyfive
- Fiftysix
- Fiftyseven
- Fiftyeight
- Fiftynine
- Sixty
- Sixtyone
- Sixtytwo
- Sixtythree
- Sixtyfour
- Sixtyfive
- Sixtysix
- Sixtyseven
- Sixtyeight
- Sixtynine
- Seventy
- Seventyone
- Seventytwo
- Seventythree
- Seventyfour
- Seventyfive
- Seventysix
- Seventyseven
- Seventyeight
- Seventynine
- Eighty
- Eightyone
- Eightytwo
- Eightythree
- Eightyfour
- Eightyfive
- Eightysix
- Eightyseven
- Eightyeight
- Eightynine
- Ninety
- Ninetyone
- Ninetytwo
- Ninetythree
- Ninetyfour
- Ninetyfive
- Ninetysix
- Ninetyseven
- Ninetyeight
- Ninetynine
Work in Progress! Not quite ready for prime-time
{{> off-screen-nav}}
{{> page-transition}}
{{> modal}}
E
f
f
e
c
k
t
.
c
s
s
About
Ever notice how small flourishes and subtle transitions dramatically increases the value of the experience you enjoy with an app or site?
Designing and developing UIs for the mobile web is tricky, but it's extremely difficult to do that while delivering something that performs at 60fps. The best opportunities to getting jank-free transitions on phones/tablets are CSS transition and keyframe animation based, especially tapping into hardware-accelerated transforms and opacity changes.
This library has a few goals:
Contributors
Page Transition From Left
This is another page.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro nulla unde doloremque consequuntur illum quo dolor. Tenetur, voluptate temporibus fuga labore atque illum quas vel dignissimos impedit vitae corporis itaque!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, sunt tempora perspiciatis officia laudantium voluptas dicta! Nesciunt, magnam nostrum velit iste beatae totam voluptatibus sint quas amet modi architecto labore.
Page Transition From Right
This is another page.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, accusamus, aliquam error excepturi asperiores ipsum nobis molestias neque molestiae illum magnam mollitia nulla temporibus aliquid esse rem amet cumque facilis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, temporibus, ducimus architecto quidem voluptatem sint maiores atque deserunt sed aspernatur eveniet vel perferendis corrupti impedit aut voluptates neque similique enim.
Page Transition From Bottom
This is another page.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, accusamus, aliquam error excepturi asperiores ipsum nobis molestias neque molestiae illum magnam mollitia nulla temporibus aliquid esse rem amet cumque facilis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, temporibus, ducimus architecto quidem voluptatem sint maiores atque deserunt sed aspernatur eveniet vel perferendis corrupti impedit aut voluptates neque similique enim.
Page Transition From Top
This is another page.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, accusamus, aliquam error excepturi asperiores ipsum nobis molestias neque molestiae illum magnam mollitia nulla temporibus aliquid esse rem amet cumque facilis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, temporibus, ducimus architecto quidem voluptatem sint maiores atque deserunt sed aspernatur eveniet vel perferendis corrupti impedit aut voluptates neque similique enim.
Captions #
Appear
Lorem ipsum dolar.
Quarter Slide Up
Lorem ipsum dolar.
Quarter Slide Side
Lorem ipsum dolar.
Quarter Fall in
Lorem ipsum dolar.
Quarter Two-step
Lorem ipsum dolar.
Quarter Caption Zoom
Lorem ipsum dolar.
Cover Fade
Lorem ipsum dolar.
Cover Push Right
Lorem ipsum dolar.
Revolving Door
Lorem ipsum dolar.
Revolving Door Inverse
Lorem ipsum dolar.
Revolving Door
Lorem ipsum dolar.
Revolving Door Inverse
Lorem ipsum dolar.
Cover Slide Top
Lorem ipsum dolar.
Caption Offset
Lorem ipsum dolar.
Guillotine Reverse
Lorem ipsum dolar.
Half Slide
Lorem ipsum dolar.
Sqkwoosh
Lorem ipsum dolar.
Tunnel
Lorem ipsum dolar.
Grid Loading #
Source: tympanusList Items #
Source: CSS-TricksGap, Slide In/Slide Out
Expand In/Shrink Out
Wobble In/Wobble Out
Flip In/Flip Out
Fall In/Fall Off
From Above/To Above
Fall In/Wobble Out
Bouncy Slide In/Slide, Fall Off
List Scroll #
Source: Hakim El HattabOff Screen Nav #
Page Transitions #
Positional Modals #
Tabs #
Source: TabulousProin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.
Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.
Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.
Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.
Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.
Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.
Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.
Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.
Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.
Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.
Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.
Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.
Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.
Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.
Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.
Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.
Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.
Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.
Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.
Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.
Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.
Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.
Tooltips #
Lorem ipsum example one dolor sit amet, consectetur adipisicing elit. Unde, dolor, example two ipsa, dolorem officia expedita error example three vel blanditiis tempore molestias voluptatem ducimus porro example four recusandae quo ex quisquam voluptas iure! Amet, dignissimos.
Modal Dialog
Page Transition
This is another page.