Assets
Folder: Block Animation revealer
Page type: No Header with footer and header code
files:
Header files:
<!-- folder Block Revealer -->
<!-- Header code block reveler - split screen starts here -->
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Poppins:700" rel="stylesheet">
<!-- <link rel="stylesheet" type="text/css" href="http://ppaper.weebly.com/files/theme/normalize.css" /> <!-- normalize -->
<link rel="stylesheet" type="text/css" href="http://ppaper.weebly.com/files/theme/demo-block-scrollx.css" />
<link rel="stylesheet" type="text/css" href="http://ppaper.weebly.com/files/theme/revealer-block.css" />
<link rel="stylesheet" type="text/css" href="http://ppaper.weebly.com/files/theme/pater.css" />
<script>document.documentElement.className = 'js';</script>
<!-- header code for block reveler - split screen ends here -->
Footer Files:
<!-- folder block revelaler -->
<!-- footer code for block revelaer starts here -->
<script src="http://ppaper.weebly.com/files/theme/anime.min.js"></script>
<script src="http://ppaper.weebly.com/files/theme/scrollMonitor.js"></script>
<script src="http://ppaper.weebly.com/files/theme/main-block.js"></script>
<script>
(function() {
// Fake loading.
setTimeout(init, 1000);
function init() {
document.body.classList.remove('loading');
//************************ Example 1 - reveal on load ********************************
var rev1 = new RevealFx(document.querySelector('#rev-1'), {
revealSettings : {
bgcolor: '#7f40f1',
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
});
rev1.reveal();
var rev2 = new RevealFx(document.querySelector('#rev-2'), {
revealSettings : {
bgcolor: '#fcf652',
delay: 250,
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
});
rev2.reveal();
//************************ Example 2 - reveal on scroll ********************************
var scrollElemToWatch_1 = document.getElementById('rev-3'),
watcher_1 = scrollMonitor.create(scrollElemToWatch_1, -300),
rev3 = new RevealFx(scrollElemToWatch_1, {
revealSettings : {
bgcolor: '#fcf652',
direction: 'rl',
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
}),
rev4 = new RevealFx(document.querySelector('#rev-4'), {
revealSettings : {
bgcolor: '#7f40f1',
delay: 250,
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
}),
rev5 = new RevealFx(document.querySelector('#rev-5'), {
revealSettings : {
bgcolor: '#7f40f1',
delay: 500,
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
}),
scrollElemToWatch_2 = document.getElementById('rev-6'),
watcher_2 = scrollMonitor.create(scrollElemToWatch_2, -300),
rev6 = new RevealFx(scrollElemToWatch_2, {
revealSettings : {
bgcolor: '#fcf652',
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
}),
rev7 = new RevealFx(document.querySelector('#rev-7'), {
revealSettings : {
bgcolor: '#7f40f1',
direction: 'rl',
delay: 250,
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
}),
rev8 = new RevealFx(document.querySelector('#rev-8'), {
revealSettings : {
bgcolor: '#7f40f1',
direction: 'rl',
delay: 500,
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
}),
scrollElemToWatch_3 = document.getElementById('rev-9'),
watcher_3 = scrollMonitor.create(scrollElemToWatch_3, -300),
rev9 = new RevealFx(scrollElemToWatch_3, {
revealSettings : {
bgcolor: '#fcf652',
direction: 'rl',
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
}),
rev10 = new RevealFx(document.querySelector('#rev-10'), {
revealSettings : {
bgcolor: '#7f40f1',
delay: 250,
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
}),
rev11 = new RevealFx(document.querySelector('#rev-11'), {
revealSettings : {
bgcolor: '#7f40f1',
delay: 500,
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
});
watcher_1.enterViewport(function() {
rev3.reveal();
rev4.reveal();
rev5.reveal();
watcher_1.destroy();
});
watcher_2.enterViewport(function() {
rev6.reveal();
rev7.reveal();
rev8.reveal();
watcher_2.destroy();
});
watcher_3.enterViewport(function() {
rev9.reveal();
rev10.reveal();
rev11.reveal();
watcher_3.destroy();
});
//************************ Example 3 - api examples ********************************
var rev12 = new RevealFx(document.querySelector('#rev-12')),
trigger_1 = document.getElementById('rev-trigger-1'),
trigger_2 = document.getElementById('rev-trigger-2'),
trigger_3 = document.getElementById('rev-trigger-3'),
trigger_4 = document.getElementById('rev-trigger-4'),
trigger_5 = document.getElementById('rev-trigger-5');
trigger_1.addEventListener('click', function() {
rev12.reveal({
bgcolor: '#c1c0b7',
duration: 300,
onStart: function(contentEl, revealerEl) { contentEl.style.opacity = 0; },
onCover: function(contentEl, revealerEl) { contentEl.style.opacity = 1; }
});
});
trigger_2.addEventListener('click', function() {
rev12.reveal({
bgcolor: '#c1c0b7',
duration: 300,
direction: 'rl',
onStart: function(contentEl, revealerEl) { contentEl.style.opacity = 0; },
onCover: function(contentEl, revealerEl) { contentEl.style.opacity = 1; }
});
});
trigger_3.addEventListener('click', function() {
rev12.reveal({
bgcolor: '#c1c0b7',
easing: 'easeOutExpo',
direction: 'bt',
onStart: function(contentEl, revealerEl) {
anime.remove(contentEl);
contentEl.style.opacity = 0;
},
onCover: function(contentEl, revealerEl) {
anime({
targets: contentEl,
duration: 800,
delay: 80,
easing: 'easeOutExpo',
translateY: [40,0],
opacity: [0,1]
});
}
});
});
trigger_4.addEventListener('click', function() {
rev12.reveal({
bgcolor: '#c1c0b7',
duration: 300,
direction: 'tb',
onStart: function(contentEl, revealerEl) {
anime.remove(contentEl);
contentEl.style.opacity = 0;
},
onCover: function(contentEl, revealerEl) {
anime({
targets: contentEl,
duration: 500,
delay: 50,
easing: 'easeOutBounce',
translateY: [-40,0],
opacity: {
value: [0,1],
duration: 300,
easing: 'linear'
}
});
}
});
});
trigger_5.addEventListener('click', function() {
rev12.reveal({
bgcolor: '#7f40f1',
duration: 400,
easing: 'easeInOutQuad',
onStart: function(contentEl, revealerEl) {
anime.remove(contentEl);
contentEl.style.opacity = 0;
},
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
anime({
targets: contentEl,
duration: 800,
delay: 80,
easing: 'easeOutExpo',
scale: [0.5,1],
opacity: [0,1]
});
}
});
});
}
})();
</script>
<!-- footer code for block revelaer ends here -->
Page type: No Header with footer and header code
files:
Header files:
<!-- folder Block Revealer -->
<!-- Header code block reveler - split screen starts here -->
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Poppins:700" rel="stylesheet">
<!-- <link rel="stylesheet" type="text/css" href="http://ppaper.weebly.com/files/theme/normalize.css" /> <!-- normalize -->
<link rel="stylesheet" type="text/css" href="http://ppaper.weebly.com/files/theme/demo-block-scrollx.css" />
<link rel="stylesheet" type="text/css" href="http://ppaper.weebly.com/files/theme/revealer-block.css" />
<link rel="stylesheet" type="text/css" href="http://ppaper.weebly.com/files/theme/pater.css" />
<script>document.documentElement.className = 'js';</script>
<!-- header code for block reveler - split screen ends here -->
Footer Files:
<!-- folder block revelaler -->
<!-- footer code for block revelaer starts here -->
<script src="http://ppaper.weebly.com/files/theme/anime.min.js"></script>
<script src="http://ppaper.weebly.com/files/theme/scrollMonitor.js"></script>
<script src="http://ppaper.weebly.com/files/theme/main-block.js"></script>
<script>
(function() {
// Fake loading.
setTimeout(init, 1000);
function init() {
document.body.classList.remove('loading');
//************************ Example 1 - reveal on load ********************************
var rev1 = new RevealFx(document.querySelector('#rev-1'), {
revealSettings : {
bgcolor: '#7f40f1',
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
});
rev1.reveal();
var rev2 = new RevealFx(document.querySelector('#rev-2'), {
revealSettings : {
bgcolor: '#fcf652',
delay: 250,
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
});
rev2.reveal();
//************************ Example 2 - reveal on scroll ********************************
var scrollElemToWatch_1 = document.getElementById('rev-3'),
watcher_1 = scrollMonitor.create(scrollElemToWatch_1, -300),
rev3 = new RevealFx(scrollElemToWatch_1, {
revealSettings : {
bgcolor: '#fcf652',
direction: 'rl',
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
}),
rev4 = new RevealFx(document.querySelector('#rev-4'), {
revealSettings : {
bgcolor: '#7f40f1',
delay: 250,
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
}),
rev5 = new RevealFx(document.querySelector('#rev-5'), {
revealSettings : {
bgcolor: '#7f40f1',
delay: 500,
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
}),
scrollElemToWatch_2 = document.getElementById('rev-6'),
watcher_2 = scrollMonitor.create(scrollElemToWatch_2, -300),
rev6 = new RevealFx(scrollElemToWatch_2, {
revealSettings : {
bgcolor: '#fcf652',
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
}),
rev7 = new RevealFx(document.querySelector('#rev-7'), {
revealSettings : {
bgcolor: '#7f40f1',
direction: 'rl',
delay: 250,
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
}),
rev8 = new RevealFx(document.querySelector('#rev-8'), {
revealSettings : {
bgcolor: '#7f40f1',
direction: 'rl',
delay: 500,
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
}),
scrollElemToWatch_3 = document.getElementById('rev-9'),
watcher_3 = scrollMonitor.create(scrollElemToWatch_3, -300),
rev9 = new RevealFx(scrollElemToWatch_3, {
revealSettings : {
bgcolor: '#fcf652',
direction: 'rl',
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
}),
rev10 = new RevealFx(document.querySelector('#rev-10'), {
revealSettings : {
bgcolor: '#7f40f1',
delay: 250,
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
}),
rev11 = new RevealFx(document.querySelector('#rev-11'), {
revealSettings : {
bgcolor: '#7f40f1',
delay: 500,
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
}
}
});
watcher_1.enterViewport(function() {
rev3.reveal();
rev4.reveal();
rev5.reveal();
watcher_1.destroy();
});
watcher_2.enterViewport(function() {
rev6.reveal();
rev7.reveal();
rev8.reveal();
watcher_2.destroy();
});
watcher_3.enterViewport(function() {
rev9.reveal();
rev10.reveal();
rev11.reveal();
watcher_3.destroy();
});
//************************ Example 3 - api examples ********************************
var rev12 = new RevealFx(document.querySelector('#rev-12')),
trigger_1 = document.getElementById('rev-trigger-1'),
trigger_2 = document.getElementById('rev-trigger-2'),
trigger_3 = document.getElementById('rev-trigger-3'),
trigger_4 = document.getElementById('rev-trigger-4'),
trigger_5 = document.getElementById('rev-trigger-5');
trigger_1.addEventListener('click', function() {
rev12.reveal({
bgcolor: '#c1c0b7',
duration: 300,
onStart: function(contentEl, revealerEl) { contentEl.style.opacity = 0; },
onCover: function(contentEl, revealerEl) { contentEl.style.opacity = 1; }
});
});
trigger_2.addEventListener('click', function() {
rev12.reveal({
bgcolor: '#c1c0b7',
duration: 300,
direction: 'rl',
onStart: function(contentEl, revealerEl) { contentEl.style.opacity = 0; },
onCover: function(contentEl, revealerEl) { contentEl.style.opacity = 1; }
});
});
trigger_3.addEventListener('click', function() {
rev12.reveal({
bgcolor: '#c1c0b7',
easing: 'easeOutExpo',
direction: 'bt',
onStart: function(contentEl, revealerEl) {
anime.remove(contentEl);
contentEl.style.opacity = 0;
},
onCover: function(contentEl, revealerEl) {
anime({
targets: contentEl,
duration: 800,
delay: 80,
easing: 'easeOutExpo',
translateY: [40,0],
opacity: [0,1]
});
}
});
});
trigger_4.addEventListener('click', function() {
rev12.reveal({
bgcolor: '#c1c0b7',
duration: 300,
direction: 'tb',
onStart: function(contentEl, revealerEl) {
anime.remove(contentEl);
contentEl.style.opacity = 0;
},
onCover: function(contentEl, revealerEl) {
anime({
targets: contentEl,
duration: 500,
delay: 50,
easing: 'easeOutBounce',
translateY: [-40,0],
opacity: {
value: [0,1],
duration: 300,
easing: 'linear'
}
});
}
});
});
trigger_5.addEventListener('click', function() {
rev12.reveal({
bgcolor: '#7f40f1',
duration: 400,
easing: 'easeInOutQuad',
onStart: function(contentEl, revealerEl) {
anime.remove(contentEl);
contentEl.style.opacity = 0;
},
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
anime({
targets: contentEl,
duration: 800,
delay: 80,
easing: 'easeOutExpo',
scale: [0.5,1],
opacity: [0,1]
});
}
});
});
}
})();
</script>
<!-- footer code for block revelaer ends here -->

The style sheet is called sytles-pdp1.css. It has things for text, the question is
if this will work with the SFIX nav3 or not. It seesm to work
now let us try a link. Link does not work
The header code has mobile redirect codes.