Hôm nay mình sẽ giới thiệu cho các bạn cách làm hiệu ứng gallery cho ảnh với sự trợ giúp của AngularJS và CSS3. Bộ trình diễn này không hề phức tạp mà rất là dễ dàng áp dụng cho website hay các web app. Qua bài viết này, các bạn sẽ có kinh nghiệm trong việc tạo hiệu ứng 3D bằng CSS3, đồng thời cũng học thêm về cách sử dụng AngularJS, một frameword dành cho web app đang rất được thịnh hành hiện nay.
.jpg "Tạo Photo Gallery với AngularJS và CSS3")
Download
HTML
Đầu tiên, các bạn chèn những khai báo cho angular.js và các file cần thiết như sau :
<!DOCTYPE html>
<html ng-app="photogallery">
<head>
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<title>Tạo Photo Gallery với AngularJS và CSS3</title>
<meta name="description" content="Photo Gallery with AngularJS and CSS3 - demo page">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<!-- add styles -->
<link href="demo.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="http://www.thuthuatweb.net/wp-content/themes/HostingSite/favicon.ico" type="image/x-ico"/>
<!-- add javascripts -->
<script src="js/jquery-2.0.3.min.js"></script>
<script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0rc1/angular-animate.min.js"></script>
<script src="http://code.angularjs.org/1.2.0rc1/angular-touch.min.js"></script>
<script src="js/app.js"></script>
</head>
Kế tiếp là chèn đoạn sau vào bên trong thẻ <body>
<body ng-controller="MainCtrl">
Tiếp tục, chèn thêm đoạn html như sau để tạo khung chuẩn cho gallery
<!-- slider container -->
<div class="container slider">
<!-- enumerate all photos -->
<img ng-repeat="photo in photos" class="slide" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{photo.src}}" />
<!-- prev / next controls -->
<a class="arrow prev" href="#" ng-click="showPrev()"></a>
<a class="arrow next" href="#" ng-click="showNext()"></a>
<!-- extra navigation controls -->
<ul class="nav">
<li ng-repeat="photo in photos" ng-class="{'active':isActive($index)}">
<img ng-src="{{photo.src}}" alt="{{photo.desc}}" title="{{photo.desc}}" ng-click="showPhoto($index);" />
</li>
</ul>
</div>
CSS
Để tạo hiệu ứng 3D cho ảnh, các bạn sử dụng toàn bộ đoạn css sau :
.arrow {
cursor: pointer;
display: block;
height: 64px;
margin-top: -35px;
outline: medium none;
position: absolute;
top: 50%;
width: 64px;
z-index: 5;
}
.arrow.prev {
background-image: url("../images/prev.png");
left: 20px;
opacity: 0.2;
transition: all 0.2s linear 0s;
}
.arrow.next {
background-image: url("../images/next.png");
opacity: 0.2;
right: 20px;
transition: all 0.2s linear 0s;
}
.arrow.prev:hover{
opacity:1;
}
.arrow.next:hover{
opacity:1;
}
.nav {
bottom: -4px;
display: block;
height: 48px;
left: 0;
margin: 0 auto;
padding: 1em 0 0.8em;
position: absolute;
right: 0;
text-align: center;
width: 100%;
z-index: 5;
}
.nav li {
border: 5px solid #AAAAAA;
border-radius: 5px;
cursor: pointer;
display: inline-block;
height: 30px;
margin: 0 8px;
position: relative;
width: 50px;
}
.nav li.active {
border: 5px solid #FFFFFF;
}
.nav li img {
width: 100%;
}
.slider {
border: 15px solid #FFFFFF;
border-radius: 5px;
height: 500px;
margin: 20px auto;
position: relative;
width: 800px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.slide {
position: absolute;
top: 0;
left: 0;
}
.slide.ng-hide-add {
opacity:1;
-webkit-transition:1s linear all;
-moz-transition:1s linear all;
-o-transition:1s linear all;
transition:1s linear all;
-webkit-transform: rotateX(50deg) rotateY(30deg);
-moz-transform: rotateX(50deg) rotateY(30deg);
-ms-transform: rotateX(50deg) rotateY(30deg);
-o-transform: rotateX(50deg) rotateY(30deg);
transform: rotateX(50deg) rotateY(30deg);
-webkit-transform-origin: right top 0;
-moz-transform-origin: right top 0;
-ms-transform-origin: right top 0;
-o-transform-origin: right top 0;
transform-origin: right top 0;
}
.slide.ng-hide-add.ng-hide-add-active {
opacity:0;
}
.slide.ng-hide-remove {
-webkit-transition:1s linear all;
-moz-transition:1s linear all;
-o-transition:1s linear all;
transition:1s linear all;
display:block!important;
opacity:0;
}
.slide, .slide.ng-hide-remove.ng-hide-remove-active {
opacity:1;
}
JavaScript
Đây là toàn bộ đoạn script mà các bạn cần sử dụng cho gallery chạy.
'use strict';
angular.module('photogallery', ['ngAnimate', 'ngTouch'])
.controller('MainCtrl', function ($scope) {
// Set of Photos
$scope.photos = [
{src: 'https://farm9.staticflickr.com/8042/7918423710_e6dd168d7c_b.jpg', desc: 'Image 01'},
{src: 'https://farm9.staticflickr.com/8449/7918424278_4835c85e7a_b.jpg', desc: 'Image 02'},
{src: 'https://farm9.staticflickr.com/8457/7918424412_bb641455c7_b.jpg', desc: 'Image 03'},
{src: 'https://farm9.staticflickr.com/8179/7918424842_c79f7e345c_b.jpg', desc: 'Image 04'},
{src: 'https://farm9.staticflickr.com/8315/7918425138_b739f0df53_b.jpg', desc: 'Image 05'},
{src: 'https://farm9.staticflickr.com/8461/7918425364_fe6753aa75_b.jpg', desc: 'Image 06'}
];
// initial image index
$scope._Index = 0;
// if a current image is the same as requested image
$scope.isActive = function (index) {
return $scope._Index === index;
};
// show prev image
$scope.showPrev = function () {
$scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.photos.length - 1;
};
// show next image
$scope.showNext = function () {
$scope._Index = ($scope._Index < $scope.photos.length - 1) ? ++$scope._Index : 0;
};
// show a certain image
$scope.showPhoto = function (index) {
$scope._Index = index;
};
});
Nếu bạn nào chưa biết gì về Angular.js thì có lẽ sẽ hơi khó hiểu khi đọc đoạn code bên trên, rất tiếc là mình không có nhiều thời gian để giải thích cặn kẽ cho các bạn. Nếu các bạn có thắc mắc gì thì đừng ngần ngại để lại lời nhắn dưới dạng comment, để mình và mọi người có thể giải thích và chia sẻ kiến thức cho nhau.