时间戳

首页 > 解决方案 > 显示文本动画停止使用水平滚动

jquery - 显示文本动画停止使用水平滚动

问题描述

我的标题和文字动画在出现时停止工作。我同时使用 Splitting.js 和 ScrollOut.js。在我添加一些 CSS 使设计水平而不是垂直之前，这一切都很好。

我知道动画可以工作，但是由于水平 CSS，当新文本出现时，它似乎无法读取。我该如何解决？

将水平布局切换到一些jQuery而不是CSS会更好吗？

任何帮助，将不胜感激。

这是我当前演示的链接：https ://mschristensen.com/demosites/new2/index.html

JS

jQuery(document).ready(function(event){

// Headline + text animation
Splitting();

// Headline + text trigger on scroll
ScrollOut({
    targets: '[data-splitting]',
    scrollingElement: ".inner-wrapper"
});

});

HTML

<html lang="en" class="no-js">
<head>
    <!-- SETTINGS -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <!-- Favicon -->

    <!-- PAGE INFO -->
    <title>M. S. Christensen</title>
    <meta name="author" content="Morten Stig Christensen">
    <meta name="description" content="Hello! I am a digital/visual designer from Copenhagen, Denmark. With a background in frontend design and development, my primary strength is within website and app design.">
    <meta name="keywords" content="Danish digital designer, Digital Designer, Visual designer, Danish visual designer, Dansk designer, Designer, Digital designer, Freelance digital designer, Freelance, Freelance designer, HTML, HTML5, CSS, CSS3, PhotoShop, Illustrator, InDesign, Copenhagen, Denmark, Designer, SASS, CSS / CSS3, UI, UX, User Interface, Usability Experience, WordPress, Responsive Design, jQuery, Morten, Morten Stig Christensen, Morten Christensen, MSChristensen, Creative, Creative designer, Kreativ designer, Kreativ">

    <!-- Styling -->
    <link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting.css" />
    <link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting-cells.css" />
    <link rel="stylesheet" href="screen.css">
</head>
<body>
    <div class="outer-wrapper">
        <div class="inner-wrapper">
            <section class="page-introduction">
                <div>
                    <h1 data-splitting="lines">Creative, experienced, and user-centric. Let me elaborate...</h1>
                    <p data-splitting="">Hello, my name is Morten. I am an ambitious and passionate designer with 7+ years of experience. Currently living in Copenhagen, Denmark, but looking for a full time position in Tokyo, Japan.</p>
                    <nav class="buttons">
                        <a class="button primary">My work</a>
                        <a class="button secondary">Get in touch</a>
                    </nav>
                </div>
            </section>
            <section class="page-introduction">
                <div>
                    <h1 data-splitting="lines">Creative, experienced, and user-centric. Let me elaborate...</h1>
                    <p data-splitting="">Hello, my name is Morten. I am an ambitious and passionate designer with 7+ years of experience. Currently living in Copenhagen, Denmark, but looking for a full time position in Tokyo, Japan.</p>
                    <nav class="buttons">
                        <a class="button primary">My work</a>
                        <a class="button secondary">Get in touch</a>
                    </nav>
                </div>
            </section>
            <section class="page-introduction">
                <div>
                    <h1 data-splitting="lines">Creative, experienced, and user-centric. Let me elaborate...</h1>
                    <p data-splitting="">Hello, my name is Morten. I am an ambitious and passionate designer with 7+ years of experience. Currently living in Copenhagen, Denmark, but looking for a full time position in Tokyo, Japan.</p>
                    <nav class="buttons">
                        <a class="button primary">My work</a>
                        <a class="button secondary">Get in touch</a>
                    </nav>
                </div>
            </section>
            <section class="page-introduction">
                <div>
                    <h1 data-splitting="lines">Creative, experienced, and user-centric. Let me elaborate...</h1>
                    <p data-splitting="">Hello, my name is Morten. I am an ambitious and passionate designer with 7+ years of experience. Currently living in Copenhagen, Denmark, but looking for a full time position in Tokyo, Japan.</p>
                    <nav class="buttons">
                        <a class="button primary">My work</a>
                        <a class="button secondary">Get in touch</a>
                    </nav>
                </div>
            </section>
        </div>
    </div>


    <!-- Javascript -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.4/jquery.lazy.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <script type="text/javascript">
             var console = { log: function() {} };
        </script>
    <![endif]-->
