时间戳

首页 > 解决方案 > 垂直幻灯片动画

html - 垂直幻灯片动画

问题描述

我试图制作一个垂直幻灯片动画，我希望它的工作方式是每当我点击单选按钮时，图片会根据我点击的按钮移动（例如，当我点击第二个单选按钮时，我想要第二张图片从按钮平滑地向上滑动并显示，我尝试的是制作一个包含图像的 div，并给每个图像的高度：100vh 并且 div 容器包含 4 个图像，所以我有一个溢出，但我已经隐藏它，所以要创建动画的错觉，我希望容器 div 与使用 transform: translateY() 属性选择的单选按钮相应地向上或向下移动，当我单独为 translateY() 提供一个常量值时（例如：

.home-main{
   transform: translateY(-50%)
}

）它工作得很好，我显示下一张图片，但我不想为每张图片硬编码，所以我使用了一个 for 循环（我使用 sass），我不知道为什么它不起作用，这就是代码为了它 ：

这是我尝试使用 for 循环制作动画的 scss 块：

@for $i from 1 to 4 {
    input:checked .home-main{
        transform: translateY($i * -25%);
    }
}

scss:

html{
    font-size: 10px;
}

body{
    height: 100vh;
    font-family: $primary-font;
    overflow: hidden;
}

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: 100%;
}

a{
    text-decoration: none;
    color: $primary-color;
    font-size: 2rem;
}

.burger-btns-container{
    position: relative;
    height: 1rem;
    width: 4rem;
    margin: 0  1rem 4.5rem 0;
    z-index: 1;
    .burger-btn{
        display: inline-block;
        background-color: $secondary-color;
        height: 25%;
        width: 100%;
        border-radius: 20%;
        pointer-events: none;
        @include transition-slider-label-and-burger-button;
    }

    .line1{
        transform: rotate(45deg) translateY(2.2rem);
        background-color: $primary-color;
    }

    .line2{
        transform: translateX(-1rem);
        opacity: 0;
        background-color: $primary-color;

    }

    .line3{
        transform: rotate(-45deg) translateY(-2.2rem);
        background-color: $primary-color;
    }

}

.logo{
    margin: 1.2rem;
    @include transition-logo;
    img{
        height: 4rem;
        width: 4rem;
    }
}
.logo-not-displayed{
    opacity: 0;
}

.main-nav{
    margin-top: 10rem;
    padding: 20rem 0;
    height:
     100vh;
    position: absolute;
    top: -10rem;
    width: 100%;
    transform: scaleX(0);
    transform-origin: right;
    @include transition-slide;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: $secondary-color;
    ul{
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        list-style: none;
        li{
            padding-left: 20rem;
            transition: all 250ms ease-in-out;
        }
    }
}
.main-nav-active{
    transform: scaleX(1);
    @for $i from 1 to 6 {
        li:nth-child(#{$i}){
            padding-left: 0;
            transition-delay: ($i * 0.1s);
        }
    }
}

.sliders{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 40%;
    right: 3rem;

    label{
        border: .2rem solid $secondary-color;
        border-radius: 360%;
        margin: 1rem 0;
        height: 1.5rem;
        width: 1.5rem;
        @include transition-slider-label-and-burger-button;
    }

    input{
        display: none;
        &:checked+label{
            background-color: $secondary-color;
        }
    }
}

.home-main{
    display: flex;
    flex-direction: column;
    align-items: center;
    img{
        width: 100%;
        height: 100vh;
    }
}

@for $i from 1 to 4 {
    input:checked .home-main{
        transform: translateY($i * -25%);
    }
}

html:

<body>
    <header>
        <div class="logo">
            <img src="chef-hat.svg" alt="">
        </div>
        <div class="burger-btns-container">
            <span class="burger-btn"></span>
            <span class="burger-btn"></span>
            <span class="burger-btn"></span>
        </div>
        <nav class="main-nav">
            <ul>
                <li class="menu menu-selected"><a href="home.html">home</a></li>
                <li class="menu menu-selected"><a href="menu.html">menu</a></li>
                <li class="about about-selected"><a href="about.html">about us</a></li>
                <li class="chefs chefs-selected"><a href="chefs.html">our chefs</a></li>
                <li class="sign sign-selected"><a href="sign.html">sign in</a></li>
            </ul>
        </nav>
    </header>
    <div class="sliders">
        <input type="radio" class="page-sliders" id="slide1" name="hh">
        <label for="slide1"></label>
        <input type="radio" class="page-sliders" id="slide2" name="hh">
        <label for="slide2"></label>
        <input type="radio" class="page-sliders" id="slide3" name="hh">
        <label for="slide3"></label>
        <input type="radio" class="page-sliders" id="slide4" name="hh">
        <label for="slide4"></label>
    </div>
    <main class="home-main main">
        <img src="css/main-background1.jpg">
        <img src="css/main-background2.jpg">
        <img src="css/main-background3.jpg">
        <img src="css/main-background4.jpg">
    </main>
</body>

标签： htmlcsssass

解决方案

推荐阅读