Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FEATURE] add styles for new content element Hero Image #41

Merged
merged 1 commit into from
Feb 16, 2017
Merged

[FEATURE] add styles for new content element Hero Image #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions dev/js/main.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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}}