JSFiddle - React, Tailwind, and code Playground

word updater angular

by Andrew Pougher

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<div class="container-fluid text-center" ng-controller="APcntrl">

  <section class="bgred helperswitch overlay-color">
    <h2>Let us help Your <span class="animated {{fx || 'fadeInLeft'}}">{{whatthe}}</span></h2> </section>

</div>










</div>

CSS

@import url("https://fonts.googleapis.com/css?family=Lato:300,400,900");
@import url('https://fonts.googleapis.com/css?family=Anton');
body,
input,
select,
textarea {
  color: #7c8081;
  font-family: 'Lato', sans-serif;
  font-size: 15pt;
  font-weight: 300;
  letter-spacing: 0.025em;
  line-height: 1.75em;
}

a {
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  color: #3fb1a3;
  text-decoration: none;
  border-bottom: dotted 1px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: inherit;
  font-weight: 300;
  line-height: 1.5em;
  margin-bottom: 1em;
  text-transform: uppercase;
}

a:hover {
  border-bottom-color: transparent;
}

strong,
b {
  font-weight: 400;
}

p,
ul,
ol,
dl,
table,
blockquote {
  margin: 0 0 2em 0;
}
.helperswitch {
  margin: 0;
  font-size:15px;
  padding: 10px
}
.overlay-color {
  background-image: linear-gradient(130deg, rgba(73, 84, 222, 0.85) 0%, rgba(170, 73, 222, 0.85) 100%);
  background-image: -webkit-linear-gradient(130deg, rgba(73, 84, 222, 0.85) 0%, rgba(170, 73, 222, 0.85) 100%);
  background-image: -moz-linear-gradient(130deg, rgba(73, 84, 222, 0.85) 0%, rgba(170, 73, 222, 0.85) 100%);
  background-image: -ms-linear-gradient(130deg, rgba(73, 84, 222, 0.85) 0%, rgba(170, 73, 222, 0.85) 100%);
  background-image: -o-linear-gradient(130deg, rgba(73, 84, 222, 0.85) 0%, rgba(170, 73, 222, 0.85) 100%);
  /* 15% transparency */
}

.overlay-color-full {
  background-image: linear-gradient(130deg, #4954de 0%, #aa49de 100%);
  background-image: -webkit-linear-gradient(130deg, #4954de 0%, #aa49de 100%);
  background-image: -moz-linear-gradient(130deg, #4954de 0%, #aa49de 100%);
  background-image: -ms-linear-gradient(130deg, #4954de 0%, #aa49de 100%);
  background-image: -o-linear-gradient(130deg, #4954de 0%, #aa49de 100%);
  /* 0% transparency */
}

 



@media (max-width: 480px) {
  .helperswitch {
...

JavaScript

var app = angular.module('myApp', []);
app.controller('APcntrl', function($scope, $http, $log, $document, $timeout) {

  $scope.quotes = ["SHOP", "FACTORY", "STORE", "PRACTICE", "SALON", "CLINIC"];
  $scope.whatthe = $scope.quotes[0];
  var runWords = function() {

    $scope.whatthe = $scope.quotes[Math.floor(Math.random() * $scope.quotes.length)];
    $scope.fx = $scope.fx == "fadeInLeft" ? "fadeInRight" : "fadeInLeft";
    setTimeout(function() {
      $scope.$apply(runWords);
    }, 1500);
  }

  setTimeout(function() {
    $scope.$apply(runWords);
  }, 1500);

});