Question

我尝试在屏幕右侧执行导航标题并为其添加动画。顶级标题完美无缺，但试图旋转标题会混淆javascript。

动画是：第一个

并转换为

我遇到的问题是将下一个标题垂直放在页面左侧的中间，如下所示

到目前为止，我在这个阶段陷入困境：

这是我的代码与javascript：

<div class="navbarProjects">
            <div class="container">
                <h1 class="spread">Projects</h1>
            </div>
        </div>

        <div class="navbarAbout">
            <h1 class="spread">About</h1> 
        </div>
        <script>
            var spread = document.getElementsByClassName('spread');
                [].forEach.call(spread, function(el) {
                  // replace the content width divs
                  el.innerHTML = '<span>' + el.innerText.split('').join('</span><span>') + '</span>'
                  // custom :hover
                  el.onmouseenter = function(e) {
                    var childern = e.target.childNodes
                    var width = e.target.offsetWidth / childern.length 
                    for (var i = 0, child; child = childern[i]; i++) child.style.minWidth = width + 'px'
                  }
                  // remove custom style again
                  el.onmouseleave = function(e) {
                    var childern = e.target.childNodes
                    for (var i = 0, child; child = childern[i]; i++) child.style.minWidth = '0'
                  }
                })
        </script>
.navbarProjects {
    text-align: center;
    top: 2%;
    font-size: 32px;  
}

.navbarAbout {
    font-size: 32px;
    padding-top: 0;
    transform: rotate(90deg);
}



.spread  {
    text-align:center;

}

.spread span {
    display: inline-block;
    transition: all .5s ease;
    text-align:center;
    min-width: 0;
}

Answer 1

所以，我想出了一个解决方案，只有在你的字体大小保持不变的情况下才会起作用（如果它是变量你需要使用javascript / jquery来使这个特定的解决方案起作用）但是如果你设置了边距对于about元素到calc(100% - yourWidth);，您将能够使其工作。我做了一个jsfiddle：

编辑：更新了jsfiddle

https://jsfiddle.net/w7zfajea/4/

Answer 2

以下是我试图解决您问题的CSS：

我使用了这里找到的课程：http://spotlifefilms.com/

请参阅：https://jsfiddle.net/p8eqxpce/3/

.navbarFounder, .navbarServices, .navbarProjects, .navbarAbout {
    position: fixed;
    padding: 0px;
    margin: 0px;
    height: 70px;
}

.navbarFounder, .navbarServices {
    width: 100vh;
    top: 50%;
}
.navbarProjects, .navbarAbout {
    width: 100vw;
    right: 50%;
}

.navbarFounder {
    left: 0px;
    transform:
        rotate(270deg)
        translate(35px, calc(-50vh + 35px));
}
.navbarServices {
    right: 0px;
    transform:
        rotate(90deg)
        translate(-35px, calc(-50vh + 35px));
}
.navbarProjects {
    bottom: 0px;
    transform:
        rotate(180deg)
        translateX(-50vw);
}
.navbarAbout {
    right: 50%;
    transform:
        rotate(0deg)
        translateX(50vw);
}

垂直对齐中间左侧的导航

2 个答案: