Created
February 27, 2023 19:33
-
-
Save newmedia2/3cb5f1a9f8058c4d332fa5146796fad7 to your computer and use it in GitHub Desktop.
Transparent Video
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| section.e-flex.e-hvh.e-wvw | |
| .marquee.e-abs | |
| - var text = 'this is a repeated text lorem ipsum' | |
| h1.mq.t-color(data-text=""+text)=text | |
| video(autoplay="" loop="" muted="" playsinline="") | |
| // | |
| support to Safari | |
| source(src="https://raw.githubusercontent.com/Efetivos/gallery/master/avulsos/VWLAB_LOGO_1.mov" type="video/quicktime") | |
| source(src="https://raw.githubusercontent.com/Efetivos/gallery/master/avulsos/VWLAB_LOGO_1.mov" type='video/mp4' codecs="hvc1") | |
| source(src="https://raw.githubusercontent.com/Efetivos/gallery/master/avulsos/VWLAB_LOGO_1.mov" type="video/mp4; codecs="hvc1"") | |
| // | |
| support to Chrome | |
| source(src="https://raw.githubusercontent.com/Efetivos/gallery/master/vwlab/VWLAB_LOGO.webm" type="video/webm") |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // https://video.online-convert.com/convert/mov-to-webm | |
| // Video must have background transparent RGB+Alpha |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ALIAS MIXINS ALREADY INCLUDED // | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap') | |
| body | |
| background: #01019c | |
| font-family: 'Poppins',sans-serif | |
| overflow: hidden | |
| * | |
| box-sizing: border-box | |
| font-family: 'Poppins',sans-serif | |
| video | |
| position: relative | |
| z-index: 1 | |
| width: 40vw | |
| height: auto | |
| will-change: transform | |
| .marquee | |
| display: flex | |
| justify-content: start | |
| align-items: start | |
| .mq | |
| --space: 3vw | |
| --time: 120s | |
| font-size: 6vw | |
| white-space: nowrap | |
| animation: marquee var(--time) infinite linear | |
| padding-left: var(--space) | |
| &:after | |
| content: attr(data-text) | |
| padding-left: var(--space) | |
| //css animation | |
| @keyframes marquee | |
| 0% | |
| transform: translateX(0) | |
| 100% | |
| transform: translateX(-50%) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" /> | |
| <link href="https://rawcdn.githack.com/Efetivos/gallery/694a29cce6a072e35a003f71b045541172547898/alias-mixins.sass" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment