横向CSS仅视差效果，层数大于100vw [英] Horizontal CSS only parallax effect with layers greater than 100vw

问题描述

如何使用横向引导网站仅CSS视差效果？

要求

• 仅限CSS的视差


• 父层必须具有宽度/高度== 100vw / 100vh


• 子图层必须具有宽度/高度> 100vw / 100vh


• 子图层必须在视觉上与父图层对齐100％宽度
  
  
  
  
  • 现在子图层在技术上确实具有100％的父宽度，但是由于透视图，它们在视觉上看起来不占100％的父宽度
  
  
  
  • 子图层（除第一个图层外）必须具有相对于其父级的顶部偏移量
    
  • 结果必须基于计算才能具有最大的灵活性
    
  • 必须跨浏览器稳定（至少是最新版本的专业版）
    
    
    
    
    
    

    
    

    
    
    

    我到目前为止所做的

    
    
    

    其实这个问题是一个

    
    
    

    
    
    
    
    

    这里有很多视差教程。为什么这是不同的？

    
    
    

    其实我研究了很多，但没有发现如何实现水平视差的一个描述（意思是子图层的宽度> 100vw）。当然，那里有水平视差滚动视频。但它们都有一个共同点：子图层的宽度总是<= 100vw - 这实际上是差异。

    
    
    

      html，body {height：100％;溢出：隐藏; width：100％;} body {-webkit-transform：translateZ（0）; transform：translateZ（0）;}＃projection {-webkit-perspective：1px;透视：1px; -webkit-perspective-origin：0 0; perspective-origin：0 0;身高：100％;溢出：自动; width：100％;}。pro {-webkit-transform：scale（1）translate（0px，0px）translateZ（0px）; transform（scale）（1）translate（0px，0px）translateZ（0px）;身高：100％;位置：绝对; -webkit-transform-origin：0 0; transform-origin：0 0; -webkit-transform-style：preserve-3d; transform-style：preserve-3d; pro  -  1 {-webkit-transform：scale（4）translate（0px，0px）translateZ（-3px）; transform（scale）（4）translate（0px，0px）translateZ（-3px）; pro  -  2 {-webkit-transform：scale（3）translate（0px，1em）translateZ（-2px）; transform（scale）（3）translate（0px，1em）translateZ（-2px）; pro  -  3 {-webkit-transform：scale（2）translate（0px，2em）translateZ（-1px）; transform（scale）（2）translate（0px，2em）translateZ（-1px）; width：110％;}。pro {background：rgba（0，0，0，0.33）; box-shadow：插图0 0 0 5px橙色;颜色为橙色; font-size：4em; line-height：1em; text-align：center;}。pro  -  2 {box-shadow：inset 0 0 0 5px green; color：green;}。pro  -  3 {box-shadow：inset 0 0 0 5px blue; color：blue;}  

    < div id =projection > < div class =pro pro - 1> pro - 1< / div> < div class =pro pro - 2> pro - 2< / div> < div class =pro pro-3> pro - 3< / div>< / div>

    解决方案

    我不是100％肯定的，我已经完全掌握了您的目标，但我至少得到了为您迈出一步。在关于pure-css视差网站的文章中，有一个通过使用 perspective-origin-x：100％和 transform-origin-x：100％ #projection 。 / code>和 .pro 就像这样：



      #projection 
     perspective：$ perspective + 0px 
     perspective-origin：100％100％
     height：100％
     overflow：auto 
     width：100％
     
     .pro 
     @include projection（）
     height：100％
     position：absolute 
     transform-origin：100％100％
     transform- style：preserve-3d 
     width：100％
      

    视差行为开始看起来很大更像我所期望的。这是最后一支笔： https://codepen.io/kball/pen/qPbPWa /？editors = 0100

    
    

    How to bootstrap a site with horizontal CSS only parallax effect?

    Requirements

    • CSS only parallax
    • parent layer must have width/height == 100vw/100vh
    • child layers must have width/height > 100vw/100vh
    • child layers must visually align 100% with parent layers width
      • by now the child layers technically do have 100% of parents width but due to the perspective they visually don't appear to take 100% of parents width
    • child layers (except the first) must have a top offset relative to its parent
    • results must base on calculations to have maximum flexibility
    • must be cross browser solid (at least newest version of majors)

    
    

    What I have done so far

    Actually this question is a follow-up question.
    Here's a PEN with my current mockup state in SASS or CSS.

    Working Simulated Example (jQuery)

    In JavaScript its quite simple to achieve what I'm looking for. So here is a PEN that simulates the effect I'd like to mimic with CSS.

    Already known Issues

    The issue I'm most concerned about by now is the fact, that browser seem to render this scenario differently. See screenshot of browser window (chrome vs ff) scrolled to the right bottom corner below. But I hope this could be avoided.

    
    

    There are so many parallax tutorials out there. Why is this different?

    Actually I researched really a lot but didn't find not even one description how to implement horizontal parallax (means the child layers have a width > 100vw). Of course there are horizontal parallax scroll tuts out there. But they all have one in common: the child layer widths are always <= 100vw - and thats actually the difference.

    html,
    body {
      height: 100%;
      overflow: hidden;
      width: 100%;
    }
    
    body {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
    
    #projection {
      -webkit-perspective: 1px;
      perspective: 1px;
      -webkit-perspective-origin: 0 0;
      perspective-origin: 0 0;
      height: 100%;
      overflow: auto;
      width: 100%;
    }
    
    .pro {
      -webkit-transform: scale(1) translate(0px, 0px) translateZ(0px);
      transform: scale(1) translate(0px, 0px) translateZ(0px);
      height: 100%;
      position: absolute;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      width: 100%;
    }
    
    .pro--1 {
      -webkit-transform: scale(4) translate(0px, 0px) translateZ(-3px);
      transform: scale(4) translate(0px, 0px) translateZ(-3px);
      width: 110%;
    }
    
    .pro--2 {
      -webkit-transform: scale(3) translate(0px, 1em) translateZ(-2px);
      transform: scale(3) translate(0px, 1em) translateZ(-2px);
      width: 110%;
    }
    
    .pro--3 {
      -webkit-transform: scale(2) translate(0px, 2em) translateZ(-1px);
      transform: scale(2) translate(0px, 2em) translateZ(-1px);
      width: 110%;
    }
    
    .pro {
      background: rgba(0, 0, 0, 0.33);
      box-shadow: inset 0 0 0 5px orange;
      color: orange;
      font-size: 4em;
      line-height: 1em;
      text-align: center;
    }
    
    .pro--2 {
      box-shadow: inset 0 0 0 5px green;
      color: green;
    }
    
    .pro--3 {
      box-shadow: inset 0 0 0 5px blue;
      color: blue;
    }

    <div id="projection">
      <div class="pro pro--1">pro--1</div>
      <div class="pro pro--2">pro--2</div>
      <div class="pro pro--3">pro--3</div>
    </div>

    解决方案

    I'm not 100% certain I've gotten exactly what you're targeting, but I've at least got a step forward for you. In this article on pure-css parallax sites, there was an update regarding working around webkit related bugs by using perspective-origin-x: 100% and transform-origin-x: 100%.

    If I apply this in both x and y directions to your current mockup case with sass, I end up changing just #projection and .pro to be like this:

    #projection
      perspective: $perspective + 0px
      perspective-origin: 100% 100%
      height: 100%
      overflow: auto
      width: 100%
    
    .pro
      @include projection()
      height: 100%
      position: absolute
      transform-origin: 100% 100%
      transform-style: preserve-3d
      width: 100%
    

    And the parallax behavior starts to look much more like I might expect. Here is the final pen: https://codepen.io/kball/pen/qPbPWa/?editors=0100

    这篇关于横向CSS仅视差效果，层数大于100vw的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！