- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我不太擅长 CSS 和动画,有人可以帮我做轮播动画吗?
这是我目前的工作:https://codepen.io/aceraven777/pen/NJYxjo
HTML:
<div class="carousel">
<div class="card-carousel">
<div class="my-card">111</div>
<div class="my-card">222</div>
<div class="my-card">333</div>
<div class="my-card">444</div>
<div class="my-card">555</div>
<div class="my-card">666</div>
<div class="my-card">777</div>
<div class="my-card">888</div>
<div class="my-card">999</div>
</div>
</div>
SCSS:
body {
padding-top: 50px;
}
.carousel {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: 'Quicksand', sans-serif;
overflow-x: hidden;
position: relative;
top: -2.5rem;
.card-carousel {
display: flex;
align-items: center;
justify-content: center;
position: relative;
.my-card {
height: 20rem;
width: 170px;
position: relative;
z-index: 1;
-webkit-transform: scale(0.6) translateY(-2rem);
transform: scale(0.6) translateY(-2rem);
opacity: 0;
cursor: pointer;
pointer-events: none;
background: #2e5266;
background: linear-gradient(to top, #2e5266, #6e8898);
transition: 1s;
}
.my-card.active {
z-index: 3;
-webkit-transform: scale(1) translateY(0) translateX(0);
transform: scale(1) translateY(0) translateX(0);
opacity: 1;
pointer-events: auto;
transition: 1s;
}
.my-card.prev, .my-card.next {
z-index: 2;
opacity: 0.6;
pointer-events: auto;
transition: 1s;
}
.my-card.prev {
-webkit-transform: scale(0.8) translateY(-1rem) translateX(26rem);
transform: scale(0.8) translateY(-1rem) translateX(26rem);
}
.my-card.next {
-webkit-transform: scale(0.8) translateY(-1rem) translateX(-26rem);
transform: scale(0.8) translateY(-1rem) translateX(-26rem);
}
}
}
JS:
var $num = $('.card-carousel .my-card').length;
var $even = $num / 2;
var $odd = ($num + 1) / 2;
if ($num % 2 == 0) {
$('.card-carousel .my-card:nth-child(' + $even + ')').addClass('active');
$('.card-carousel .my-card:nth-child(' + $even + ')').prev().addClass('prev');
$('.card-carousel .my-card:nth-child(' + $even + ')').next().addClass('next');
} else {
$('.card-carousel .my-card:nth-child(' + $odd + ')').addClass('active');
$('.card-carousel .my-card:nth-child(' + $odd + ')').prev().addClass('prev');
$('.card-carousel .my-card:nth-child(' + $odd + ')').next().addClass('next');
}
$('.card-carousel .my-card').on('click', function() {
if ($('.card-carousel').is(':animated')) {
return;
}
var $slide = $('.card-carousel .active').width();
if ($(this).hasClass('next')) {
$('.card-carousel').animate({left: '-=' + $slide});
} else if ($(this).hasClass('prev')) {
$('.card-carousel').animate({left: '+=' + $slide});
}
$(this).removeClass('prev next');
$(this).siblings().removeClass('prev active next');
$(this).addClass('active');
$(this).prev().addClass('prev');
$(this).next().addClass('next');
});
// Keyboard nav
$('html body').keydown(function(e) {
if (e.keyCode == 37) { // left
$('.card-carousel .active').prev().trigger('click');
}
else if (e.keyCode == 39) { // right
$('.card-carousel .active').next().trigger('click');
}
});
如何让动画流畅?就像什么时候去下一张卡片一样,背景中的卡片在转圈。我怎样才能让它直线移动。
我的代码基于这里:https://www.jqueryscript.net/demo/Smooth-Card-Carousel-jQuery-CSS3/
最佳答案
嘿,这是你需要的吗。
对您的 SCSS 做了一些改动
你的代码
.my-card.prev {
-webkit-transform: scale(0.8) translateY(-1rem) translateX(26rem);
transform: scale(0.8) translateY(-1rem) translateX(26rem);
}
.my-card.next {
-webkit-transform: scale(0.8) translateY(-1rem) translateX(-26rem);
transform: scale(0.8) translateY(-1rem) translateX(-26rem);
}
SCSS
.my-card.prev {
-webkit-transform: scale(0.8) translateY(-1rem) translateX(0rem);
transform: scale(0.8) translateY(-1rem) translateX(0rem);
}
.my-card.next {
-webkit-transform: scale(0.8) translateY(-1rem) translateX(0rem);
transform: scale(0.8) translateY(-1rem) translateX(0rem);
}
var $num = $('.card-carousel .my-card').length;
var $even = $num / 2;
var $odd = ($num + 1) / 2;
if ($num % 2 == 0) {
$('.card-carousel .my-card:nth-child(' + $even + ')').addClass('active');
$('.card-carousel .my-card:nth-child(' + $even + ')').prev().addClass('prev');
$('.card-carousel .my-card:nth-child(' + $even + ')').next().addClass('next');
} else {
$('.card-carousel .my-card:nth-child(' + $odd + ')').addClass('active');
$('.card-carousel .my-card:nth-child(' + $odd + ')').prev().addClass('prev');
$('.card-carousel .my-card:nth-child(' + $odd + ')').next().addClass('next');
}
$('.card-carousel .my-card').on('click', function() {
if ($('.card-carousel').is(':animated')) {
return;
}
var $slide = $('.card-carousel .active').width();
if ($(this).hasClass('next')) {
$('.card-carousel').animate({left: '-=' + $slide});
} else if ($(this).hasClass('prev')) {
$('.card-carousel').animate({left: '+=' + $slide});
}
$(this).removeClass('prev next');
$(this).siblings().removeClass('prev active next');
$(this).addClass('active');
$(this).prev().addClass('prev');
$(this).next().addClass('next');
});
// Keyboard nav
$('html body').keydown(function(e) {
if (e.keyCode == 37) { // left
$('.card-carousel .active').prev().trigger('click');
}
else if (e.keyCode == 39) { // right
$('.card-carousel .active').next().trigger('click');
}
});
body {
padding-top: 50px;
}
.carousel {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: "Quicksand", sans-serif;
overflow-x: hidden;
position: relative;
top: -2.5rem;
}
.carousel .card-carousel {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.carousel .card-carousel .my-card {
height: 20rem;
width: 170px;
position: relative;
z-index: 1;
-webkit-transform: scale(0.6) translateY(-2rem);
transform: scale(0.6) translateY(-2rem);
opacity: 0;
cursor: pointer;
pointer-events: none;
background: #2e5266;
background: linear-gradient(to top, #2e5266, #6e8898);
transition: 1s;
}
.carousel .card-carousel .my-card.active {
z-index: 3;
-webkit-transform: scale(1) translateY(0) translateX(0);
transform: scale(1) translateY(0) translateX(0);
opacity: 1;
pointer-events: auto;
transition: 1s;
}
.carousel .card-carousel .my-card.prev, .carousel .card-carousel .my-card.next {
z-index: 2;
opacity: 0.6;
pointer-events: auto;
transition: 1s;
}
.carousel .card-carousel .my-card.prev {
-webkit-transform: scale(0.8) translateY(-1rem) translateX(26rem);
transform: scale(0.8) translateY(-1rem) translateX(0rem);
}
.carousel .card-carousel .my-card.next {
-webkit-transform: scale(0.8) translateY(-1rem) translateX(-26rem);
transform: scale(0.8) translateY(-1rem) translateX(0rem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel">
<div class="card-carousel">
<div class="my-card">111</div>
<div class="my-card">222</div>
<div class="my-card">333</div>
<div class="my-card">444</div>
<div class="my-card">555</div>
<div class="my-card">666</div>
<div class="my-card">777</div>
<div class="my-card">888</div>
<div class="my-card">999</div>
</div>
</div>
关于javascript - Carousel slider - 如何流畅地制作卡片动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55177100/
我想在单击按钮时进行移动:向左。这是针对移动运动的... 问题在于它的移动,但只有一次。我需要点击按钮发送垃圾邮件... 代码: 在创建中: this.buttonleft.inputEnabled
前言 今天大姚给大家分享一个.NET开源(MIT License)、免费、现代化、流畅、可测试、可移植的URL构建器和HTTP客户端库:Flurl。 项目介绍 Flurl是一个集现代性、流畅性、
我不确定其他与我的问题明显相似的问题是否归结为同一主题。 请考虑这段代码(为更清楚起见,为 head 部分提取了 CSS 代码): body { margin: 0;
我是一名学习 html/css 的学生,我在创建第一个网站时遇到了问题。我在配置页面时遇到了很多困难,因此它是流动的而不是固定的。我配置了一个框、图像和一些文本,因此它们在页面上是绝对的,但我无法使页
在我的游戏中,我已将角色设置为移动。它的设置方式是: if game_over_state == False: if event.type == pygame.KEYDOWN:
我一直在研究代码,但似乎无法让它工作。我用谷歌搜索,在这个网站上搜索了 13 页,但仍然找不到我要找的答案。 我希望视频以特定尺寸开始,然后随着我调整浏览器大小(从桌面到 iPad/iPhone)而缩
我已经从 sql server 2005 切换到 mysql,这并不是一个真正的问题。 我对 sql server 中存在的 (n)varchar 有一个小问题。通常我用过: mapping.Map(
我必须使用自定义 odbc 驱动程序。 我需要作为连接字符串传递的只是 DSN。 我如何使用(流畅)nhibernate 做到这一点? FluentNHibernate.Cfg.Db 仅提供带有 DS
我无法找到我们网站上动态显示的弹出窗口。最初该元素处于以下 html 状态: 使用jquery的show和hide,div显示5秒,稍后隐藏。 在我的 Selenium 脚本中,我尝试使用以下语句等
我有一个 two/three基于屏幕尺寸的列布局。 如果窗口大小大于 1000比我需要遵循 3 column其他布局我需要遵循 two column布局。 我是用JS实现的,但是代码很乱。现在我想用
我有一个 Flutter 应用程序,随着时间的推移和添加的功能越来越多,它变得越来越笨拙。因此,是否有一些实用程序可以使其像 60FPS 一样流畅? 我知道这里有一些官方指南:https://docs
我在如何实现 $(window).smartresize() 上纠结了几个小时使我的 div 流畅的功能。 我使用了这个 theme 中的 javascript但是当我尝试自己实现它时,我的 div
当我尝试通过 canvas.getContext('2d') 和 canvas.getContext('webgl') 将相同的 PNG 文件加载到 Canvas 中时,发现与canvas2d相比,w
我有一个所有实体的基类: public class BaseClass { public int SomeProperty {get; set;} } public class SomeEnt
我正在从事一个对时间相当敏感的元素。任务是制作一个微型网站,用户可以通过他们的智能手机访问该网站,在那里他们可以访问许多电影。他们会扫描二维码(我知道他们已经死了,我没有计划这次事件)。并登陆这个网站
我们正在使用Entity Framework 5.0。和数据库MySQL。当我们尝试迁移时间时出现异常。 could not be created because the principal key
快速问题:如何将传递给shiny.fluent::Text函数的文本设置为粗体?更广泛地说,如何将样式选项传递给此函数?。在函数的帮助页面中,它是这样写的。但我不明白如何使用这个变量参数。。我试着在不
我是一名优秀的程序员,十分优秀!