Einen Teil von einer Website kopieren?
Ich finde, dass diese Brillenanimation auf der Website extrem cool aussieht und ich würde sie gerne auf einer website verwenden.
Kann man diesen Teil "Ausschneiden?" und dann selbst launchen? Und wie einfach wär das? Mir reicht schon, wenn diese Fragen mit ja nein beantwortet werden
https://www.dji.com/at/dji-fpv
Die Animation ist ca. ab einem viertel der Seite
2 Antworten
Man kann sich so eine Animation selbst nachbauen, sofern man passende Assets (Bilder, Video) dazu hat. Auch wenn du es dir bei der genannten Webseite abgucken kannst, würde ich es nicht als einfach bezeichnen.
Allein für den Nachbau des Effekts sind zuerst einmal HTML-, CSS- und JavaScript-Kenntnisse vonnöten. Für die Analyse des Effekts auf der Webseite solltest du des Weiteren mit den Webentwicklungstools deines Browsers umgehen können.
Grob kann man schon einmal zusammenfassen, dass mehrere Effekte ineinander greifen. Die Brille selbst wird beispielsweise auf einem canvas-Element gezeichnet und rotiert (du könntest hierfür ThreeJS oder Babylon nutzen), während das Video mittels eines darüber gelegten Layer maskiert wird (siehe CSS: mask-image). Beim Scrollen wird die Maske skaliert, sodass mehr Fläche vom eigentlichen Video sichtbar wird.
Bezüglich des Rotationseffekts könnten diese beiden Videos hilfreich sein:
- How to make a 3d book using Three.js that rotates when you scroll down a web page
- Create this 3D parallax-style scroll animation with Three.js
Wenn du im Übrigen noch kein passendes Asset für die Brille hast, würde ich dir empfehlen, dich entweder auf Plattformen wie cgtrader, Free3D, Sketchfab, o.ä. nach passenden FBX Models umzuschauen oder du beschäftigst dich selbst mit 3D-Modelling und Texturing (bspw. mit Blender; Tutorials findest du auf YouTube-Kanälen wie blenderguru, grabbitt, Greyscalegorilla oder CGMasters). Das ist aber natürlich ziemlich aufwendig.
Alternativ zu einem Nachbau mit HTML/CSS/JS könnte man sicherlich auch mit einem Programm wie Webflow oder dem Google Web Designer zu einem Ziel kommen.
Kann man diesen Teil "Ausschneiden?" und dann selbst launchen?
Die Frage ist nicht mit einem Ja oder Nein zu beantworten.
Ja, man kann "sowas" selbst launchen, aber nicht genau das! (Urheberrecht -> hast du vom Rechteinhaber die Genehmigung?)
Wie du dir ein eigenes Video erstellst, welches einen ähnlichen Inhalt hat, mit dem du bei deiner Veröffentlichung nicht Probleme mit den Anwälten der genannten Webseite bekommen kannst, hat mit der Webseite an sich ja nichts zu tun. Hier wird es lediglich eingebettet.