Skip to main content

How to create image Animation in angularjs

   
    We apply animation concept from angularjs, This example how to apply HTMl5 animation logic using angular directive to applied.

       This animation are applied zooming image object in a interval of time then it will move into left side of screen.

        Apply animation may need to stop or continue to run logic also applied.

Example :

Html


<div ng-app="imageAnimation">
    <div ng-controller="splashCtrl">    
        <div class="btn">
            <input type="button" value="Run" ng-click="run()"/>
            <input type="button" value="Stop" ng-click="stop()"/>
            </div>  
    <img ng-src="{{url1}}" width="200" height="200" class="picbig" />             <img ng-src="{{url2}}" width="200" height="200" class="old"/>
        <img ng-src="{{url3}}" width="200" height="200" class="old"/>
        <img ng-src="{{url4}}" width="200" height="200" class="old"/>
        <image-pro></image-pro>
       
    </div>
</div>  

Animation script in AngularJS 

            var app = angular.module('imageAnimation',[]);
app = app.controller('splashCtrl',['$scope', function($scope){
    $scope.url1 = "http://programming4.us/image/112012/Application%20Icons_3.jpg";
$scope.url2 = "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS6BFgS3ITYJBdmZ4LeRtlI5et8FJrMskp-Qo1TgCYp-IuiSQN1";
$scope.url3    = "http://watchstreetconsulting.com/wp-content/uploads/2013/10/mobile-apps-icon.png";
$scope.url4 = "http://static.squarespace.com/static/513ed917e4b0970eaf221d11/t/5159d968e4b0c7150a109fe5/1364842857364/MOBILE-APP-ICON-GREEN_300x300.png";
}]);

app.directive('imagePro',function($timeout){
    return {
         restrict: 'EA',
        link: function(scope,elm, attr, ctrl){
         
          $(".zoom").click( function(){            
              $(this).removeClass("zoom").addClass("picbig");
          });
         
          scope.run = function(){              
               $(".picbig").css("-webkit-animation-play-state", "running");    
          }
         
          scope.stop = function(){
               $(".picbig").css("-webkit-animation-play-state", "paused");
          }
        }
    }
});


CSS:


.btn{
    width:100px;
    height:80px;
}
.old
{
    display: none;
}

.current 
{
    display: visible;
}

.zoom 
{
    width:200px;
height:200px;
margin: 0px 0px 0px 200px;
z-index:98;
opacity:1;
}

.picbig{
    margin: 0px 0px 0px 200px;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: zoomObj;
    -webkit-animation-duration: 5s;   
    -webkit-animation-delay: 2s;   
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes zoomObj {
    0%   { width:200px; height: 200px;}    
    10%  {width: 210px; height: 210px;}
    20%  {width: 220px; height: 220px;}
    30%  {width: 230px; height: 230px;}
    50%  {width: 250px; height: 250px;}
    53%  {width: 250px; height: 250px; left: -1px;}
    75%  {width: 250px; height: 250px; left: -100px;}
    100%  {width: 250px; height: 250px; left: -400px; }    
}

.move
{
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;    
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;  
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {left:-0px; top:0px;}    
    30%  {left: -100px; top:0px;}
    100%  {left: -1000px; top:0px;}
}


Demo :

Comments

  1. UnknownOctober 30, 2015 at 12:02 AM

    I am reading your post from the beginning, it was so interesting to read & I feel thanks to you for posting such a good blog, keep updates regularly
    sharing with us that awesome article you have amazing blog.....
    Angularjs Training In Hyderabad

    ReplyDelete

Post a Comment

Popular posts from this blog

How has lockdown impacted Indian farmers?

How has lockdown impacted Indian farmers?             Generally compare to other sectors it's not major impacted by our Indian farmers but we acceptable minor impacts. Here we separate major two farming cultures one is mono farming culture another one poly farming culture. Mono farming :             The major impacts from our Indian farmer for monoculture. Here I have briefly explained what are the things we had faced our local farmers. Here I explain two different crops type: Daily crops : * We harvest more than 100-kilo grams daily crops like brinjal but we unable to sell those in local markets. * We are unable to reach urban markets. * We don't have enough transport facilities. * We unable buy require fertilizer and other complements * In the early stage we are facing manpower shortage but later it's not an issue. * We unable to do value-added products. * Waste is very high for somedays Se...
Post a Comment
Read more

Timer Display using AngularJS

Timer Display To display timer in a page means, we need to aware of angular directive as following $interval and $filter . Current time get from new Date() object from native java script.   $interval Directive:  A interval is wait into a millisecond or trigger to a function, This function many many time to repeatedly calling process is control to us.   Syntax:  $interval(fn, delay, [count], [invokeApply]); fn - a function to call repeatedly. Delay – number of millisecond to call a function. Count – Number of time to repeat.(0 value means no-repeat) invoteApply – set to false means it will skip. Example:  HTML: <div ng-app="timerApp">     <div ng-controller="timerController">         {{time}}     </div> </div> JAVAScript: var app = angular.module("timerApp", []); app.controller("timerController",['$scope','$interval...
Post a Comment
Read more

How to use ng-href directive in AngularJS

ng-Href Directive                  ng-Href directive is hyper link markup to a text in angularJs. This hyperlink will change able to implement dynamic url {{hash}} value. Hash value to assign in a controller to happened user click event fire to assign dynamic url. This Value is undefined means it will return to 404 page. ng-Href directive Example  HTML:      <div ng-app="anchor">     <div ng-controller="anchorController">         <a ng-href="http://www.google.com" ng-click="show($event)">Anchor Tag</a>     </div>   </div> Javascript :  var anch = angular.module('anchor', []); anch.controller('anchorController',['$scope', '$window', function($scope, $window){     $scope.show = function(obj) {       $window.open(obj.target.href);     } }]); Result :  Dem...
4 comments
Read more