No Animation or Parralax at Angular Pro


Topic: No Animation or Parralax at Angular Pro

denis.frolov.mail pro asked 4 years ago

Hello, I downloaded and unzipped the project (MDB_Angular_PRO_4.1.0.zip), Installed packages (npm i), Copied offered css and html code from https://mdbootstrap.com/angular/sections/intros/, Built/run the project, Everything works fine, except neither nav-bar has an animation (shrinking/changing the colour), nor the page has parallax effect, as per your demos (I am talking in particular about "Parallax Effect" intro section, however I checked them all), Tried adding the "scrolling-navbar" class to the nav tag (again, as per the source code on your demo page), no success. Am I missing something? Also: The colours of the buttons are slightly different from your demos, "NATALIE" font is bolder than the one on your demo, Nav-bar logo and buttons have black waves effect instead of white (as per your demo). What should I do/add to make it look and behave similar to your demo. Thanks!
Hi, Colors and font style can be different because the demo of intros is created on an older version of MDB Angular. But we can quickly change it. 1. Buttons color: https://mdbootstrap.com/angular/content/colors/ Example code:
<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>
Fix:
<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>
2. “NATALIE” font bold: add the following style:
.font-bold {
    font-weight: 500;
}
3. Waves effect colour: https://mdbootstrap.com/angular/directives/waves-effect/ Add waves-light class to all elements which have ripple-radius and should have light wave colour. 4. With shrinking animation is little harder. First, you must change import for your free MDB Angular in app.module.ts. It should be import { MDBBootstrapModule } from './typescripts/angular-bootstrap-md/free';. Next open file navbarComponent.ts, is place in typescritp/angular-bootstrap-md/free/navbars/. At end of file, before closing bracket } add following code:
@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);
		}
	}
}
Check if you have added class scrolling-navbar, and test. Regards

denis.frolov.mail pro commented 4 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 4 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 4 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 4 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 4 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 4 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 4 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!

Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No