wagerfield / parallax

Parallax Engine that reacts to the orientation of a smart device
http://wagerfield.github.io/parallax/
Other
16.45k stars 2.14k forks source link

'Layers' not showing up? #245

Closed JimVerr closed 6 years ago

JimVerr commented 6 years ago

First of all thx a lot for this framework and it looks great when I first found it!

I've ran into some issues tho and after a lot of trying I'm about to give up.. It won't show the Layers of SVG's that I'll show below. I haven't got any error's in the console so I'm kinda stuck after trying a lot of things that didn't work out..

This is my Scene `

          <div id="middle_mt" data-depth="0.6"><img src="img/middle_mt.svg"></div>
          <div id="front_mt" data-depth="0.6"><img src="img/front_mt.svg"></div>
        </div>`

The Javascript

var scene = $('#scene').get(0); var parallaxInstance = new Parallax(scene);

When I try and load the page, everything is fine except for the Scene and layers. It's not showing the 3 svg images. There are no error's in the console but I can see the script calculating when I hover in the empty page.

Here is a quick link to the project online: http://i272879.iris.fhict.nl/parallax/#home

I'm missing something obvious hopefully,,, :(

Edit: Link to a zip with my project http://i272879.iris.fhict.nl/parallax/Web.zip

reneroth commented 6 years ago

You're floating the images, which causes their parent container (the layer elements) to collapse, having a height of 0. Easiest solution would be to use text-align instead of floating

JimVerr commented 6 years ago

Thanks a lot! Got it working now :)