Skip to content

Commit

Permalink
[FEATURE] add styles for new content element Hero Image (#41)
Browse files Browse the repository at this point in the history
  • Loading branch information
@myroslav321 @dmh
myroslav321 authored and dmh committed Feb 16, 2017
1 parent 483aae6 commit 92eb484
Show file tree
Hide file tree
Showing 6 changed files with 343 additions and 0 deletions.
1 change: 1 addition & 0 deletions dev/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
21 changes: 21 additions & 0 deletions dev/js/main/contentElements/heroImage.js
View file
Original file line number Diff line number Diff line change
@@ -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);
1 change: 1 addition & 0 deletions dev/styles/main.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
174 changes: 174 additions & 0 deletions dev/styles/main/contentElements/heroImage.less
View file
Original file line number Diff line number Diff line change
@@ -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);
}
108 changes: 108 additions & 0 deletions dev/templates/pages/content/contentElements/heroImage.hbs
View file
Original file line number Diff line number Diff line change
@@ -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}}

<div class="container">
<h3>Hero Image (outside of container)</h3>
<br>
<br>
</div>

{{ 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"
}}

<div class="container">
<br>
<br>
<h3>Hero Image (outside of container with Slider Container)</h3>
</div>

{{ renderContent 'sliderContainer'
button = true
pagination = true
loop = true
slidesPerView = 1
speed = 1000
autoplay = 3000
effect="fade"
elements='
<div class="hero-image js__hero-image" style="background-image:url(images/parallax_image.jpg); min-height:320px;">
<div class="hero-image__caption-wrp _center-align">
<div class="hero-image__caption _caption-animated-1">
<h2 class="hero-image__caption-header">Vel mollis massa varius sed</h2>
<h3 class="hero-image__caption-subheader">Mauris tristique mollis orci</h3>
<p class="hero-image__caption-p">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.</p>
<div class="hero-image__caption-link ">
<a href="" title="Read more" class="">Read more</a>
</div>
</div>
</div>
</div>
'
}}


<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Hero Image (inside of container)</h3>
<br>
<br>
{{ 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"
}}
<br>
<br>
<h3>Hero Image (inside of container with Slider Container)</h3>
{{ renderContent 'sliderContainer'
button = true
pagination = true
loop = true
slidesPerView = 1
speed = 500
autoplay = 3000
effect="coverflow"
elements='
<div class="hero-image js__hero-image" style="background-image:url(images/parallax_image.jpg); min-height:320px;">
<div class="hero-image__caption-wrp _center-align">
<div class="hero-image__caption _caption-animated-2">
<h2 class="hero-image__caption-header">Vel mollis massa varius sed</h2>
<h3 class="hero-image__caption-subheader">Mauris tristique mollis orci</h3>
<p class="hero-image__caption-p">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.</p>
<div class="hero-image__caption-link ">
<a href="" title="Read more" class="">Read more</a>
</div>
</div>
</div>
</div>
'
}}
</div>
</div>
</div>
38 changes: 38 additions & 0 deletions dev/templates/parts/content/contentElements/heroImage.hbs
View file
Original file line number Diff line number Diff line change
@@ -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}}
<div class="hero-image js__hero-image" style="background-image:url('{{image}}'); min-height:{{height}};">
<div class="hero-image__caption-wrp {{#if this.captionAligment}}{{captionAligment}}{{/if}}">
<div class="hero-image__caption {{#if this.animationStyle}}{{animationStyle}}{{/if}}">
{{#if this.header}}
<h2 class="hero-image__caption-header">{{header}}</h2>
{{/if}}
{{#if this.subHeader}}
<h3 class="hero-image__caption-subheader">{{subHeader}}</h3>
{{/if}}
{{#if this.text}}
<p class="hero-image__caption-p">{{text}}</p>
{{/if}}
{{#if this.link}}
<div class="hero-image__caption-link ">
<a href="{{his.link}}" title="{{linkText}}" class="{{#if this.linkAsBtn}}btn btn-default {{/if}}">{{linkText}}</a>
</div>
{{/if}}
</div>
</div>
</div>
{{/if}}

0 comments on commit 92eb484

Please sign in to comment.