I was wondering if it is possible to assign a group of texts for stacking in the middle of the page? placing them in the center was not too complicated, but the problem was that they are located left , right , top and bottom , which, I think, means that they should be provided: position:absolute . In addition, .headline texts are given fade-in (opacity from 0 to 100) and animation commands. In terms of scaling, texts respond and become smaller as the window shrinks. In addition, they are assigned their own z-index .
In the image below, I have outlined the general structure that I would like to achieve, but I have great difficulty in this because of the textual behavior that I want to execute.
For a reference to functionality here is jsfiddle .
Please help me and thank you in advance! Please note that I would prefer to use CSS just because it is a simple function that occurs only once when the page loads. However, if this is a problem that only javascript can solve, let me know :)
.animated { -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -ms-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s; } .fade { -webkit-animation-name: fade; -moz-animation-name: fade; -o-animation-name: fade; animation-name: fade; } @-webkit-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes flowright { 0% { opacity: 0; left: -100px; } 100% { opacity: 1; left: 0; } } @keyframes flowright { 0% { opacity: 0; left: -100px; } 100% { opacity: 1; left: 0; } } @-webkit-keyframes flowleft { 0% { opacity: 0; right: -100px; } 100% { opacity: 1; right: 0; } } @keyframes flowleft { 0% { opacity: 0; right: -100px; } 100% { opacity: 1; right: 0; } } @-webkit-keyframes flowup { 0% { opacity: 0; margin-top: 100px; } 100% { opacity: 1; margin-top: 0; } } @keyframes flowup { 0% { opacity: 0; margin-top: 100px; } 100% { opacity: 1; margin-top: 0; } } @-webkit-keyframes flowdown { 0% { opacity: 0; margin-top: -100px; } 100% { opacity: 1; margin-top: 0; } } @keyframes flowdown { 0% { opacity: 0; margin-top: -100px; } 100% { opacity: 1; margin-top: 0; } } .flow { display: inline-block; -webkit-animation-duration: 1s; -webkit-animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); -webkit-animation-direction: alternate; -webkit-animation-fill-mode: both; animation-duration: 1s; animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); } .right { -webkit-animation-name: flowright; animation-name: flowright; } .left { -webkit-animation-name: flowleft; animation-name: flowleft; } .up { -webkit-animation-name: flowup; animation-name: flowup; } .down { -webkit-animation-name: flowdown; animation-name: flowdown; } .sequence01 { -webkit-animation-delay: 0.1s; } .sequence02 { -webkit-animation-delay: 0.2s; } .sequence03 { -webkit-animation-delay: 0.3s; } .sequence04 { -webkit-animation-delay: 0.4s; } .headline { font-family: helvetica; font-weight: bold; font-size: 4em; } .row01, .row02, .row03 { clear: both; } .row01 { left:20%; top: 0; position: relative; } .row02 { right:10%; top: 50%; position: relative; } .row03 { left:10%; top: 100%; position: relative; } body { width: 100%; height: 100%; } .pagewrap { height: 100%; width: 80%; max-width: 48em; margin: 0 auto; background-color: #fff6d6; }
<body> <div class="pagewrap"> <div class="headline"> <div class="row01 flow left sequence01">ROW 01</div> <br/> <div class="row02 flow right sequence02">ROW 02</div> <br/> <div class="row03 flow up sequence03">ROW 03</div> </div> </div> </body>
source share