Текст с эффектом старой видеоплёнки на TreeCanvas и HTML5
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
.main-content { overflow:hidden; position: relative; display: flex; align-items: center; justify-content: center; flex-flow: column; height: 100vh; background: linear-gradient(to right, rgba(36,31,31,1) 0%, rgba(36,31,31,1) 32%, rgba(74,71,70,1) 100%); color: #fff; text-align: center; } .vignette{ position:absolute; width:100%; height:100%; box-shadow:inset 0px 0px 150px 20px black; mix-blend-mode: multiply; -webkit-animation: vignette-anim 3s infinite; /* Safari 4+ */ -moz-animation: vignette-anim 3s infinite; /* Fx 5+ */ -o-animation: vignette-anim 3s infinite; /* Opera 12+ */ animation: vignette-anim 3s infinite; /* IE 10+, Fx 29+ */ } .noise { z-index: 100; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: .15; } .line{ position:absolute; height:100%; width:1px; opacity:0.1; background-color:#000; } .titleCont{ position:relative; } .main-title { padding: .3em 1em .25em; font-weight: 400; font-size: 40px; color: white; font-family: 'Bellefair', serif; position:relative; line-height:1.3; white-spacing: } .overTitle{ position:absolute; top:0; left:0; } .dot{ width:3px; height:2px; background-color:white; position:absolute; opacity:0.3; } @-webkit-keyframes vignette-anim { 0% , 100%{ opacity: 1; } 50% { opacity: 0.7; } } @-moz-keyframes vignette-anim { 0% , 100%{ opacity: 1; } 50% { opacity: 0.7; } } @-o-keyframes vignette-anim { 0% , 100%{ opacity: 1; } 50% { opacity: 0.7; } } @keyframes vignette-anim { 0% , 100%{ opacity: 1; } 50% { opacity: 0.7; } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<main role="main" class="main-content" id="main-content"> <div class="titleCont"> <h1 class="main-title" id="main-title"> "Here, in the forest,<br><span style="padding-left:100px">dark and deep,</span><br><span style="padding-right:110px">I offer you,</span><br><span style="padding-left:-20px">eternal sleep."</span> </h1> </div> <canvas id="noise" class="noise"></canvas> <div class="vignette"></div> </main> <script src="/js/TweenMax.min.js"></script> <script src="/js/old_film.js"></script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
шикарно, нужно придумать куда воткнуть)
Да, мне тоже эффект понравился. Для портфолио можно использовать 😃
у меня более глобальные планы, хочу перебрать форум, но черт..
о, пока писал появилась мысль даже))))
Иго-го! Тыгдык тыгдык. Фррр
Опять это парнокопытное тут наследило... 👀
мож на колбасу ее?