diff --git a/dev/js/main.js b/dev/js/main.js index abc951b..df32dd8 100644 --- a/dev/js/main.js +++ b/dev/js/main.js @@ -6,6 +6,7 @@ @import 'main/contentElements/slider.js'; @import 'main/contentElements/carousel.js'; @import 'main/contentElements/parallax.js'; +@import 'main/contentElements/heroImage.js'; @import 'main/contentElements/sliderContainer.js'; @import 'main/contentElements/imageTextLink.js'; diff --git a/dev/js/main/contentElements/heroImage.js b/dev/js/main/contentElements/heroImage.js new file mode 100644 index 0000000..4e517ce --- /dev/null +++ b/dev/js/main/contentElements/heroImage.js @@ -0,0 +1,21 @@ +(function($) { + 'use strict'; + + // document load event + $(document).ready(function() { + var $frame = $('.js__hero-image'); + var $slider = $('.slider-container'); + $frame.each(function(i){ + var self = $(this); + if(!self.parents('.swiper-wrapper').length){ + self.addClass('_animated'); + } + }); + $slider.each(function(i){ + if($(this).find($frame).length){ + $(this).addClass('_full-width'); + } + }); + }); + +})(jQuery); diff --git a/dev/styles/main.less b/dev/styles/main.less index 4f73135..d1e9790 100644 --- a/dev/styles/main.less +++ b/dev/styles/main.less @@ -53,6 +53,7 @@ @import "main/contentElements/parallax.less"; @import "main/contentElements/sliderContainer.less"; @import "main/contentElements/simpleAccordion.less"; +@import "main/contentElements/heroImage.less"; // appearance @import "main/appearance/wrapperStyle/blueMountainWrp.less"; diff --git a/dev/styles/main/contentElements/heroImage.less b/dev/styles/main/contentElements/heroImage.less new file mode 100644 index 0000000..c88cfa3 --- /dev/null +++ b/dev/styles/main/contentElements/heroImage.less @@ -0,0 +1,174 @@ +//--------------------------------------------------// +// HERO IMAGE ----------------------------------// +//--------------------------------------------------// +.hero-image{ + overflow: auto; + background-position: 50% 50%; + background-size: cover; + background-repeat: no-repeat; + width: 100%; + // max-width: 1920px; +} +.hero-image__caption-wrp._left-align{ + text-align: left; +} +.hero-image__caption-wrp._left-align .hero-image__caption{ + float: left; +} +.hero-image__caption-wrp._center-align{ + text-align: center; +} +.hero-image__caption-wrp._center-align .hero-image__caption{ + margin: auto; +} +.hero-image__caption-wrp._right-align{ + text-align: right; +} +.hero-image__caption-wrp._right-align .hero-image__caption{ + float: right; +} +.hero-image__caption{ + padding: 20px 60px; + color: @main-body-bg; + overflow: hidden; + -webkit-font-smoothing: antialiased; +} +.hero-image__caption .hero-image__caption-header{ + color: @main-body-bg; + font-style: normal; +} +.hero-image__caption .hero-image__caption-subheader{ + color: @main-body-bg; + font-style: italic; +} +.hero-image__caption-link a:not(.btn){ + color: @main-body-bg; + text-decoration: underline; +} +.slider-container{ + max-width: 100% !important; + width: 100%; + overflow: hidden; + margin-left: auto !important; + margin-right: auto !important; +} +.slider-container._full-width .slider-container__slide{ + padding: 0 +} +.slider-container._full-width .swiper-slide-next .hero-image__caption > *{ + transition: none; +} +@media(min-width: 992px){ + .slider-container._full-width .swiper-button-next, + .slider-container._full-width .swiper-button-prev{ + color: @main-body-bg; + width: auto; + display: block; + } + .slider-container._full-width .swiper-button-next{ + right: 10px; + left: auto; + } + .slider-container._full-width .swiper-button-prev{ + left: 10px; + right: auto; + } + .slider-container._full-width .slider-container__container{ + margin-left: 0 !important; + margin-right: 0 !important; + } +} + + +//--------------------------------------------------// +// animation style 1 -------------------------------// +//--------------------------------------------------// + +.hero-image__caption._caption-animated-1 > *{ + transition: all .5s ease; + opacity: 0; + -webkit-transform: translate3d(0, 30px, 0); + transform: translate3d(0, 30px, 0); +} +.hero-image__caption._caption-animated-1 .hero-image__caption-header{ + transition-delay: .3s; +} +.hero-image__caption._caption-animated-1 .hero-image__caption-subheader{ + transition-delay: .5s; +} +.hero-image__caption._caption-animated-1 .hero-image__caption-p{ + transition-delay: .7s; +} +.hero-image__caption._caption-animated-1 .hero-image__caption-link { + transition-delay: .9s; +} +.swiper-slide-active .hero-image__caption._caption-animated-1 > *{ + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.hero-image._animated .hero-image__caption._caption-animated-1 > *{ + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +//--------------------------------------------------// +// animation style 2 -------------------------------// +//--------------------------------------------------// + +.hero-image__caption._caption-animated-2 > *{ + transition: all 1s ease; + opacity: 0; +} +.hero-image__caption._caption-animated-2 .hero-image__caption-header{ + transition-delay: .3s; +} +.hero-image__caption._caption-animated-2 .hero-image__caption-subheader{ + transition-delay: .7s; +} +.hero-image__caption._caption-animated-2 .hero-image__caption-p{ + transition-delay: 1.1s; +} +.hero-image__caption._caption-animated-2 .hero-image__caption-link { + transition-delay: 1.4s; +} +.swiper-slide-active .hero-image__caption._caption-animated-2 > *{ + opacity: 1; +} +.hero-image._animated .hero-image__caption._caption-animated-2 > *{ + opacity: 1; +} + +//--------------------------------------------------// +// animation style 3 -------------------------------// +//--------------------------------------------------// + +.hero-image__caption._caption-animated-3 > *{ + transition: all .5s ease; + opacity: 0; + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0); +} +.hero-image__caption._caption-animated-3 .hero-image__caption-header{ + transition-delay: .9s; +} +.hero-image__caption._caption-animated-3 .hero-image__caption-subheader{ + transition-delay: .7s; +} +.hero-image__caption._caption-animated-3 .hero-image__caption-p { + transition-delay: .5s; +} +.hero-image__caption._caption-animated-3 .hero-image__caption-link { + transition-delay: .3s; +} +.swiper-slide-active .hero-image__caption._caption-animated-3 > *{ + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.hero-image._animated .hero-image__caption._caption-animated-3 > *{ + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} diff --git a/dev/templates/pages/content/contentElements/heroImage.hbs b/dev/templates/pages/content/contentElements/heroImage.hbs new file mode 100644 index 0000000..de33299 --- /dev/null +++ b/dev/templates/pages/content/contentElements/heroImage.hbs @@ -0,0 +1,108 @@ +--- +#layout: default.hbs #by default it is default.hbs, but you can specify another one +title: Hero Image #title in menu +position: 8 #position in menu +hideInMenu: false #if true, will be hidden in menu +hideInBreadcrumbs: false #if true, will be hidden in breadcrumbs +externalLink: false #just add link (http://link.com) instead of "false" to use this page like a link to external page. +--- + +{{> breadcrumbs}} + +