5
Yatay gezinme içeren bir sayfa yapıyorum ve iyi çalışıyor. Ama şimdi biraz animasyon eklemem gerekiyor. Atlı karıncaya benzer navigasyon eklemek istiyorum. Bir ziyaretçi "İndir" düğmesini tıkladığında, tüm içerik sağdan sola kaydırılır ve ziyaretçi "Ana Sayfa" yı tıklarsa geri gider, ancak soldan sağa animasyonla. Ayrıca, bir ziyaretçi kaymaya başladığında sayfalar arasında gezinmeyi de isterim.Köşeli geçişli yönlendiricili tek sayfalık web sitesi
bazı çözümler için googled ama slaytların sırasını göz ardı eder ve her zaman kayar bir şekilde gerçekleştiren bir css-animasyon başka bir şey bulamadı. Ben açgözlü yeni ve herhangi bir yardım için minnettarım. İşte
olan benimindex.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>
ve 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('/');
});