Menu
I am making a page with horizontal navigation, and it works fine. But now I need to add some animation. I want to add carousel-like navigation. So when a visitor clicks on “Download” button, all the content scrolled from right to left and if the visitor clicks “Home” it goes back but with left-to-right animation. I would also like it navigate between the pages when a visitor starts to scroll.
I googled for some solutions but have not found nothing but a css-animation that ignores the order of slides and performs always one way sliding. I am new to angular and I will 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 the 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('/');
});
333
I think you are looking for something like this This will animate your state transitions Now this doesn't do what you exactly want,
Hope this points you in the right direction. Happy coding.
Cheers
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
