0

I am trying to add the parallax effect to my html page from this link

I was able to achieve it without using angular js. But if I use angularjs library image is not showing up. Even I was not able to see any image.

my sample code is like below

    <link rel="stylesheet" type="text/css" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="/assets/js/lib/parallax.min.js"></script>
<script type="text/javascript"  src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="/node_modules/angular-route/angular-route.min.js"></script>

And the code is

      <div class="parallax-window" data-parallax="scroll" data-image-src="https://pixelcog.github.io/parallax.js/img/stellar-spire-eagle-nebula-1400x900.jpg">test</div>
Kartheek Sarabu
  • 3,886
  • 8
  • 33
  • 66

2 Answers2

1

I had your problem... I resolved with a directive... but perhaps to you is not really necessary... Have you simply tryied to initialize parallax via js?

$('#your-div').parallax({ imageSrc: 'your_path_img' });

Let me know if it works... otherwise I let you see how to create a directive

Simone
  • 2,304
  • 6
  • 30
  • 79
0

I activated the parallax from the controller of the page where the parallax would show:

  app.controller('HomeController', function (){
    $('.parallax').parallax();
  });

It worked well

Manu
  • 36
  • 1