Hintergrund von transparentem Text transformieren?

Ok, also habe ich eine große Überschrift auf einer Seite, die ein Bild als Hintergrund des Textes hat:Hintergrund von transparentem Text transformieren?

.big-heading { 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
    background-image: url('https://images.pexels.com/photos/169789/pexels-photo-169789.jpeg?dl&fit=crop&w=640&h=426'); 
 
    -webkit-background-size: cover; 
 
    background-size: cover; 
 
    font-size: 100px; 
 
}

<h1 class="big-heading"> 
 
    I'm<br> 
 
    huge text<br> 
 
    example<br> 
 
    example 
 
</h1>

Allerdings mag ich das zu drehen, um die ScrollMagic jQuery-Plugin verwenden, Hintergrund des Textes, während Sie auf der Seite nach unten scrollen. Ich weiß, wie man ScrollMagic benutzt, ich weiß einfach nicht, wie man den Hintergrund von transparentem Text in CSS transformiert.

Jede Hilfe wäre willkommen.

Quelle

2017-03-24 Sean Whelan

diese Seiten gefunden, vielleicht werden sie einige helfen: http://stackoverflow.com/questions/32291913/svg-rotate-image-fill-on-hover ... http: // Stackoverflow. com/questions/22503382/svg-image-element-rotation ... http://stackoverflow.com/questions/15139090/setting-transform-origin-on-svg-group-not-working-in-firefox – LGSon

Soweit ich weiß das nicht möglich ist, vielleicht das Beste, was Sie tun können, ist die background-position animieren

.big-heading { 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
    background-image: url('https://images.pexels.com/photos/169789/pexels-photo-169789.jpeg?dl&fit=crop&w=640&h=426'); 
 
    -webkit-background-size: cover; 
 
    background-size: cover; 
 
    font-size: 100px; 
 
    transition:all .8s ease-in; 
 
} 
 
.big-heading:hover { 
 
    background-position:600px 300px; 
 
}

<h1 class="big-heading"> 
 
    I'm<br> 
 
    huge text<br> 
 
    example<br> 
 
    example 
 
</h1>

Quelle

2017-03-24 16:37:39 DaniP

Eine andere Option Ich dachte darüber nach, war mit einem SVG ... – LGSon

Danke für die Antwort, aber es ist wirklich eine Rotation Ich suche, wenn es überhaupt möglich ist –

@LGSon vielleicht hat das mehr Möglichkeiten als Ansatz, aber ich weiß nicht über SVG XD ... Warten auf zu sehen, ob du kannst :) – DaniP

Sie können keine Hintergrund-Bild drehen. Um ein Bild in einen Text zu schneiden, können Sie Clip-Pfad oder Muster verwenden. Bei clip-path ist das Objekt maskiert das Bild, so dass Sie es nicht drehen können, ohne den Text zu drehen. Ich schlage vor, Sie ein Muster zu verwenden und den Text mit dem Bild füllen wie so:

<svg> 
    <defs> 
    <pattern id="clipping"> 
     <image xlink:href="IMAGE URL" /> 
    </pattern> 
    </defs> 

    <text fill="url(#clipping)"> 
    <tspan x="0" dy="10">Text</tspan> 
    <tspan x="0" dy="10">filled</tspan> 
    <tspan x="0" dy="10">with</tspan> 
    <tspan x="0" dy="10">image</tspan> 
    </text> 
</svg>

Und dann haben Sie nur die Muster Bild zu drehen.

Codepen

Quelle

2017-03-25 00:49:34 llobet

Hintergrund von transparentem Text transformieren?

Antwort

Verwandte Themen