From 92eb484bc4c68acc33428bb7cb31dbba637db01d Mon Sep 17 00:00:00 2001 From: myroslav321 Date: Thu, 16 Feb 2017 19:03:26 +0200 Subject: [PATCH] [FEATURE] add styles for new content element Hero Image (#41) --- dev/js/main.js | 1 + dev/js/main/contentElements/heroImage.js | 21 +++ dev/styles/main.less | 1 + .../main/contentElements/heroImage.less | 174 ++++++++++++++++++ .../content/contentElements/heroImage.hbs | 108 +++++++++++ .../content/contentElements/heroImage.hbs | 38 ++++ 6 files changed, 343 insertions(+) create mode 100644 dev/js/main/contentElements/heroImage.js create mode 100644 dev/styles/main/contentElements/heroImage.less create mode 100644 dev/templates/pages/content/contentElements/heroImage.hbs create mode 100644 dev/templates/parts/content/contentElements/heroImage.hbs 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}} + +
+

Hero Image (outside of container)

+
+
+
+ +{{ renderContent 'heroImage' + image="images/parallax_image.jpg" + height="320px" + header="Vel mollis massa varius sed" + subHeader="Mauris tristique mollis orci" + text="Aliquam nibh nibh, egestas quis elit quis, efficitur suscipit nisl. Vestibulum mattis eu tortor vitae sollicitudin. Proin sed imperdiet tortor, sed elementum dolor. Mauris pellentesque ac augue fringilla suscipit. Nam eu nibh a sapien auctor ullamcorper ac eu sapien. Donec hendrerit pretium sem vitae mollis. Maecenas cursus vitae mi eu suscipit." + link="#" + linkText="Read more" + linkAsBtn=false + captionAligment="_left-align" + animationStyle="_caption-animated-1" +}} + +
+
+
+

Hero Image (outside of container with Slider Container)

+
+ +{{ renderContent 'sliderContainer' + button = true + pagination = true + loop = true + slidesPerView = 1 + speed = 1000 + autoplay = 3000 + effect="fade" + elements=' +
+
+
+

Vel mollis massa varius sed

+

Mauris tristique mollis orci

+

Aliquam nibh nibh, egestas quis elit quis, efficitur suscipit nisl. Vestibulum mattis eu tortor vitae sollicitudin. Proin sed imperdiet tortor, sed elementum dolor. Mauris pellentesque ac augue fringilla suscipit. Nam eu nibh a sapien auctor ullamcorper ac eu sapien. Donec hendrerit pretium sem vitae mollis. Maecenas cursus vitae mi eu suscipit.

+
+ Read more +
+
+
+
+ ' +}} + + +
+
+
+

Hero Image (inside of container)

+
+
+ {{ renderContent 'heroImage' + image="images/parallax_image.jpg" + height="320px" + header="Vel mollis massa varius sed" + subHeader="Mauris tristique mollis orci" + text="Aliquam nibh nibh, egestas quis elit quis, efficitur suscipit nisl. Vestibulum mattis eu tortor vitae sollicitudin. Proin sed imperdiet tortor, sed elementum dolor. Mauris pellentesque ac augue fringilla suscipit. Nam eu nibh a sapien auctor ullamcorper ac eu sapien. Donec hendrerit pretium sem vitae mollis. Maecenas cursus vitae mi eu suscipit." + link="#" + linkText="Read more" + linkAsBtn=true + captionAligment="_right-align" + animationStyle="_caption-animated-3" + }} +
+
+

Hero Image (inside of container with Slider Container)

+ {{ renderContent 'sliderContainer' + button = true + pagination = true + loop = true + slidesPerView = 1 + speed = 500 + autoplay = 3000 + effect="coverflow" + elements=' +
+
+
+

Vel mollis massa varius sed

+

Mauris tristique mollis orci

+

Aliquam nibh nibh, egestas quis elit quis, efficitur suscipit nisl. Vestibulum mattis eu tortor vitae sollicitudin. Proin sed imperdiet tortor, sed elementum dolor. Mauris pellentesque ac augue fringilla suscipit. Nam eu nibh a sapien auctor ullamcorper ac eu sapien. Donec hendrerit pretium sem vitae mollis. Maecenas cursus vitae mi eu suscipit.

+
+ Read more +
+
+
+
+ ' + }} +
+
+
diff --git a/dev/templates/parts/content/contentElements/heroImage.hbs b/dev/templates/parts/content/contentElements/heroImage.hbs new file mode 100644 index 0000000..252f5fd --- /dev/null +++ b/dev/templates/parts/content/contentElements/heroImage.hbs @@ -0,0 +1,38 @@ +{{!-- Hero Image settings: + Dosen't render if "image" option disable; + image = "" (path to backgroud image); + header = "" (set element heading); + subHeader = "" (set element sub heading); + text = "" (set text content to element); + linkAsBtn = true/false (by deafalt false); + link = "" (set href to the element); + linkName = "" (set button or link name); + captionAligment = "" (change content aligment inside element, + can be: _left-align, _center-align, , _right-align); + animationStyle = "" (can be: _caption-animated-1, _caption-animated-2, _caption-animated-3); +--}} + + + +{{#if this.image}} +
+
+
+ {{#if this.header}} +

{{header}}

+ {{/if}} + {{#if this.subHeader}} +

{{subHeader}}

+ {{/if}} + {{#if this.text}} +

{{text}}

+ {{/if}} + {{#if this.link}} +
+ {{linkText}} +
+ {{/if}} +
+
+
+{{/if}}