No Animation or Parralax at Angular Pro

<a class="btn light-blue lighten-2 btn-lg wow fadeInDown" data-wow-delay="0.3s" ripple-radius>portfolio</a> 
<a class="btn btn-indigo btn-lg wow fadeInDown" data-wow-delay="0.3s" ripple-radius>About me</a>

<a class="btn blue accent-1 btn-lg wow fadeInDown" data-wow-delay="0.3s" ripple-radius>portfolio</a> 
<a class="btn indigo btn-lg wow fadeInDown" data-wow-delay="0.3s" ripple-radius>About me</a>

.font-bold {
    font-weight: 500;
}

@HostListener('document:scroll', ['$event']) onScroll(event: any) {
	if (this.navbar.nativeElement.classList.contains('scrolling-navbar')) {
		if (window.pageYOffset > 120) {
			this.renderer.setElementClass(this.navbar.nativeElement, "top-nav-collapse", true);
		} else {
			this.renderer.setElementClass(this.navbar.nativeElement, "top-nav-collapse", false);
		}
	}
}

denis.frolov.mail pro commented 7 years ago

Thank you Rafal, All tips you gave helped, two more things left: 1. Navbar does not change the colour. It shrinks now as expected, but stays transparent all the time, 2. There is still no parallax effect on the page. Please advise.

---

Rafał Rogulski commented 7 years ago

Hi, Ad. 1 - Check if you copy all CSS from the example. After your navbar shring script give it class top-nav-collapse this class should have your navbar color, Ad .2 - Check if div with image background have following style background-attachment: fixed; also not all browser support paralax Regards

---

denis.frolov.mail pro commented 7 years ago

Sorry Rafal, still not working! I am not changing anything, I use your code straight, without modifications: 1 - I have just downloaded your code (mdb-angular-pro-4.2.0 now), 2 - installed dependencies (npm i), 3 - and copied the code (html and css) from your website (Intro section). Result: no parallax effect, navbar is now shrinking but stays in a small view-port mode (collapsed with "sandwich" menu button), and transparent. Just check it yourself, download and run your code. See how different it is from your demos. How to fix navbar (view port issue)? I test on all browsers. P.S. Parallax starts working only after I manualy download and add jarallax.js script to the index.html. So please either included it to the bundle or make clear instructions. Navbar colour starts applied only if styles defined in the global styles (styles.scss/css) file, but not actual component styles. Not the best practice I guess, right? With all respect, do you guys test your product prior publishing? As I said, just download and run it yourself.

---

Rafał Rogulski commented 7 years ago

Hi, 1. Parallax effect: We don't support jarallax.js lib in use project because they can provide some problems with generating angular app. We create parallax effect with help of CSS. (check updated documentation https://mdbootstrap.com/angular/sections/intros/#v-4). 2. All style which we give in the documentation you must paste in global style file because Angular have something called "View Encapsulation" (you can read more her https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html). In short, it's mean one component can't share his style with other. That's why your navbar is transparent all time. On this page, you have fixed example with parallax - https://mdbootstrap.com/angular/sections/intros/#v-4 We fix CSS parallax which don't work great. Regards

---

denis.frolov.mail pro commented 7 years ago

You fixed it! Great, what a relief eh)))). Thank you! I would also ask for your advice regarding other templates and sections. Is it legitimate to use templates from your Bootstrap (NOT Angular) section? I am apparently subscriber for your MDB PRO bundle, so can I use html form there in my Angular projects?

---

Rafał Rogulski commented 7 years ago

Hi, Yes, you can but all component which uses javascript/jQuery will not be working and can destroy some element position, of course, u can replace it with angular version of this components. Regards

---

denis.frolov.mail pro commented 7 years ago

Great, thank you Rafal! And just so you know, your product overall is good, not flawless, but hey what is flawless in our industry eh)))). If something is flawless it's already obsolete, right)))?. But what much more important is that you guys work with your customers and fix your bugs on the fly, this is the key to success. Thanks again!

---