Project-Pro/drmaterac.pl
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a69616e8ce146cfe775b17f6546bdb61022632fc
drmaterac.pl/modules/advancedpopupcreator/lib/fancybox/jquery.fancybox-transitions.css
Jacek Pyziak f34c9162d4 update
2025-03-21 20:24:43 +01:00

473 lines
12 KiB
CSS
Raw Blame History

/*
* NOTICE OF LICENSE
*
* This product is licensed for one customer to use on one installation (test stores and multishop included).
* Site developer has the right to modify this module to suit their needs, but can not redistribute the module in
* whole or in part. Any other use of this module constitutes a violation of the user agreement.
*
* DISCLAIMER
*
* NO WARRANTIES OF DATA SAFETY OR MODULE SECURITY
* ARE EXPRESSED OR IMPLIED. USE THIS MODULE IN ACCORDANCE
* WITH YOUR MERCHANT AGREEMENT, KNOWING THAT VIOLATIONS OF
* PCI COMPLIANCY OR A DATA BREACH CAN COST THOUSANDS OF DOLLARS
* IN FINES AND DAMAGE A STORES REPUTATION. USE AT YOUR OWN RISK.
*
* @author idnovate.com <info@idnovate.com>
* @copyright 2022 idnovate.com
* @license See above
*/
/**
* https://github.com/tomlagier/fancybox-transitions
* name: FancyBox Transitions
* file: jquery.fancybox-transitions.css
* version: 0.1
* author: Thomas Lagier
* description: Adds CSS3 open/close transitions for FancyBox 2.
* license: MIT
* date: April 25, 2014
*/
/* Effect 1: Fade in and scale up */
.fadescale{
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
}
.fadescale-transitions{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.fadescale.show{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
/* Effect 2: Slide from the right */
.slideright {
-webkit-transform: translateX(20%);
-moz-transform: translateX(20%);
-ms-transform: translateX(20%);
transform: translateX(20%);
opacity: 0;
}
.slideright-transitions{
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
-moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.slideright.show {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
/* Effect 3: Slide from the bottom */
.slidebottom {
-webkit-transform: translateY(20%);
-moz-transform: translateY(20%);
-ms-transform: translateY(20%);
transform: translateY(20%);
opacity: 0;
}
.slidebottom-transitions{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.slidebottom.show {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
/* Effect 4: Newspaper */
.newspaper {
-webkit-transform: scale(0) rotate(720deg);
-moz-transform: scale(0) rotate(720deg);
-ms-transform: scale(0) rotate(720deg);
transform: scale(0) rotate(720deg);
opacity: 0;
}
.newspaper-transitions {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.newspaper.show {
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
opacity: 1;
}
/* Effect 5: fall */
.fall {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
.fall > *:first-child{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(600px) rotateX(20deg);
-moz-transform: translateZ(600px) rotateX(20deg);
-ms-transform: translateZ(600px) rotateX(20deg);
transform: translateZ(600px) rotateX(20deg);
opacity: 0;
}
.fall.show > *:first-child {
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
-webkit-transform: translateZ(0px) rotateX(0deg);
-moz-transform: translateZ(0px) rotateX(0deg);
-ms-transform: translateZ(0px) rotateX(0deg);
transform: translateZ(0px) rotateX(0deg);
opacity: 1;
}
/* Effect 6: Side fall */
.sidefall {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
.sidefall > *:first-child {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate(30%) translateZ(600px) rotate(10deg);
-moz-transform: translate(30%) translateZ(600px) rotate(10deg);
-ms-transform: translate(30%) translateZ(600px) rotate(10deg);
transform: translate(30%) translateZ(600px) rotate(10deg);
opacity: 0;
}
.sidefall.show > *:first-child {
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
-webkit-transform: translate(0%) translateZ(0) rotate(0deg);
-moz-transform: translate(0%) translateZ(0) rotate(0deg);
-ms-transform: translate(0%) translateZ(0) rotate(0deg);
transform: translate(0%) translateZ(0) rotate(0deg);
opacity: 1;
}
/* Effect 7: slide and stick to top */
.stickyup{
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
opacity: 0;
}
.stickyup-transitions{
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.stickyup.show {
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
border-radius: 0 0 3px 3px;
opacity: 1;
}
/* Effect 8: 3D flip horizontal */
.horizflip {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
.horizflip > *:first-child{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateY(-70deg);
-moz-transform: rotateY(-70deg);
-ms-transform: rotateY(-70deg);
transform: rotateY(-70deg);
}
.horizflip-transitions > *:first-child {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}
.horizflip.show > *:first-child {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
opacity: 1;
}
/* Effect 9: 3D flip vertical */
.vertflip {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
.vertflip > *:first-child{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-70deg);
-moz-transform: rotateX(-70deg);
-ms-transform: rotateX(-70deg);
transform: rotateX(-70deg);
opacity: 0;
}
.vertflip-transitions > *:first-child{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.vertflip.show > *:first-child {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
opacity: 1;
}
/* Effect 10: 3D sign */
.sign {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
.sign > *:first-child {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-60deg);
-moz-transform: rotateX(-60deg);
-ms-transform: rotateX(-60deg);
transform: rotateX(-60deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
opacity: 0;
}
.sign-transitions > *:first-child{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.sign.show > *:first-child {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
opacity: 1;
}
/* Effect 11: Super-scaled */
.superscale {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
opacity: 0;
}
.superscale-transitions{
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
-ms-transition: -ms-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
.superscale.show{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
/* Effect 13: 3D slit */
.slit {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
.slit > *:first-child {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-3000px) rotateY(90deg);
-moz-transform: translateZ(-3000px) rotateY(90deg);
-ms-transform: translateZ(-3000px) rotateY(90deg);
transform: translateZ(-3000px) rotateY(90deg);
opacity: 0;
}
.slit.show > *:first-child {
-webkit-animation: slit .7s forwards ease-out;
-moz-animation: slit .7s forwards ease-out;
animation: slit .7s forwards ease-out;
}
@-webkit-keyframes slit {
50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;}
100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; }
}
@-moz-keyframes slit {
50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;}
100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; }
}
@keyframes slit {
50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}
100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
}
/* Effect 14: 3D Rotate from bottom */
.rotatebottom {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
.rotatebottom-transitions > *:first-child {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.rotatebottom > *:first-child {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateY(100%) rotateX(90deg);
-moz-transform: translateY(100%) rotateX(90deg);
-ms-transform: translateY(100%) rotateX(90deg);
transform: translateY(100%) rotateX(90deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
transform-origin: 0 100%;
opacity: 0;
}
.rotatebottom.show > *:first-child {
-webkit-transform: translateY(0%) rotateX(0deg);
-moz-transform: translateY(0%) rotateX(0deg);
-ms-transform: translateY(0%) rotateX(0deg);
transform: translateY(0%) rotateX(0deg);
opacity: 1;
}
/* Effect 15: 3D Rotate in from left */
.rotateleft {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
.rotateleft-transitions > *:first-child {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.rotateleft > *:first-child {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
-moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
-ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
transform: translateZ(100px) translateX(-30%) rotateY(90deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
transform-origin: 0 100%;
opacity: 0;
}
.rotateleft.show > *:first-child{
-webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);
-moz-transform: translateZ(0px) translateX(0%) rotateY(0deg);
-ms-transform: translateZ(0px) translateX(0%) rotateY(0deg);
transform: translateZ(0px) translateX(0%) rotateY(0deg);
opacity: 1;
}
/* Effect 16: Blur */
.blur-overlay {
background: rgba(0,0,0,0.5);
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
filter: blur(3px);
}
.blur{
-webkit-transform: translateY(-5%);
-moz-transform: translateY(-5%);
-ms-transform: translateY(-5%);
transform: translateY(-5%);
opacity: 0;
}
.blur-transitions{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.blur.show{
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
Reference in New Issue View Git Blame Copy Permalink