Skip to content

Commit

Permalink
[FEATURE] add parallax element
Browse files Browse the repository at this point in the history
  • Loading branch information
dmytro committed May 6, 2016
1 parent e1b0452 commit c4b4371
Show file tree
Hide file tree
Showing 8 changed files with 133 additions and 2 deletions.
3 changes: 2 additions & 1 deletion bower.json
View file
Expand Up @@ -9,6 +9,7 @@
"jQuery.dotdotdot": "1.7.4",
"spectrum": "1.7.1",
"awesomplete": "https://github.com/LeaVerou/awesomplete.git#8cd36cc49",
"simplelightbox": "1.8.1"
"simplelightbox": "1.8.1",
"jquery.stellar": "0.6.2"
}
}
Binary file added dev/images/parallax_image.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions dev/js/components.js
View file
Expand Up @@ -25,3 +25,11 @@
//==============================================================================
@import '../bower_components/simplelightbox/dist/simple-lightbox.js';
//==============================================================================


// Parallax
// parallax scrolling effects
// http://markdalgleish.com/projects/stellar.js
//==============================================================================
@import '../bower_components/jquery.stellar/jquery.stellar.js';
//==============================================================================
1 change: 1 addition & 0 deletions dev/js/main.js
View file
Expand Up @@ -5,6 +5,7 @@
// elements
@import 'main/contentElements/slider.js';
@import 'main/contentElements/carousel.js';
@import 'main/contentElements/parallax.js';

@import 'main/suggest.js';

Expand Down
15 changes: 15 additions & 0 deletions dev/js/main/contentElements/parallax.js
View file
@@ -0,0 +1,15 @@
(function($) {
'use strict';

// document load event
$(document).ready(function() {

// Parallax
// http://markdalgleish.com/projects/stellar.js
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});

})(jQuery);
2 changes: 1 addition & 1 deletion dev/styles/main.less
View file
Expand Up @@ -44,7 +44,7 @@
@import "main/contentElements/slider.less";
@import "main/contentElements/logoCarousel.less";
@import "main/contentElements/socialIcons.less";

@import "main/contentElements/parallax.less";


@import "main/nav/breadcrumbs.less";
Expand Down
7 changes: 7 additions & 0 deletions dev/styles/main/contentElements/parallax.less
View file
@@ -0,0 +1,7 @@
.parallax {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
99 changes: 99 additions & 0 deletions dev/templates/pages/index.hbs
View file
Expand Up @@ -88,6 +88,46 @@ externalLink: false #just add link (http://link.com) instead of "false" to use t
</div>
</div>


<div class="parallax" data-stellar-background-ratio="0.5" style="background-image: url('images/parallax_image.jpg'); height:auto; background-color: #1D556F;">
<div class="inverse">
<div class="container">
<div class="row">
<div class="col-md-4">
{{ renderContent 'iconTextButton'
headerLeftIcon="access_time"
header="Content element 1"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu."
buttonName="Read more"
btnAsLink=false
}}
</div>
<div class="col-md-4">
{{ renderContent 'iconTextButton'
headerLeftIcon="settings"
header="Content element 1"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu."
buttonName="Read more"
btnAsLink=true
}}
</div>
<div class="col-md-4">
{{ renderContent 'iconTextButton'
headerLeftIcon="school"
header="Content element 1"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu."
buttonName="Read more"
btnAsLink=false
}}
</div>
</div>
</div>
</div>
</div>



<div class="gray-background">
<div class="container">
<div class="row">
<div class="col-md-4">
Expand Down Expand Up @@ -119,6 +159,40 @@ externalLink: false #just add link (http://link.com) instead of "false" to use t
</div>
</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-md-4">
{{ renderContent 'bigIconTextButton'
bigTopIcon="now_widgets"
header="Content element 1"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu."
buttonName="Read more"
btnAsLink=false
}}
</div>
<div class="col-md-4">
{{ renderContent 'bigIconTextButton'
bigTopIcon="devices"
header="Content element 1"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu."
buttonName="Read more"
btnAsLink=false
}}
</div>
<div class="col-md-4">
{{ renderContent 'bigIconTextButton'
bigTopIcon="equalizer"
header="Content element 1"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu."
buttonName="Read more"
btnAsLink=false
}}
</div>
</div>
</div>


<div class="container">
<div class="row">
Expand Down Expand Up @@ -152,10 +226,35 @@ externalLink: false #just add link (http://link.com) instead of "false" to use t
</div>


<div class="margin-bottom-40">
<div class="container">
<div class="row">
<div class="col-md-12">
{{>logoCarousel}}
</div>
</div>
</div>
</div>

<div class="parallax hidden-xs" data-stellar-background-ratio="0.5" style="background-image: url('images/parallax_image.jpg'); height:auto; background-color: #1D556F;">
<div class="inverse">
<div id="c181" class="container ">
<div class="row">
<div class="col1 col-md-8 one-column-align-center">
<div class="blue-mountaih-header">
<div id="c183" class="text-center ">
<h2>Lorem ipsum dolor sit amet markum</h2>
</div>
</div>
<div id="c183" class="text-center">
<div class="ce-textpic ce-right ce-intext">
<div class="ce-bodytext">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

0 comments on commit c4b4371

Please sign in to comment.