Topic: No Animation or Parralax at Angular Pro
denis.frolov.mail pro asked 7 years ago
Rafał Rogulski free answered 7 years ago
<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 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 free 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 Regardsdenis.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 free 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. Regardsdenis.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 free 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. Regardsdenis.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!FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No