page-about.hbs

{{!< default}}

{{! This is a page template. A page outputs content just like any other post, and has all the same
    attributes by default, but you can also customise it to behave differently if you prefer. }}

<main class="content" role="main">

    <article class="{{post_class}} page page-about tag-articleimage">

        {{#post}}
        
        <div class="post-image">
            <div class="post-image-image" data-0="opacity: 1; top: 0px" data-500="opacity: 0.2; top: 250px" style="background-image: url({{image}})">
                Post Image
            </div>
        </div>
        <header class="post-header">
            <a href="/" class="button-back"><i class="fa fa-chevron-left "></i></a>
            {{#if @blog.logo}}<div class="blog-logo" style="background-image: url({{@blog.logo}})">Blog Logo</div>{{/if}}
        </header>
        <script>
            (function ($) {
                "use strict";
            
                $(document).ready(function(){
                                
                    var $window = $(window),
                        $image = $('.post-image-image');
                    $window.on('scroll', function() {
                        var top = $window.scrollTop();
            
                        if (top < 0 || top > 1500) { return; }
                        $image
                            .css('transform', 'translate3d(0px, '+top/1.75+'px, 0px)')
                            .css('opacity', 1-Math.max(top/700, 0));
                    });
                    $window.trigger('scroll');
                    
                    var height = $('.post-image-image').height();
                        $('.post-content').css('padding-top', height + 'px');
            
                });
            
            }(jQuery));
        </script>

        

            <h1 class="post-title">{{{title}}}</h1>

            <section class="post-content">
                {{content}}
            </section>

        {{/post}}

    </article>

</main>