CODEWITHSUNDEEP
jqueryjquery-ui
afzaaldeveloper1
afzaaldeveloper1

Reputation: 393

Image rotation of company logo

I have a main webpage and I want to add the following animation: The company logo should start rotating from the right of the screen and then stop (and align properly) when it reaches the center of the page. I believe jQuery UI should be used for this but I am not finding anything and don't know how to place that effect on my logo. Any help would be greatly appreciated Thank you

<!DOCTYPE html>
<html ng-app="myHome">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Home Page</title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css" />
        <link rel="stylesheet" href"https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.css"/>
        <link rel="stylesheet" href="/css/redirect.css"/>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"> </script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><!--This is to call Angular JS-->
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script>
        <script src="/js/redirect.js"></script>  
    </head>
    <body>
        <div class="container">
            <div class="row" id="rotate">
                <div class="col-md-6 col-md-offset-3">
                    <img src="/css/PrattLogo_75.png">
                </div>
            </div>
            <div class="row">
                <h1>WHAT TYPE OF QUOTE ARE YOU REQUESTING:</h1><br>
                <h1>DIGITAL OR SCREEN QUOTE?</h1>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <button type="button" class="btn btn-success">DIGITAL QUOTE</button>
                    <button type="button" class="btn btn-success">SCREEN QUOTE</button>
                </div>
            </div>
        </div>
    </body>

Here is my css

body {
    padding-top: 30px;
    padding-bottom: 20px;
    background: #43cea2; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #43cea2 , #185a9d); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #43cea2 , #185a9d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */      
}

footer {
    color:white;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom:15px;
}

#rotate{
    -moz-animation: rotate 6s 1;
    -webkit-animation: rotate 6s 1;
    -o-animation: rotate 6s 1;
    -webkit-border-radius: 5px;

}
.btn {
    background-color: #008CBA; /* Blue */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.btn:hover {
    background-color: #4CAF50;
    border:none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
}

Upvotes: 0

Views: 216

Answers (1)

Twisty
Twisty

Reputation: 30893

If you view the source of the Example provided by @VelmimirTchatchevsky you can see exactly what is done via CSS. Here it is on it's own:

https://jsfiddle.net/Twisty/et7sx8a2/

HTML

<h2>CSS3 Animations</h2>
<p>CSS3 animations allows animation of most HTML elements without using JavaScript or Flash!</p>
<div id="animated_div">CSS3
  <br><span style="font-size:10px;">Animation</span>
</div>

CSS

#animated_div {
  width: 76px;
  height: 47px;
  background: #92B901;
  color: #ffffff;
  position: relative;
  font-weight: bold;
  font-size: 20px;
  padding: 10px;
  animation: animated_div 5s 1;
  -moz-animation: animated_div 5s 1;
  -webkit-animation: animated_div 5s 1;
  -o-animation: animated_div 5s 1;
  border-radius: 5px;
  -webkit-border-radius: 5px;
}

@keyframes animated_div {
  0% {
    transform: rotate(0deg);
    left: 0px;
  }
  25% {
    transform: rotate(20deg);
    left: 0px;
  }
  50% {
    transform: rotate(0deg);
    left: 500px;
  }
  55% {
    transform: rotate(0deg);
    left: 500px;
  }
  70% {
    transform: rotate(0deg);
    left: 500px;
    background: #1ec7e6;
  }
  100% {
    transform: rotate(-360deg);
    left: 0px;
  }
}

@-webkit-keyframes animated_div {
  0% {
    -webkit-transform: rotate(0deg);
    left: 0px;
  }
  25% {
    -webkit-transform: rotate(20deg);
    left: 0px;
  }
  50% {
    -webkit-transform: rotate(0deg);
    left: 500px;
  }
  55% {
    -webkit-transform: rotate(0deg);
    left: 500px;
  }
  70% {
    -webkit-transform: rotate(0deg);
    left: 500px;
    background: #1ec7e6;
  }
  100% {
    -webkit-transform: rotate(-360deg);
    left: 0px;
  }
}

@-moz-keyframes animated_div {
  0% {
    -moz-transform: rotate(0deg);
    left: 0px;
  }
  25% {
    -moz-transform: rotate(20deg);
    left: 0px;
  }
  50% {
    -moz-transform: rotate(0deg);
    left: 500px;
  }
  55% {
    -moz-transform: rotate(0deg);
    left: 500px;
  }
  70% {
    -moz-transform: rotate(0deg);
    left: 500px;
    background: #1ec7e6;
  }
  100% {
    -moz-transform: rotate(-360deg);
    left: 0px;
  }
}

@-o-keyframes animated_div {
  0% {
    transform: rotate(0deg);
    left: 0px;
  }
  25% {
    transform: rotate(20deg);
    left: 0px;
  }
  50% {
    transform: rotate(0deg);
    left: 500px;
  }
  55% {
    transform: rotate(0deg);
    left: 500px;
  }
  70% {
    transform: rotate(0deg);
    left: 500px;
    background: #1ec7e6;
  }
  100% {
    transform: rotate(-360deg);
    left: 0px;
  }
}

Since this is W3Schools, they do it overkill to make sure it works no matter what and covers every possible scenario. They use @keyframes and transform to create the animation. Your final code will make use of these as well, but will do different things.

I would advise learning each part and then combining them. Figure out just the CSS you need for your site. Test it in the common browsers, and adjust as needed.

Upvotes: 1

Related Questions