</body>

CSS：

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;500;900");

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

h1, h2 {
  font-size: 3.125rem;
  font-weight: 300;
}

h3 {
  font-size: 0.875rem;
}

h4, h5, h6 {
  font-size: 0.625rem;
}

h3, h4, h5, h6 {
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 4px;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
}

p {
  font-size: 1.25rem;
  line-height: 1.5;
  color: #555555;
}

a {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 4px;
  color: #555555;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  text-transform: uppercase;
  -webkit-transition: all 0.5s cubic-bezier(0.24, 0.63, 0.5, 0.99);
  transition: all 0.5s cubic-bezier(0.24, 0.63, 0.5, 0.99);
}

a:focus {
  outline: none;
}

.button {
  display: inline-block;
  padding: 20px 40px;
  border-radius: 30px;
}

.button.primary {
  background-color: #F8BC49;
  color: #ffffff;
}

.button.primary:hover {
  background-color: #EBB245;
}

.button.secondary {
  margin-left: 10px;
  border: 1px solid white;
}

.button.secondary:hover {
  border-color: #cccccc;
}

h1 .word, h2 .word, h3 .word, h4 .word, h5 .word, h6 .word {
  position: relative;
  display: inline-block;
  overflow: hidden;
  background: transparent;
  color: transparent;
}

h1 .word::after, h2 .word::after, h3 .word::after, h4 .word::after, h5 .word::after, h6 .word::after {
  content: attr(data-word);
  color: #000000;
  position: absolute;
  top: 0;
  display: block;
  transform: translateY(100%);
  visibility: hidden;
  transition: all 0.5s cubic-bezier(0.24, 0.63, 0.5, 0.99);
  transition-delay: calc(.2s * var(--line-index));
}

h1[data-scroll="in"] .word::after, h2[data-scroll="in"] .word::after, h3[data-scroll="in"] .word::after, h4[data-scroll="in"] .word::after, h5[data-scroll="in"] .word::after, h6[data-scroll="in"] .word::after {
  transform: translateY(0%);
  visibility: visible;
}

p {
  position: relative;
  overflow: hidden;
}

p .char {
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.24, 0.63, 0.5, 0.99);
  transition-delay: calc(2.5ms * var(--char-index) + 500ms );
}

p[data-scroll="in"] .char {
  transform: translateY(0%);
  opacity: 1;
}

.page-introduction {
  width: 60vw;
  position: relative;
}

.page-introduction div {
  width: 100%;
  max-width: 550px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.page-introduction div h1 {
  padding-bottom: 30px;
}

.page-introduction div p {
  width: 75%;
}

.page-introduction div nav {
  padding-top: 50px;
  display: table;
}

*, *:after, *:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: none;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1;
  font-weight: 100;
}

html:focus,
body:focus {
  outline: none;
}

.outer-wrapper {
  width: 100vh;
  height: 100vw;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  overflow-y: scroll;
  overflow-x: hidden;
  position: absolute;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.outer-wrapper .inner-wrapper {
  display: flex;
  flex-direction: row;
  width: 400vw;
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
}

.outer-wrapper .inner-wrapper section {
  width: 100vw;
  height: 100vh;
}

.container {
  width: calc(100% - 100px);
  max-width: 1710px;
  margin: 0 auto;
}

标签： jquerycsstransformhorizontal-scrollinghorizontalscrollview

解决方案

推荐阅读