Simplicity sliding notebook

Hi
I really like the "Sliding notebook" feature on the frontpage of your Simplicity template, and I would like to use it in the Creativity template. Is this possible? Its really the 2 column layout and the responsive images, plus button, that I like. The sliding image on scrolldown is a bonus.
Thanks.

Hi

the code for this is a simple HTML module with a code like:

Code: Select all

<p class="gkCentered">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque faucibus risus non iaculis. Fusce a augue ante, pellentesque pretium erat. Fusce in turpis in velit tempor pretium. Integer a leo libero.</p>
<div class="gkHorizontalSlide">
<div class="gkHorizontalSlideLeftColumn">
<h2>Joomla! and WordPress blog theme inspired by Metro Windows 8 UI</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget elit eu velit vehicula feugiat. Integer viverra metus vitae lectus dictum eleifend. Lorem ipsum dolor sit amet. Donec viverra lobortis feugiat. Sed id odio ante.</p>
<p>Duis bibendum metus eu urna placerat mattis! Duis bibendum tempor massa at tristique. Integer viverr metus vitae lectus dictum eleifend amet.</p>
<p><a class="button" href="#">View Details</a></p>
</div>
<div class="gkHorizontalSlideRightColumn"><img src="templates/gk_simplicity/images/demo/demo_notebook.png" alt="Notebook" /></div>
</div>


and there is a css code which looks like this:

Code: Select all

/* Horizontal slide */
.gkHorizontalSlide {
   clear: both;
}
.gkHorizontalSlideLeftColumn {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   float: left;
   padding: 120px 0 0 0;
   width: 38%;
}
.gkHorizontalSlideLeftColumn h2 {
   color: #333;
   font-size: 28px;
   font-weight: 300;
   line-height: 38px;
   margin-bottom: 40px;   
}
.gkHorizontalSlideLeftColumn p {
   font-size: 18px;
   font-weight: 300;
   line-height: 28px;
}
.gkHorizontalSlideLeftColumn a.button {
   background: #4c90fe;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   color: #fff;
   font-size: 18px;
   height: 54px;
   line-height: 55px;
   margin-top: 20px;
   padding: 0 36px;
}
.gkHorizontalSlideLeftColumn a.button:active,
.gkHorizontalSlideLeftColumn a.button:focus,
.gkHorizontalSlideLeftColumn a.button:hover {
   background: #fec54c;
}
.gkHorizontalSlideRightColumn {
   border-right: 1px solid #ddd;
   float: right;
   margin: 0 0 -170px 0;
   overflow: hidden;
   padding: 50px 0 60px 0;
   width: 60%;
}
.gkHorizontalSlideRightColumn img {
   display: block;
   margin-left: 100%;
   max-width: 100%;
   -webkit-transition: margin-left .6s ease;
   -moz-transition: margin-left .6s ease;
   -ms-transition: margin-left .6s ease;
   -o-transition: margin-left .6s ease;
   transition: margin-left .6s ease;
}
.gkHorizontalSlideRightColumn.loaded img {
   margin-left: 0;
}


As a last step a small javascrit:

Code: Select all

   jQuery('.gkHorizontalSlideRightColumn').each(function(i,element) {
      elementsToAnimate.push(['animation', element, jQuery(element).offset().top]);
   });


This all makes it work, so when You use it, than it may require just a little changes to fit the different template. I'm affraid I cannot help more. This request is considered as customization, which we do not support. Sorry.

Hi
Thanks very much. That's a huge help already. Great support these days from Gavick, and the templates keep getting better.

Hi

That's really nice to hear it. Just let me know if You were able to make it? Code is spread across couple of files, so I may have missed something.