Как мне переместить обтравочную маску вниз в CSS? - PullRequest
Новая
       7

Как мне переместить обтравочную маску вниз в CSS?

0 голосов
/ 23 мая 2018

Итак, у меня есть обтравочная маска в CSS изображения, использующая -webkit-clip-path: inset(0 0 90% 0); и clip-path: inset(0 0 90% 0);.То, что я хочу сделать с этим, состоит в том, чтобы маска отсечения сместилась вниз, достигая эффекта -webkit-clip-path: inset(90% 0 0 0); и clip-path: inset(90% 0 0 0);.Как мне оживить это, используя ванильный Javascript, а не jQuery, чтобы он перешел из предыдущего состояния в последнее?

Полный код: 

@font-face {
    font-family: Fraktur;
    src: url(typefaces/BreitkopfFraktur.ttf);
}

@font-face {
    font-family: Noe;
    src: url(typefaces/noe.ttf);
}

html {
    background-image: url(images/hero.jpg);
    overflow-x: hidden; 
    overflow-y: auto; 

}

body {
    text-align: center;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

h1 {
    font-family: Fraktur;
    margin-top: 15%;
    color: white;
    font-size: 12em;
    display: inline;
}
#duotonetop {
    padding: 0 0 0 0;
    -webkit-clip-path: inset(0 0 90% 0);
    clip-path: inset(0 0 90% 0);
    height: auto;
    position: fixed;
    display: block;
        transform: translateY(-500px);
}

.cont {
    margin-top: 15%;
}
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="css/style.css">
 
</head>

<body>
    <center>
        <div class="cont">
            <span class="js-animate" data-speed="2" data-position="top" style="transform: translate3d(0px, 0px, 0px);">
                <h1>a</h1>
            </span>
            <h1>m</h1>
            <h1>s</h1>
            <h1>t</h1>
            <h1>e</h1>
            <h1>r</h1>
            <h1>d</h1>
            <h1>a</h1>
            <h1>m</h1>
        </div>
    </center>
    <a onclick="bottomClip()"><img id="duotonetop" src="css/images/hero_duotone.png"></a>
<script>
    function bottomClip() {
    document.getElementById("duotonetop").style.clip = "inset(90% 0 0 0)";
}

function reClip() {
    document.getElementById("duotonetop").style.clip = "inset(0 0 90% 0)";
}
</script>
</body>

</html>

1 Ответ

0 голосов
/ 23 мая 2018

Просто используйте переход, поскольку clip-path можно анимировать 

function bottomClip() {
  document.getElementById("duotonetop").classList.toggle("move");
}
body {
  text-align: center;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}

a {
 display:inline-block;
}

#duotonetop {
  padding: 0 0 0 0;
  clip-path: inset(0 0 90% 0);
  display: block;
  transition: 1s all;
}

#duotonetop.move {
  clip-path: inset(90% 0 0 0);
}
<a onclick="bottomClip()"><img id="duotonetop" src="https://picsum.photos/200/200?image=1067"></a>
...