From 82e21b47570acf230163f321040e723e92756e79 Mon Sep 17 00:00:00 2001 From: Daniel Abel Date: Sun, 12 Feb 2023 11:52:47 -0500 Subject: [PATCH] refactor: customizable duration --- main.css | 26 +++++++++++++------------- main.min.css | 2 +- scss/_core.scss | 2 +- scss/_variables.scss | 9 +++++---- scss/effects/_back.scss | 2 +- scss/effects/_blinds.scss | 8 ++++---- scss/effects/_flip.scss | 12 ++++++------ scss/effects/_push.scss | 2 +- 8 files changed, 32 insertions(+), 31 deletions(-) diff --git a/main.css b/main.css index b628851..ab426b9 100644 --- a/main.css +++ b/main.css @@ -11,7 +11,7 @@ [class*=img-] figcaption, [class*=img-] figcaption::before, [class*=img-] figcaption::after { - transition-duration: 0.6s; + transition-duration: 2s; transition-property: opacity, transform; transition-timing-function: cubic-bezier(0.54, 0, 0.1, 1); } @@ -54,7 +54,7 @@ } [class*=img-push]:hover img { - transition-duration: 0.8s; + transition-duration: 2.5s; } [class*=img-push] figcaption { z-index: -1; @@ -130,10 +130,10 @@ opacity: 0; } .img-flip-x:hover figcaption { - transition-delay: 0.2s; + transition-delay: 0.8s; } .img-flip-x:not(:hover) img { - transition-delay: 0.2s; + transition-delay: 0.8s; } .img-flip-x:not(:hover) figcaption { transform: rotateX(90deg); @@ -146,10 +146,10 @@ opacity: 0; } .img-flip-y:hover figcaption { - transition-delay: 0.2s; + transition-delay: 0.8s; } .img-flip-y:not(:hover) img { - transition-delay: 0.2s; + transition-delay: 0.8s; } .img-flip-y:not(:hover) figcaption { transform: rotateY(90deg); @@ -162,10 +162,10 @@ opacity: 0; } .img-flip-xy:hover figcaption { - transition-delay: 0.2s; + transition-delay: 0.8s; } .img-flip-xy:not(:hover) img { - transition-delay: 0.2s; + transition-delay: 0.8s; } .img-flip-xy:not(:hover) figcaption { transform: rotate3d(-1, 1, 0, 100deg); @@ -177,7 +177,7 @@ transition-property: color; } [class*=img-blinds]:hover figcaption { - transition-delay: 0.2s; + transition-delay: 0.8s; } [class*=img-blinds]::before, [class*=img-blinds]::after, [class*=img-blinds] figcaption::before, @@ -193,13 +193,13 @@ transition-property: opacity, transform, height, width; } [class*=img-blinds]::after { - transition-delay: 0.05s; + transition-delay: 0.2s; } [class*=img-blinds] figcaption::before { - transition-delay: 0.1s; + transition-delay: 0.4s; } [class*=img-blinds] figcaption::after { - transition-delay: 0.15s; + transition-delay: 0.6s; } [class*=img-blinds] figcaption::before, [class*=img-blinds] figcaption::after { @@ -285,7 +285,7 @@ opacity: 0; } [class*=img-back]:hover figcaption { - transition-delay: 0.2s; + transition-delay: 0.8s; } [class*=img-back]:not(:hover) figcaption { opacity: 0; diff --git a/main.min.css b/main.min.css index 800b19e..75d2861 100644 --- a/main.min.css +++ b/main.min.css @@ -1 +1 @@ -[class*=img-]{position:relative;backface-visibility:hidden;overflow:hidden}[class*=img-] img{backface-visibility:hidden}[class*=img-] figcaption,[class*=img-] figcaption::after,[class*=img-] figcaption::before,[class*=img-] img,[class*=img-]::after,[class*=img-]::before{transition-duration:.6s;transition-property:opacity,transform;transition-timing-function:cubic-bezier(0.54,0,0.1,1)}[class*=img-] figcaption,[class*=img-] figcaption::after,[class*=img-] figcaption::before,[class*=img-]::after,[class*=img-]::before{top:0;left:0;position:absolute}[class*=img-] figcaption{background-color:rgba(0,0,0,.9);padding:1.5rem;color:#fff;font-size:1.125rem;display:flex;align-items:center;justify-content:center;text-align:center;width:100%;height:100%}.img-fade:not(:hover) figcaption{opacity:0}.img-slide-up:not(:hover) figcaption{transform:translateY(-100%)}.img-slide-right:not(:hover) figcaption{transform:translateX(100%)}.img-slide-left:not(:hover) figcaption{transform:translateX(-100%)}.img-slide-down:not(:hover) figcaption{transform:translateY(100%)}[class*=img-push]:hover img{transition-duration:.8s}[class*=img-push] figcaption{z-index:-1}.img-push-up:hover img{transform:translateY(calc(-100% - 5px))}.img-push-up:not(:hover) figcaption{transform:translateY(100%)}.img-push-right:hover img{transform:translateX(calc(100% + 5px))}.img-push-right:not(:hover) figcaption{transform:translateX(-100%)}.img-push-left:hover img{transform:translateX(calc(-100% - 5px))}.img-push-left:not(:hover) figcaption{transform:translateX(100%)}.img-push-down:hover img{transform:translateY(calc(100% + 5px))}.img-push-down:not(:hover) figcaption{transform:translateY(-100%)}[class*=img-flip]{perspective:70rem}[class*=img-flip]:hover img{transform:scale(1.1)}[class*=img-flip] figcaption{z-index:1}[class*=img-flip]:not(:hover) figcaption{opacity:0}.img-flip-up figcaption{transform-origin:top}.img-flip-up:not(:hover) figcaption{transform:rotateX(-80deg)}.img-flip-left figcaption{transform-origin:left}.img-flip-left:not(:hover) figcaption{transform:rotateY(80deg)}.img-flip-right figcaption{transform-origin:right}.img-flip-right:not(:hover) figcaption{transform:rotateY(-80deg)}.img-flip-down figcaption{transform-origin:bottom}.img-flip-down:not(:hover) figcaption{transform:rotateX(80deg)}.img-flip-x{overflow:initial}.img-flip-x:hover img{transform:rotateX(-180deg);opacity:0}.img-flip-x:hover figcaption,.img-flip-x:not(:hover) img{transition-delay:0.2s}.img-flip-x:not(:hover) figcaption{transform:rotateX(90deg)}.img-flip-y{overflow:initial}.img-flip-y:hover img{transform:rotateY(-180deg);opacity:0}.img-flip-y:hover figcaption,.img-flip-y:not(:hover) img{transition-delay:0.2s}.img-flip-y:not(:hover) figcaption{transform:rotateY(90deg)}.img-flip-xy{overflow:initial}.img-flip-xy:hover img{transform:rotate3d(1,-1,0,100deg);opacity:0}.img-flip-xy:hover figcaption,.img-flip-xy:not(:hover) img{transition-delay:0.2s}.img-flip-xy:not(:hover) figcaption{transform:rotate3d(-1,1,0,100deg)}[class*=img-blinds] figcaption{background-color:transparent;z-index:1;transition-property:color}[class*=img-blinds]:hover figcaption{transition-delay:0.2s}[class*=img-blinds] figcaption::after,[class*=img-blinds] figcaption::before,[class*=img-blinds]::after,[class*=img-blinds]::before{content:"";background-color:rgba(0,0,0,.9);width:var(--ib-w,25%);height:var(--ib-h,calc(100% + 5px));top:var(--ib-t,0);left:var(--ib-l,0);transform:translate3d(var(--ib-tx,0),var(--ib-ty,0),var(--ib-tz,0));opacity:var(--ib-to, 1);transition-property:opacity,transform,height,width}[class*=img-blinds]::after{transition-delay:50ms}[class*=img-blinds] figcaption::before{transition-delay:0.1s}[class*=img-blinds] figcaption::after{transition-delay:0.15s}[class*=img-blinds] figcaption::after,[class*=img-blinds] figcaption::before{z-index:-1}[class*=img-blinds]:not(:hover){--ib-to:0}[class*=img-blinds]:not(:hover) figcaption{color:transparent}[class*=img-blinds-y]::after{left:25%}[class*=img-blinds-y] figcaption::before{left:50%}[class*=img-blinds-y] figcaption::after{left:75%}[class*=img-blinds-x]{--ib-w:calc(100% + 5px);--ib-h:25%}[class*=img-blinds-x]::after{top:25%}[class*=img-blinds-x] figcaption::before{top:50%}[class*=img-blinds-x] figcaption::after{top:75%}.img-blinds-y-up:not(:hover){--ib-ty:-100%}.img-blinds-y-left:not(:hover){--ib-tx:-100%}.img-blinds-y-right:not(:hover){--ib-tx:100%}.img-blinds-y-down:not(:hover){--ib-ty:100%}.img-blinds-y-center{--ib-t:50%;--ib-ty:-50%}.img-blinds-y-center:not(:hover){--ib-h:0%}.img-blinds-x-up:not(:hover){--ib-ty:-100%}.img-blinds-x-left:not(:hover){--ib-tx:-100%}.img-blinds-x-right:not(:hover){--ib-tx:100%}.img-blinds-x-down:not(:hover){--ib-ty:100%}.img-blinds-x-center{--ib-l:50%;--ib-tx:-50%}.img-blinds-x-center:not(:hover){--ib-w:0%}[class*=img-back]{perspective:70rem}[class*=img-back] figcaption{z-index:1}[class*=img-back]:hover img{opacity:0}[class*=img-back]:hover figcaption{transition-delay:0.2s}[class*=img-back]:not(:hover) figcaption{opacity:0}.img-back-up img{transform-origin:top}.img-back-up figcaption{transform-origin:bottom}.img-back-up:hover img{transform:scale(.6) rotateX(75deg) translateY(50%)}.img-back-up:not(:hover) figcaption{transform:scale(.6) rotateX(-75deg) translateY(-50%)}.img-back-left img{transform-origin:left}.img-back-left figcaption{transform-origin:right}.img-back-left:hover img{transform:scale(.6) rotateY(-75deg) translateX(50%)}.img-back-left:not(:hover) figcaption{transform:scale(.6) rotateY(75deg) translateX(-50%)}.img-back-right img{transform-origin:right}.img-back-right figcaption{transform-origin:left}.img-back-right:hover img{transform:scale(.6) rotateY(75deg) translateX(-50%)}.img-back-right:not(:hover) figcaption{transform:scale(.6) rotateY(-75deg) translateX(50%)}.img-back-down img{transform-origin:bottom}.img-back-down figcaption{transform-origin:top}.img-back-down:hover img{transform:scale(.6) rotateX(-75deg) translateY(-50%)}.img-back-down:not(:hover) figcaption{transform:scale(.6) rotateX(75deg) translateY(50%)} \ No newline at end of file +[class*=img-]{position:relative;backface-visibility:hidden;overflow:hidden}[class*=img-] img{backface-visibility:hidden}[class*=img-] figcaption,[class*=img-] figcaption::after,[class*=img-] figcaption::before,[class*=img-] img,[class*=img-]::after,[class*=img-]::before{transition-duration:2s;transition-property:opacity,transform;transition-timing-function:cubic-bezier(0.54,0,0.1,1)}[class*=img-] figcaption,[class*=img-] figcaption::after,[class*=img-] figcaption::before,[class*=img-]::after,[class*=img-]::before{top:0;left:0;position:absolute}[class*=img-] figcaption{background-color:rgba(0,0,0,.9);padding:1.5rem;color:#fff;font-size:1.125rem;display:flex;align-items:center;justify-content:center;text-align:center;width:100%;height:100%}.img-fade:not(:hover) figcaption{opacity:0}.img-slide-up:not(:hover) figcaption{transform:translateY(-100%)}.img-slide-right:not(:hover) figcaption{transform:translateX(100%)}.img-slide-left:not(:hover) figcaption{transform:translateX(-100%)}.img-slide-down:not(:hover) figcaption{transform:translateY(100%)}[class*=img-push]:hover img{transition-duration:2.5s}[class*=img-push] figcaption{z-index:-1}.img-push-up:hover img{transform:translateY(calc(-100% - 5px))}.img-push-up:not(:hover) figcaption{transform:translateY(100%)}.img-push-right:hover img{transform:translateX(calc(100% + 5px))}.img-push-right:not(:hover) figcaption{transform:translateX(-100%)}.img-push-left:hover img{transform:translateX(calc(-100% - 5px))}.img-push-left:not(:hover) figcaption{transform:translateX(100%)}.img-push-down:hover img{transform:translateY(calc(100% + 5px))}.img-push-down:not(:hover) figcaption{transform:translateY(-100%)}[class*=img-flip]{perspective:70rem}[class*=img-flip]:hover img{transform:scale(1.1)}[class*=img-flip] figcaption{z-index:1}[class*=img-flip]:not(:hover) figcaption{opacity:0}.img-flip-up figcaption{transform-origin:top}.img-flip-up:not(:hover) figcaption{transform:rotateX(-80deg)}.img-flip-left figcaption{transform-origin:left}.img-flip-left:not(:hover) figcaption{transform:rotateY(80deg)}.img-flip-right figcaption{transform-origin:right}.img-flip-right:not(:hover) figcaption{transform:rotateY(-80deg)}.img-flip-down figcaption{transform-origin:bottom}.img-flip-down:not(:hover) figcaption{transform:rotateX(80deg)}.img-flip-x{overflow:initial}.img-flip-x:hover img{transform:rotateX(-180deg);opacity:0}.img-flip-x:hover figcaption,.img-flip-x:not(:hover) img{transition-delay:0.8s}.img-flip-x:not(:hover) figcaption{transform:rotateX(90deg)}.img-flip-y{overflow:initial}.img-flip-y:hover img{transform:rotateY(-180deg);opacity:0}.img-flip-y:hover figcaption,.img-flip-y:not(:hover) img{transition-delay:0.8s}.img-flip-y:not(:hover) figcaption{transform:rotateY(90deg)}.img-flip-xy{overflow:initial}.img-flip-xy:hover img{transform:rotate3d(1,-1,0,100deg);opacity:0}.img-flip-xy:hover figcaption,.img-flip-xy:not(:hover) img{transition-delay:0.8s}.img-flip-xy:not(:hover) figcaption{transform:rotate3d(-1,1,0,100deg)}[class*=img-blinds] figcaption{background-color:transparent;z-index:1;transition-property:color}[class*=img-blinds]:hover figcaption{transition-delay:0.8s}[class*=img-blinds] figcaption::after,[class*=img-blinds] figcaption::before,[class*=img-blinds]::after,[class*=img-blinds]::before{content:"";background-color:rgba(0,0,0,.9);width:var(--ib-w,25%);height:var(--ib-h,calc(100% + 5px));top:var(--ib-t,0);left:var(--ib-l,0);transform:translate3d(var(--ib-tx,0),var(--ib-ty,0),var(--ib-tz,0));opacity:var(--ib-to, 1);transition-property:opacity,transform,height,width}[class*=img-blinds]::after{transition-delay:0.2s}[class*=img-blinds] figcaption::before{transition-delay:0.4s}[class*=img-blinds] figcaption::after{transition-delay:0.6s}[class*=img-blinds] figcaption::after,[class*=img-blinds] figcaption::before{z-index:-1}[class*=img-blinds]:not(:hover){--ib-to:0}[class*=img-blinds]:not(:hover) figcaption{color:transparent}[class*=img-blinds-y]::after{left:25%}[class*=img-blinds-y] figcaption::before{left:50%}[class*=img-blinds-y] figcaption::after{left:75%}[class*=img-blinds-x]{--ib-w:calc(100% + 5px);--ib-h:25%}[class*=img-blinds-x]::after{top:25%}[class*=img-blinds-x] figcaption::before{top:50%}[class*=img-blinds-x] figcaption::after{top:75%}.img-blinds-y-up:not(:hover){--ib-ty:-100%}.img-blinds-y-left:not(:hover){--ib-tx:-100%}.img-blinds-y-right:not(:hover){--ib-tx:100%}.img-blinds-y-down:not(:hover){--ib-ty:100%}.img-blinds-y-center{--ib-t:50%;--ib-ty:-50%}.img-blinds-y-center:not(:hover){--ib-h:0%}.img-blinds-x-up:not(:hover){--ib-ty:-100%}.img-blinds-x-left:not(:hover){--ib-tx:-100%}.img-blinds-x-right:not(:hover){--ib-tx:100%}.img-blinds-x-down:not(:hover){--ib-ty:100%}.img-blinds-x-center{--ib-l:50%;--ib-tx:-50%}.img-blinds-x-center:not(:hover){--ib-w:0%}[class*=img-back]{perspective:70rem}[class*=img-back] figcaption{z-index:1}[class*=img-back]:hover img{opacity:0}[class*=img-back]:hover figcaption{transition-delay:0.8s}[class*=img-back]:not(:hover) figcaption{opacity:0}.img-back-up img{transform-origin:top}.img-back-up figcaption{transform-origin:bottom}.img-back-up:hover img{transform:scale(.6) rotateX(75deg) translateY(50%)}.img-back-up:not(:hover) figcaption{transform:scale(.6) rotateX(-75deg) translateY(-50%)}.img-back-left img{transform-origin:left}.img-back-left figcaption{transform-origin:right}.img-back-left:hover img{transform:scale(.6) rotateY(-75deg) translateX(50%)}.img-back-left:not(:hover) figcaption{transform:scale(.6) rotateY(75deg) translateX(-50%)}.img-back-right img{transform-origin:right}.img-back-right figcaption{transform-origin:left}.img-back-right:hover img{transform:scale(.6) rotateY(75deg) translateX(-50%)}.img-back-right:not(:hover) figcaption{transform:scale(.6) rotateY(-75deg) translateX(50%)}.img-back-down img{transform-origin:bottom}.img-back-down figcaption{transform-origin:top}.img-back-down:hover img{transform:scale(.6) rotateX(-75deg) translateY(-50%)}.img-back-down:not(:hover) figcaption{transform:scale(.6) rotateX(75deg) translateY(50%)} \ No newline at end of file diff --git a/scss/_core.scss b/scss/_core.scss index b69de85..1c8c6d6 100644 --- a/scss/_core.scss +++ b/scss/_core.scss @@ -13,7 +13,7 @@ figcaption, figcaption::before, figcaption::after { - transition-duration: .6s; + transition-duration: $imghv-duration; transition-property: opacity, transform; transition-timing-function: cubic-bezier(.54, 0, .1, 1); } diff --git a/scss/_variables.scss b/scss/_variables.scss index d5acbb8..11ce33c 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1,9 +1,10 @@ // Variables $imghv-selector: "img" !default; -$imghv-bg: rgb(0 0 0 / 90%); -$imghv-padding: 1.5rem; -$imghv-color: #fff; -$imghv-fs: 1.125rem; +$imghv-bg: rgb(0 0 0 / 90%) !default; +$imghv-padding: 1.5rem !default; +$imghv-color: #fff !default; +$imghv-fs: 1.125rem !default; +$imghv-duration: 2s !default; $escaped-characters: ( ("<", "%3c"), diff --git a/scss/effects/_back.scss b/scss/effects/_back.scss index 0d754bf..d725d9b 100644 --- a/scss/effects/_back.scss +++ b/scss/effects/_back.scss @@ -11,7 +11,7 @@ } figcaption { - transition-delay: 0.2s; + transition-delay: ($imghv-duration * 0.4); } } diff --git a/scss/effects/_blinds.scss b/scss/effects/_blinds.scss index 810418a..80b022f 100644 --- a/scss/effects/_blinds.scss +++ b/scss/effects/_blinds.scss @@ -7,7 +7,7 @@ &:hover { figcaption { - transition-delay: 0.2s; + transition-delay: ($imghv-duration * 0.4); } } @@ -27,15 +27,15 @@ } &::after { - transition-delay: 0.05s; + transition-delay: ($imghv-duration * 0.1); } figcaption::before { - transition-delay: 0.1s; + transition-delay:($imghv-duration * 0.2); } figcaption::after { - transition-delay: 0.15s; + transition-delay: ($imghv-duration * 0.3); } figcaption::before, diff --git a/scss/effects/_flip.scss b/scss/effects/_flip.scss index 2398f6f..12392f2 100644 --- a/scss/effects/_flip.scss +++ b/scss/effects/_flip.scss @@ -64,13 +64,13 @@ opacity: 0; } figcaption { - transition-delay: 0.2s; + transition-delay: ($imghv-duration * 0.4); } } &:not(:hover) { img { - transition-delay: 0.2s; + transition-delay: ($imghv-duration * 0.4); } figcaption { transform: rotateX(90deg); @@ -87,13 +87,13 @@ opacity: 0; } figcaption { - transition-delay: 0.2s; + transition-delay: ($imghv-duration * 0.4); } } &:not(:hover) { img { - transition-delay: 0.2s; + transition-delay: ($imghv-duration * 0.4); } figcaption { transform: rotateY(90deg); @@ -111,13 +111,13 @@ opacity: 0; } figcaption { - transition-delay: 0.2s; + transition-delay: ($imghv-duration * 0.4); } } &:not(:hover) { img { - transition-delay: 0.2s; + transition-delay: ($imghv-duration * 0.4); } figcaption { transform: rotate3d(-1, 1, 0, 100deg); diff --git a/scss/effects/_push.scss b/scss/effects/_push.scss index 14f53d8..02ccf02 100644 --- a/scss/effects/_push.scss +++ b/scss/effects/_push.scss @@ -1,6 +1,6 @@ [class*=#{$imghv-selector}-push] { &:hover img { - transition-duration: .8s; + transition-duration: ($imghv-duration * 1.25); } figcaption { z-index: -1;