<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 27 27">
- <g fill="none" stroke="#FF078B" stroke-linecap="round" stroke-linejoin="round">
+ <g fill="none" stroke="#1D7AEA" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 2.3H.5v24.2h26V2.3H22"/>
<path d="M5 .5h3.6V5H5V.5zM18.4.5H22V5h-3.6V.5zM8.6 2.3h9.9M.5 8.6h26M6.8 10.7v13.6M13.1 10.7v13.6M19.3 10.7v13.6M2.8 13.1h21.5M2.8 17.5h21.5M2.8 22h21.5"/>
</g>
opacity: 1;
}
-.header-slideshow .header-slideshow-content.showing .header-slideshow-title,
-.header-slideshow .header-slideshow-content.showing .header-slideshow-body {
- opacity: 1;
-}
-
.header-slideshow .header-slideshow-content:before {
content: none;
}
}
.header-slideshow-title,
-.header-slideshow-body {
+.header-slideshow-body p,
+.header-slideshow-body li {
opacity: 0;
- transition: opacity 1s;
+ transition: opacity 1.5s;
+}
+
+.header-slideshow-title.showing,
+.header-slideshow-body p.showing,
+.header-slideshow-body li.showing {
+ opacity: 1;
}
.header-slideshow-title {
<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 27 27">
- <g fill="none" stroke="#FF078B" stroke-linecap="round" stroke-linejoin="round">
+ <g fill="none" stroke="#1D7AEA" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 2.3H.5v24.2h26V2.3H22"/>
<path d="M5 .5h3.6V5H5V.5zM18.4.5H22V5h-3.6V.5zM8.6 2.3h9.9M.5 8.6h26M6.8 10.7v13.6M13.1 10.7v13.6M19.3 10.7v13.6M2.8 13.1h21.5M2.8 17.5h21.5M2.8 22h21.5"/>
</g>
let index = $(this).data('slide')
showSlide(index);
});
+ setTimeout(function() {
+ revealText(slidesText)
+ }, 1000)
}
function showSlide(index) {
currentSlide = (index + slides.length) % slides.length;
addBySlides(slides)
addBySlides(slidesText)
+ revealText(slidesText)
}
function removeBySlide(slides) {
$(slides[currentSlide]).removeClass('showing');
$scope.find(`[data-slide="${currentSlide}"]`).removeClass('active');
+
+ $(slides[currentSlide]).find(".header-slideshow-title, .header-slideshow-body p,.header-slideshow-body li").removeClass("showing")
}
function addBySlides(slides) {
showSlide(currentSlide - 1);
}
+ function revealText(slides) {
+ let delay = 200
+ $(slides[currentSlide]).find(".header-slideshow-title").addClass('showing')
+ $(slides[currentSlide]).find(".header-slideshow-body p,.header-slideshow-body li").each(function(i, el) {
+
+ window.setTimeout(function(){
+ $(el).addClass("showing")
+ }, delay)
+ delay += 200
+ })
+ }
});
});
&.showing
z-index: 10
opacity: 1
- .header-slideshow-title,
- .header-slideshow-body
- opacity: 1
&:before
content: none
visibility: visible // Animation doesn't trigger in the editor for some reason so just show it
&-title,
- &-body
+ &-body p,
+ &-body li
opacity: 0
- transition: opacity 1s
+ transition: opacity 1.5s
+ &.showing
+ opacity: 1
&-title
display: block