JSFiddle - React, Tailwind, and code Playground

Advert Board CCS3 - Test

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div ng-app="myApp" ng-controller="mainAPP">


  <div style="background-color:#c1f3ff;" class="article-hero" id="artboard"><img src="https://placehold.it/400/ecde33/ffffff/" alt="" class="article-hero__image topme img-responsive" draggable></div>

</div>

CSS

*,
*:before,
*:after {
  box-sizing: border-box;
}

.article-hero {
  position: relative;
  padding-bottom: 40%;
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  overflow: hidden;
}

.article-hero__image {
  position: absolute;

  height: 100%;
      max-width: 400px;
    width: auto;

  right: 0;
  -webkit-animation: fadeUp 1s;
  animation: fadeUp 1s;
}

img {

  width: auto;
  height: auto;
}

@-webkit-keyframes fadeUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
    transform: translateY(100px)
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
    transform: translateY(100px)
  }
}

JavaScript

var app = angular.module('myApp', []);
  app.controller('mainAPP', function($scope) {


  });
  /*----------------------------------------------------------
  // Make draggable only
------------------------------------------------------------*/
  app.directive('draggable', function() {
    return {
      // A = attribute, E = Element, C = Class and M = HTML Comment
      restrict: 'A',
      scope: {
        dragOptions: '=draggable'
      },
      //The link function is responsible for registering DOM listeners as well as updating the DOM.
      link: function(scope, element, attrs) {
        //$(element).draggable(scope.dragOptions);
        $(element).draggable({
          containment: "#artboard",
          cursor: "move",
          stack: ".topme", // z-index at last! 
          opacity: 0.3,
          scroll: false,
          axis: "x"
        });
      }
    };
  });