在流星上实现视差初始化

Question

I'm using materializecss as a front-end framework for my personal website I am currently developing. I used their starter Parallax template and everything works, but for some reason my Parallax images are not showing. I believe it has something to do with the initialization.

snippet of one of the parallax for the HTML:

<template name="parall">
    <div class="parallax"><img src="/public/background1.jpg">
    </div>
</template>

JS:

if (Meteor.isClient) {
    Template.parall.onRendered(function(){
        $(".parallax").parallax();
    });
}

if (Meteor.isServer) {
    Meteor.startup(function () {
        // code to run on server at startup
    });
}

Answer 1

Have you tried rendering your images with css?

.parallax {
 background-image: url("/background1.jpg");
}

Answer 2

Simply try removing "public" from your img src, and instead use "/background1.jpg". [ Assuming "public" directory is in your route project folder ].

You dont have to specify "public" while accessing resources stored in public directory. It is one among the few reserved directory names in meteor structure.

Answer 3

将div.parallax包裹在div.parallax-container中

Answer 4

Wrap the div in a parallax-container as already posted

<div class="parallax-container">
    <div class="parallax"><img src="/images/parallax1.jpg"></div>
</div>

and add the following in your CSS

.parallax{
    position:static!important 
}