All geek questions in one place

One carousel navigation page website using angular -ui-router

I am making a horizontal navigation page and it works great. But now I need to add animation. I want to add carousel navigation. Therefore, when a visitor clicks the Download button, all content scrolls from right to left, and if the visitor clicks Home, he returns, but with animation from left to right. I would also like it to move between pages when a visitor starts scrolling.

I was looking for some solutions, but did not find anything other than css animation, which ignores the order of the slides and always always performs one shift method. I am new to angular and I would appreciate any help.

Here is my index.html

 <!DOCTYPE html> <html lang="es" ng-app="opw"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="css/bootstrap-3.3.5.min.css" /> </head> <body> <!-- NAVIGATION --> <nav class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" ui-sref="#">One page website</a> </div> <ul class="nav navbar-nav"> <li><a ui-sref="home">Inicio</a></li> <li><a ui-sref="how_does_it_work">How does it work?</a></li> <li><a ui-sref="wanted">Wanted</a></li> <li><a ui-sref="app">Download app</a></li> </ul> </nav> <!-- MAIN CONTENT --> <div class="container"> <div ui-view></div> </div> <script src="node_modules/angular/angular.min.js"></script> <script src="node_modules/angular-animate/angular-animate.min.js"></script> <script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script></script> <script src="js/app.js"></script> </body> </html>

and app.js

 angular.module('opw', ['ui.router']) // router configuration .config(function ($stateProvider, $urlRouterProvider) { $stateProvider // HOME STATES AND NESTED VIEWS ======================================== .state('home', { url: '/', templateUrl: 'template/homepage/home.html' }) // HOW-DOES-IT-WORK PAGE AND MULTIPLE NAMED VIEWS ================================= .state('how_does_it_work', { url: '/how-does-it-work', templateUrl: 'template/homepage/hdiw.html' }) // WANTED PAGE AND MULTIPLE NAMED VIEWS ================================= .state('wanted', { url: '/wanted', templateUrl: 'template/homepage/wanted.html' }) // DOWNLOAD-APP PAGE AND MULTIPLE NAMED VIEWS ================================= .state('app', { url: '/download', templateUrl: 'template/homepage/app.html', }); $urlRouterProvider.otherwise('/'); });
+5
source share
1 answer

I think you are looking for something like this. This will animate your state transitions. Now it doesn’t do what you definitely want,

  • You want the animation to change when the direction of navigation changes to the opposite. To achieve the goal, I suggest you use an ng class to apply the class in the direction of navigation.
  • You want the animation to go through all the states before clicking on the house. Now this can be achieved using the data structure of the stack and simply pressing all the states as you move forward, and when you click on the house the stack elements appear and go to this state, do this until the house is reached / the stack is empty.

Hope this indicates that you are in the right direction. Happy coding.

Greetings

+1
source

Source: https://habr.com/ru/post/1234406/

More articles:


All Articles