以特定角度在对角线上滑动元素

Question

我的目标是不管设备的宽度或高度如何，以特定角度在对角线上将元素从右向左滑动。目前，我的代码仅从右上角的特定位置到左下角的特定位置执行此操作。我正在寻找的只是给它初始的右上角值和角度，它应该通过使用初始值加上角度来计算左下角。这样，无论视口的宽度或高度如何，滑动效果的角度将等于我的元素的角度，从而使其在任何设备上看起来都很好。

html

<a id="flymeby" href="#">Fly me by</a>

js

$( "#flymeby" ).click(function(e) {
$('body').append('<div class="flyby"></div>');
var left = $('.flyby').offset().left;
  e.preventDefault();
                $(".flyby").css({left:left}).animate({"left":"-500px", "top":"300px"}, 6600, "swing", function() {

                    $('.flyby').remove();
                });
});

css

body {
  overflow-x:hidden;
}
.flyby {
  width:500px;
  background:#000;
  width: 500px;
  height: 69px;
  position: absolute;
  top: 50px;
  right: -500px;
  -webkit-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: skewY(-15deg);
  -ms-transform: skewY(-15deg);
  transform: skewY(-15deg);
}
#flymeby {
  background:red;
  color:#fff;
  display:inline-block;
  padding:10px 20px;
}

到目前为止我的工作 http://jsfiddle.net/fbtv5kpz/4/

更新： 理想情况下，我希望幻灯片不只是角度而没有初始值，并且应该在屏幕中间自动从右向左滑动。

Answer 1

您可以使用animation和translate()

添加带有动画onclick和DOM a的类

Working fiddle

$("#flymeby").click(function(e) {
  $(".flyby").addClass('startFly');
});

body {
  overflow-x: hidden;
}

.flyby {
  width: 500px;
  background: #000;
  width: 500px;
  height: 69px;
  position: absolute;
  transform-origin: top right;
  transform: skewY(-15deg) translate(200%);
}

#flymeby {
  background: red;
  color: #fff;
  display: inline-block;
  padding: 10px 20px;
}

.startFly{
  animation: fly 6s linear;
}

@keyframes fly {
  100% {
 transform: skewY(-15deg) translate(-200%);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="flymeby" href="#">Fly me by</a>
<div class="flyby"></div>

更新为您附着的图像

  var w=$(window).width();
  var h=$(window).height();
  var g=h+w;
  $(".flyby").css('transform','skewY(-15deg) translateX(' + g + 'px) translateY(' + 0 + 'px)' );

$("#flymeby").click(function(e) {
  $(".flyby").addClass('startFly');
});

body {
  overflow-x: hidden;
  height: 100%;
}

html { height: 100%; }


.flyby {
  background: #000;
  width: 100px;
  height: 69px;
  position: absolute;
  transform-origin: top right;
}

#flymeby {
  background: red;
  color: #fff;
  display: inline-block;
  padding: 10px 20px;
}

.startFly{
  animation: fly 6s linear;
}

@keyframes fly {
  100% {
 transform: skewY(-15deg) translateY(80vh) translateX(0);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="flymeby" href="#">Fly me by</a>
<div class="flyby"></div>