From a5e0d2d205fb4a6c6138f68894464b20dde064bc Mon Sep 17 00:00:00 2001 From: Anthony Talarico Date: Thu, 14 Apr 2016 15:48:41 -0400 Subject: [PATCH] slowing down slideshow transitions --- css/app.css | 14 ++++---- js/app.js | 41 +++++++++++++++------- js/custom/pageSetup.js | 41 +++++++++++++++------- scss/_slideshow.scss | 79 ++++++++++++++++++++++++++++++++++++++---- 4 files changed, 139 insertions(+), 36 deletions(-) diff --git a/css/app.css b/css/app.css index 4778e8b..282ae29 100644 --- a/css/app.css +++ b/css/app.css @@ -6723,7 +6723,9 @@ h2#block-title { left: 15%; float: none; margin: 0 auto; - top: 10%; } + top: 10%; + width: auto; + max-height: 310px; } @media screen and (max-width: 1199px) { #slideshow .nivo-caption { width: 500px; @@ -6772,7 +6774,7 @@ h2#block-title { font-size: 0.875rem; letter-spacing: normal; } } -#metaslider_14 .nivo-caption.open > .captionContent { +#metaslider_11 .nivo-caption.open > .captionContent { width: auto; transform: translate3d(0px, 0px, 0px) !important; visibility: visible; @@ -6780,7 +6782,7 @@ h2#block-title { transition: translate3d 500ms ease 0s !important; transition: visibility 500ms, opacity 1s linear !important; } -#metaslider_14 .nivo-caption.open > .captionButton { +#metaslider_11 .nivo-caption.open > .captionButton { width: auto; transform: translate3d(.1%, 0%, 0px) !important; visibility: visible; @@ -6789,15 +6791,15 @@ h2#block-title { transition: visibility 500ms, opacity 1s linear !important; transition: all 500ms !important; } -#metaslider_14 .nivo-caption.close > .captionContent { +#metaslider_11 .nivo-caption.close > .captionContent { transform: translate3d(-100%, 0%, 0px) !important; visibility: hidden; opacity: 0; - transition: translate3d 500ms ease 0s !important; + transition: translate3d 2000ms ease 0s !important; transition: visibility 500ms, opacity 0.5s linear !important; transition: all 500ms !important; } -#metaslider_14 .nivo-caption.close > .captionButton { +#metaslider_11 .nivo-caption.close > .captionButton { transform: translate3d(-100%, 0%, 0px) !important; visibility: hidden; opacity: 0; diff --git a/js/app.js b/js/app.js index db53874..fad49b5 100644 --- a/js/app.js +++ b/js/app.js @@ -62,25 +62,42 @@ $(document).ready(function () { $('#submit-button > td').attr("colspan",2); - +// +// +// $("#metaslider_14").nivoSlider({ +// afterLoad: function (){ +//// $("#metaslider_11 .nivo-caption").fadeIn(); +// $("#metaslider_14 .nivo-caption").addClass("open"); +// +// }, +// beforeChange: function () { +// $("#metaslider_14 .nivo-caption").removeClass("open"); +// $("#metaslider_14 .nivo-caption").addClass("close"); +// }, +// afterChange: function () { +// $("#metaslider_14 .nivo-caption").removeClass("close"); +// $("#metaslider_14 .nivo-caption").addClass("open"); +// +// +// } +// }); + - - $("#metaslider_14").nivoSlider({ + // remove this code before final push + $("#metaslider_11").nivoSlider({ + pauseTime: 7000, afterLoad: function (){ -// $("#metaslider_11 .nivo-caption").fadeIn(); - $("#metaslider_14 .nivo-caption").addClass("open"); +// $("#metaslider_11 .nivo-caption").fadeIn(); + $("#metaslider_11 .nivo-caption").addClass("open"); }, beforeChange: function () { - $("#metaslider_14 .nivo-caption").removeClass("open"); - $("#metaslider_14 .nivo-caption").addClass("close"); + $("#metaslider_11 .nivo-caption").removeClass("open"); + $("#metaslider_11 .nivo-caption").addClass("close"); }, afterChange: function () { - $("#metaslider_14 .nivo-caption").removeClass("close"); - $("#metaslider_14 .nivo-caption").addClass("open"); - - + $("#metaslider_11 .nivo-caption").removeClass("close"); + $("#metaslider_11 .nivo-caption").addClass("open"); } }); - }); diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js index f0712a2..61f8a80 100644 --- a/js/custom/pageSetup.js +++ b/js/custom/pageSetup.js @@ -53,25 +53,42 @@ $(document).ready(function () { $('#submit-button > td').attr("colspan",2); - +// +// +// $("#metaslider_14").nivoSlider({ +// afterLoad: function (){ +//// $("#metaslider_11 .nivo-caption").fadeIn(); +// $("#metaslider_14 .nivo-caption").addClass("open"); +// +// }, +// beforeChange: function () { +// $("#metaslider_14 .nivo-caption").removeClass("open"); +// $("#metaslider_14 .nivo-caption").addClass("close"); +// }, +// afterChange: function () { +// $("#metaslider_14 .nivo-caption").removeClass("close"); +// $("#metaslider_14 .nivo-caption").addClass("open"); +// +// +// } +// }); + - - $("#metaslider_14").nivoSlider({ + // remove this code before final push + $("#metaslider_11").nivoSlider({ + pauseTime: 7000, afterLoad: function (){ -// $("#metaslider_11 .nivo-caption").fadeIn(); - $("#metaslider_14 .nivo-caption").addClass("open"); +// $("#metaslider_11 .nivo-caption").fadeIn(); + $("#metaslider_11 .nivo-caption").addClass("open"); }, beforeChange: function () { - $("#metaslider_14 .nivo-caption").removeClass("open"); - $("#metaslider_14 .nivo-caption").addClass("close"); + $("#metaslider_11 .nivo-caption").removeClass("open"); + $("#metaslider_11 .nivo-caption").addClass("close"); }, afterChange: function () { - $("#metaslider_14 .nivo-caption").removeClass("close"); - $("#metaslider_14 .nivo-caption").addClass("open"); - - + $("#metaslider_11 .nivo-caption").removeClass("close"); + $("#metaslider_11 .nivo-caption").addClass("open"); } }); - }); diff --git a/scss/_slideshow.scss b/scss/_slideshow.scss index bbd1e65..7c1d854 100644 --- a/scss/_slideshow.scss +++ b/scss/_slideshow.scss @@ -65,7 +65,8 @@ float: none; margin: 0 auto; top: 10%; -// max-height: 0px; + width: auto; + max-height: 310px; @media screen and (max-width: 1199px) { width: 500px; @@ -123,7 +124,73 @@ } } -#metaslider_14 .nivo-caption.open > .captionContent{ +//#metaslider_14 .nivo-caption.open > .captionContent{ +//// overflow-y: hidden; +//// max-height: 500px; /* approximate max height */ +//// +//// transition-property: all; +//// transition-duration: 4s; +//// transition-timing-function: cubic-bezier(.4,.89,.85,.99); +// width: auto; +//// position: absolute; +// transform: translate3d(0px, 0px, 0px) !important; +// visibility: visible; +// opacity: 1; +// transition: translate3d 500ms ease 0s !important; +// transition: visibility 500ms, opacity 1s linear !important; +// +//} +//#metaslider_14 .nivo-caption.open > .captionButton{ +//// overflow-y: hidden; +//// max-height: 500px; /* approximate max height */ +//// +//// transition-property: all; +//// transition-duration: 4s; +//// transition-timing-function: cubic-bezier(.4,.89,.85,.99); +// width: auto; +//// position: absolute; +// +// transform: translate3d(.1%, 0%, 0px) !important; +// visibility: visible; +// opacity: 1; +// transition: translate3d 500ms ease 1s !important; +// transition: visibility 500ms, opacity 1s linear !important; +// +// transition: all 500ms !important; +// +//} +//#metaslider_14 .nivo-caption.close >.captionContent{ +//// overflow-y: hidden; +//// max-height: 500px; /* approximate max height */ +//// +//// transition-property: all; +//// transition-duration: 4s; +//// transition-timing-function: cubic-bezier(.4,.89,.85,.99); +// transform: translate3d(-100%, 0%, 0px) !important; +// visibility: hidden; +// opacity: 0; +// transition: translate3d 500ms ease 0s !important; +// transition: visibility 500ms, opacity 0.5s linear !important; +// transition: all 500ms !important; +//} +//#metaslider_14 .nivo-caption.close >.captionButton{ +//// overflow-y: hidden; +//// max-height: 500px; /* approximate max height */ +//// +//// transition-property: all; +//// transition-duration: 4s; +//// transition-timing-function: cubic-bezier(.4,.89,.85,.99); +// transform: translate3d(-100%, 0%, 0px) !important; +// visibility: hidden; +// opacity: 0; +// transition: translate3d 500ms ease 0s !important; +// transition: visibility 500ms, opacity 0.5s linear !important; +// transition: all 500ms !important; +//} + +// remove this before final push + +#metaslider_11 .nivo-caption.open > .captionContent{ // overflow-y: hidden; // max-height: 500px; /* approximate max height */ // @@ -139,7 +206,7 @@ transition: visibility 500ms, opacity 1s linear !important; } -#metaslider_14 .nivo-caption.open > .captionButton{ +#metaslider_11 .nivo-caption.open > .captionButton{ // overflow-y: hidden; // max-height: 500px; /* approximate max height */ // @@ -158,7 +225,7 @@ transition: all 500ms !important; } -#metaslider_14 .nivo-caption.close >.captionContent{ +#metaslider_11 .nivo-caption.close >.captionContent{ // overflow-y: hidden; // max-height: 500px; /* approximate max height */ // @@ -168,11 +235,11 @@ transform: translate3d(-100%, 0%, 0px) !important; visibility: hidden; opacity: 0; - transition: translate3d 500ms ease 0s !important; + transition: translate3d 2000ms ease 0s !important; transition: visibility 500ms, opacity 0.5s linear !important; transition: all 500ms !important; } -#metaslider_14 .nivo-caption.close >.captionButton{ +#metaslider_11 .nivo-caption.close >.captionButton{ // overflow-y: hidden; // max-height: 500px; /* approximate max height */ // -- 2.17.1