Skip to content

Commit

Permalink
[FEATURE] New content element Hero Image (#79)
Browse files Browse the repository at this point in the history 
* [FEATURE] add styles for new content element frame Animated

* [FIX] change class name, update styles

* [FEATURE] add new page for Hero Image, update styles
  • Loading branch information
@myroslav321 @dmh
myroslav321 authored and dmh committed Feb 16, 2017
1 parent ec66ec6 commit f25c0bc
Show file tree
Hide file tree
Showing 6 changed files with 340 additions and 1 deletion.
3 changes: 2 additions & 1 deletion dev/js/main.js
View file
Expand Up @@ -6,8 +6,9 @@
@import 'main/contentElements/slider.js';
@import 'main/contentElements/carousel.js';
@import 'main/contentElements/parallax.js';
@import 'main/contentElements/sliderContainer.js';
@import 'main/contentElements/imageTextLink.js';
@import 'main/contentElements/heroImage.js';
@import 'main/contentElements/sliderContainer.js';

// plugins
@import 'main/plugins/news/newsCarousel.js';
Expand Down
21 changes: 21 additions & 0 deletions dev/js/main/contentElements/heroImage.js
View file
@@ -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
Expand Up @@ -43,6 +43,7 @@


// elements
@import "main/contentElements/heroImage.less";
@import "main/contentElements/bigIconTextButton.less";
@import "main/contentElements/leftIconTextButton.less";
@import "main/contentElements/imageTextLink.less";
Expand Down
170 changes: 170 additions & 0 deletions dev/styles/main/contentElements/heroImage.less
View file
@@ -0,0 +1,170 @@
//--------------------------------------------------//
// 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;
}
.hero-image__caption-link a:not(.btn){
color: @main-body-bg;
text-decoration: underline;
}
@media(min-width: 992px){
.hero-image__caption{
max-width: 70%;
}
}
.slider-container{
max-width: 100% !important;
width: 100%;
overflow: hidden;
margin-left: auto !important;
margin-right: auto !important;
}
.slider-container._full-width .swiper-container{
margin-left: 0;
margin-right: 0;
}
.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;
}
}


//--------------------------------------------------//
// 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
@@ -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
@@ -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 f25c0bc

Please sign in to comment.