Parallax mit SVG-Gruppen

Ich habe eine SVG-Grafik mit Flash für meine persönliche Website erstellt. Das SVG hat mehrere Elemente, in denen der HTML-Code innerhalb des SVG-Tags gruppiert ist. Ich versuche, eine Parallaxe auf jede Gruppe anzuwenden, aber ich scheine nicht zu funktionieren.Parallax mit SVG-Gruppen

Ich habe versucht, jede Schicht als separate SVGs durch Illustrator zu exportieren, aber wenn es im Code angewendet wird, sind die SVGs nicht proportional oder sogar an ihren x, y Koordinaten.

Eine Probe des Codes des vollständigen SVG kann, ist http://codepen.io/Aricha03/pen/YWwaWB

Hier über diesen Link aufgerufen werden der Code ich zur Zeit auf Arbeits

</svg> 
     </div> 
    </div> 
    <div id="content"> 
     <h1>THIS IS A SAMPLE HEADER</h1> 
     <p>LOREM IPSUM TIME!</p> 
     <p>sldafksdlfasdfjasldkfajsldkfajsdlfsssss</p> 
     <div style="background-color: green; height: 1000px; width: 100px"></div> 
    </div>

Was die CSS

.parallax { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
     width: 100%; 
     height: 100%; 
    } 
    .parallax_1 { 
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
    } 
    .parallax_2 { 
    -webkit-transform: translateZ(-1px); 
    transform: translateZ(-1px); 
    } 
    .parallax_3 { 
    -webkit-transform: translateZ(-2px); 
    transform: translateZ(-2px); 
    } 
.parallax_4 { 
    -webkit-transform: translateZ(-3px); 
    transform: translateZ(-3px); 
    } 
.parallax_5 { 
    -webkit-transform: translateZ(-4px); 
    transform: translateZ(-4px); 
    } 
.parallax_6{ 
    -webkit-transform: translateZ(-5px); 
    transform: translateZ(-5px); 
    } 
.parallax_7{ 
    -webkit-transform: translateZ(-6px); 
    transform: translateZ(-6px); 
    }

Quelle

2016-06-10 Aricha

Damit die einzelnen Ebenen-SVGs korrekt skaliert und positioniert werden können, müssen Sie sicherstellen, dass alle denselben "viewBox" -Wert haben. Ie. wahrscheinlich das gleiche wie das Original SVG ('" 960 -650 3840 2380 "'). –

Nein, das hat überhaupt nicht funktioniert. Wenn man jedoch die Breite des div in Pixel anstatt in Prozent ändert, hat es sich erweitert, also könnte ich eine Funktion machen, um das mit der max-width css zu steuern. – Aricha

SVG ist eine zweidimensionale Grafik. In 1.1/2 Version gibt es keine Z-Achse kann steuern.

Die Schnittstelle dieser Funktion:

https://www.w3.org/TR/SVG/coords.html#InterfaceSVGTransform

Hohlraum setTranslate (in float tx, ty in float) erhöht (DOMException);

Scheint du kannst es nicht sogar durch css steuern.

Sie müssen oder svg.js verwenden, um es zu manipulieren. Oder wickle einfach jede Komponente (Wolke, Berge ...) in HTML-Tags und kontrolliere sie mit CSS.

Quelle

2016-06-10 14:39:28 twxia

Also wäre ich in der Lage, die Z-Achse mit einer neueren SVG-Version zu ändern? Oder kennen Sie eine Lösung über JavaScript? Ich habe versucht, online zu suchen, aber ohne Erfolg habe ich eine Antwort gefunden. – Aricha

@Aricha Sie müssen 'd3js' oder' svgjs' verwenden, um es zu manipulieren. oder wickeln Sie jede Komponente (Wolke, Berg ..) getrennt durch das 'svg' oder andere HTML-Tag, so dass Sie einfach die Z-Achse steuern können. – twxia

Schätzen Sie den Hilfe-Kumpel. Ich war in der Lage, die SVGs mit einem Javascript-Umsetzungsanruf mit D3 zu verschieben, um mir zu helfen, aber ich kann nicht eine richtige Z-Achsen-Positionierung zu gehen. Ich werde Bilder für jetzt verwenden und später darauf zurückkommen :) – Aricha

Antwort

Verwandte Themen