<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Demo of RevealFx</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="flexy flexy--center">
<div class="flexy__items flexy__items--cyan">
<h2 class="content__title content__title--center">
<div id="rfx1" class="content__title__inner">It's wierd not to be weird</div><br />
<div id="rfx2" class="content__title__inner content__title__inner--offset-1">- John Lennon
</div>
</h2>
<div class="triggers">
<button id="rev-trigger-1" class="btn btn--trigger">left to right</button>
<button id="rev-trigger-2" class="btn btn--trigger">right to left</button>
<button id="rev-trigger-3" class="btn btn--trigger">top to bottom</button>
<button id="rev-trigger-4" class="btn btn--trigger">bottom to top</button>
<button id="rev-trigger-5" class="btn btn--trigger">change the color</button>
</div>
</div>
<div class="flexy__items flexy__items--magenta">
<div class="dual">
<div class="dual__inner" id="rfx3">
<div class="dual__half"></div>
</div>
<div class="dual__content">
If you doubt your beliefs, you believe your doubts
<br>If you fail to practice, you practice failure <span class="author">― Anonymous</span>
</div>
</div>
<div class="triggers">
<button id="rev-trigger-6" class="btn btn--trigger">Rerun</button>
</div>
</div>
<p> (The following demo Works best in chrome)</p>
<div class="flexy__items flexy__items--yellow">
<h2 class="content__title content__title--center">
<div id="rfx4" class="content__title__inner">Be yourself,because everyone else is taken </div><br />
<br>
</h2>
<div class="triggers">
<button id="rev-trigger-7" class="btn btn--trigger">randomize the cover area</button>
<button id="rev-trigger-8" class="btn btn--trigger">randomize the duration</button>
<button id="rev-trigger-9" class="btn btn--trigger">delay the stagger</button>
<button id="rev-trigger-10" class="btn btn--trigger">change the text</button>
<button id="rev-trigger-11" class="btn btn--trigger">change the easing functions</button>
<button id="rev-trigger-12" class="btn btn--trigger">Reset</button>
</div>
</div>
</div>
<a href = "https://github.com/akhil0001/RevealFx" target="_blank">Find the code at github link </a>
</body>
</html>/* taken from mary lou's block reveal effect demo */
@import url('https://fonts.googleapis.com/css?family=Ubuntu');
body{
background:#f0f0f0;
font-family: 'Ubuntu', sans-serif;
}
#rfx4
{
background: linear-gradient(left,#FFB900,#FF8C00,#F7630C,#E74856,#E81123,#0078D7,#0063B1);
background-clip: text;
text-fill-color: transparent;
color: #303F9F;
}
.content {
position: relative;
min-height: 300px;
overflow-x: hidden;
}
.content--full {
height: 100vh;
min-height: 600px;
}
.flexy {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}
.flexy--center {
justify-content: center;
}
.flexy--row {
flex-direction: row;
}
.flexy__items
{
padding:1em;
}
.content__heading {
flex: none;
width: 100%;
/* padding: 0 1vw; */
}
.content__heading--center {
text-align: center;
}
.content__title {
font-size: 8vw;
}
.content__title--half {
width: 50vw;
z-index: 2;
}
.content__title--enclosed {
padding: 0;
margin: 0;
}
.content__title--center {
margin: auto;
text-align: center;
}
.content__title--right {
text-align: right;
padding: 0 0 0 2em;
}
.content__title--left {
margin-left: -18vw;
}
.content__title--medium {
font-size: 5vw;
}
.content__title--small {
font-size: 2vw;
}
.content__title__inner {
flex: none;
display: inline-block;
white-space: wrap;
position: relative;
}
.content__title__inner--offset-1 {
font-size: 4vw;
top: -0.25em;
left: 18.6vw;
}
.content__title__inner--offset-2 {
top: -0.25em;
left: 1.75vw;
}
.content__title__inner--offset-3 {
left: -10vw;
top: -0.25em;
}
.btn {
border: 0;
padding: 0;
margin: 0;
background: none;
color: inherit;
cursor: pointer;
}
.btn:focus {
outline: none;
}
.btn--trigger {
margin: 0.25em;
display: block;
white-space: nowrap;
border: 2px solid;
padding: 0.5em;
}
.triggers
{
display: flex;
flex-flow: row wrap;
}
.dual {
width: 90vw;
margin: 2em auto;
position: relative;
}
.dual__inner {
position: absolute;
width: 100%;
height: 100%;
}
.dual__half {
position: absolute;
height: 100%;
width: 50%;
right: 0;
background: url(https://images.unsplash.com/photo-1521999693742-4717d76f97cc?ixlib=rb-1.2.1&auto=format&fit=crop&w=749&q=80) no-repeat 50% 0%;
background-size: cover;
}
.dual__content {
position: relative;
width: 40%;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 500px;
padding: 1.5em 2.5em;
font-size: 1.25em;
line-height: 1.4;
color: #ffffff;
opacity:0;
}
.dual__content.dual__content--show {
opacity: 1;
pointer-events: visible;
transform: translate(0,0);
transform: translate(0,0);
transform: translate(0,0);
transform: translate(0,0);
transform: translate(0,0);
}
@media screen and (max-width: 50em) {
.content--full {
min-height: 0;
}
.content__title {
font-size: 2em;
}
.content__title--medium {
font-size: 1.75em;
}
.content__title--small {
font-size: 1.15em;
}
.content__title--half {
width: 100%;
}
.content__title--right {
padding: 0 5vw;
}
.content__title--left {
margin-left: 0;
}
.flexy--row {
flex-direction: column;
}
.triggers {
width: 100%;
border: 0;
padding: 0;
font-size: 0.85em;
}
.dual__content {
min-height: 200px;
font-size: 0.65em;
padding: 2.5em;
}
.dual {
margin-top: 0;
}
}
window.onload = showThemColors();
function showThemColors() {
var counter = 0;
var rfx1 = document.querySelector('#rfx1');
var rfx2 = document.querySelector('#rfx2');
var rfx3 = document.querySelector('#rfx3');
var rfx4 = document.querySelector('#rfx4');
var btn1 = document.querySelectorAll('#rev-trigger-1')[0];
var btn2 = document.querySelectorAll('#rev-trigger-2')[0];
var btn3 = document.querySelectorAll('#rev-trigger-3')[0];
var btn4 = document.querySelectorAll('#rev-trigger-4')[0];
var btn5 = document.querySelectorAll('#rev-trigger-5')[0];
var btn6 = document.querySelectorAll('#rev-trigger-6')[0];
var btn7 = document.querySelectorAll('#rev-trigger-7')[0];
var btn8 = document.querySelectorAll('#rev-trigger-8')[0];
var btn9 = document.querySelectorAll('#rev-trigger-9')[0];
var btn10 = document.querySelectorAll('#rev-trigger-10')[0];
var btn11 = document.querySelectorAll('#rev-trigger-11')[0];
var btn12 = document.querySelectorAll('#rev-trigger-12')[0];
var revealSettings = {
bgColors: ['#111'],
duration: 600,
delay: 100,
direction: 'lr',
onStart: function (contentEl, revealerEl) {
},
onHalfway: function (contentEl, revealerEl) {
contentEl.style.opacity = 1;
},
onComplete: function () {
revealerEffect2.reveal();
}
};
var revealSettings2 = {
bgColors: ['#111'],
duration: 400,
delay: 100,
direction: 'lr',
onHalfway: function (contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
};
var revealSettings3 = {
bgColors: ['#FFB900','#FF8C00','#F7630C','#E74856','#E81123','#0078D7','#0063B1'],
duration: 400,
delay: 100,
direction: 'lr',
onStart: function (contentEl, revealerEl) {
anime.remove(contentEl);
// contentEl.style.opacity = 0;
},
onHalfway: function (contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
};
var revealerEffect = new RevealFx(rfx1, {
layers: 1,
isContentHidden:false,
revealSettings: revealSettings
});
var revealerEffect2 = new RevealFx(rfx2, {
layers: 1,
isContentHidden : true,
revealSettings: revealSettings2
});
var splitContent = document.querySelector('.dual__content'),
revealEffect3 = new RevealFx(rfx3, {
isContentHidden:true,
layers:4,
revealSettings : {
bgColors: ['#2c2c38','#2c2c38','#2c2c38','#2c2c38'],
direction: 'rl',
duration: 800,
easing: 'easeInOutCirc',
coverArea: 50,
onStart: function(contentEl)
{
contentEl.style.opacity =0;
splitContent.classList.remove('dual__content--show');
},
onHalfway: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
splitContent.classList.add('dual__content--show');
}
}
});
var revealerEffect4 = new RevealFx(rfx4, {
layers: 7,
isContentHidden : true,
revealSettings: revealSettings3
});
revealerEffect.reveal();
revealEffect3.reveal();
revealerEffect4.reveal();
btn1.onclick = function(){
revealSettings.direction = 'lr';
revealSettings2.direction = 'lr';
revealerEffect.reveal(revealSettings);
}
btn2.onclick = function() {
revealSettings.direction = 'rl';
revealSettings2.direction = 'rl';
revealerEffect.reveal(revealSettings);
}
btn3.onclick = function() {
revealSettings.direction = 'tb';
revealSettings2.direction = 'tb';
revealerEffect.reveal(revealSettings);
}
btn4.onclick = function() {
revealSettings.direction = 'bt';
revealSettings2.direction = 'bt';
revealerEffect.reveal(revealSettings);
}
btn5.onclick = function() {
revealSettings.bgColors[0] = '#283593';
revealSettings2.bgColors[0] = '#FBC02D';
revealerEffect.reveal(revealSettings);
}
btn6.onclick = function(){
revealEffect3.reveal();
}
btn7.onclick = function(){
revealSettings3.coverArea = Math.random(1)*100+10;
revealSettings3.onComplete = function(contentEl,revealEl){
btn7.innerText = 'cover area has changed to '+revealSettings3.coverArea+'%';
}
revealerEffect4.reveal(revealSettings3);
}
btn8.onclick = function()
{
revealSettings3 = resetTheSetting();
revealSettings3.duration = Math.random(1)*1000 + 1000;
revealerEffect4.reveal(revealSettings3);
}
btn9.onclick = function()
{
revealSettings3 = resetTheSetting()
revealSettings3.delay = Math.random(1)*100 + 200;
revealerEffect4.reveal(revealSettings3);
}
btn10.onclick = function()
{
var quotations = ['Inhale confidence,exhale doubts','Do it or watch yourself sad when others show it','Be yourself,because everyone else is taken'];
revealSettings3 = resetTheSetting()
revealSettings3.onHalfway = function(contentEl)
{
contentEl.innerText = quotations[counter++];
}
if(counter>quotations.length-1)
counter = 0;
revealerEffect4.reveal(revealSettings3);
}
btn12.onclick = function() {
revealSettings3 = resetTheSetting();
var resetRevealSettings = resetTheSetting();
revealerEffect4.reveal(resetRevealSettings);
}
btn11.onclick = function() {
revealSettings3 = resetTheSetting();
revealSettings3.easing = 'cubicBezier(0.000, 0.810, 0.230, 0.990)';
revealerEffect4.reveal(revealSettings3);
}
resetTheSetting = function()
{
return {
bgColors: ['#FFB900','#FF8C00','#F7630C','#E74856','#E81123','#0078D7','#0063B1'],
duration: 400,
delay: 100,
direction: 'lr',
onStart: function (contentEl, revealerEl) {
anime.remove(contentEl);
// contentEl.style.opacity = 0;
},
onHalfway: function (contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
}
}
External CSS
This Pen doesn't use any external CSS resources.