Parallax effect

[jwillmer]

I implemented a new feature in my form. Maybe you like to have it aswell: Paralax Effect Demo

Usage:

<div class="bg-scroll" style="background-image: url('{{ site.github.url }}/media/img/mountain1.jpg')"></div>

CSS:

.bg-scroll {
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    height: 500px;
}

@media only screen and (max-width: 780px) {
    .bg-scroll {
        height: 350px;
    }
}

[serenader2014]

The idea is great. But sadly it's hard to implement in Ghost. Ghost doesn't allow you to generate custom markup, so if you want to produce this feature, you need to write the hole markup, just like you said:

<div class="bg-scroll" style="background-image: url('{{ site.github.url }}/media/img/mountain1.jpg')"></div>

The image's url is generally provided by Ghost when user uploaded a image, so in order to achieve this feature, you'll need to upload the image first, and then modify the image's markdown to the correct markup. This is painful and useless.

Instead, if Ghost does provide a custom markdown parsing, like:

![image](/path/to/image.png){paralax}

and translate the markdown to:

<div class="bg-scroll" style="background-image: url('{{ site.github.url }}/media/img/mountain1.jpg')"></div>

That's what I'm looking for. Otherwise i don't see any reason why I want to type such complicated code and just want to achieve this feature.