P Paper
  • Menu
  • Imersive video
  • Reveal1
  • Reveal2
  • Animated Intro
  • AOS-PDP-New
  • Sticky Footer
  • 3D grid
  • Vertical Fixed Nav
  • Vertical Fixed Nav2
  • Split Screen Reveal
  • On Load block revealer
  • On Scroll1
  • Modal Block reveal
  • Orgami Foldout Gallery
  • On Load blockX
  • Hover Slide
  • Grid Loading3
  • AOS Multistep
  • Onscroll-Orig
  • Border SVG Line
  • Samsung
  • HTML5 Video
  • Split Screen NEW1
  • Hover Tilt8N
  • Hover Tilt8-single
  • Horiz TimeLine
  • vert timeline
  • Vert Scroll timeline
  • Vline-Manoela
  • Split Screen rev 2 img
  • 10 Image Hover Effects
  • Rotate Icon
  • CSS Masked Transition
  • Hover Tilt Effect-N
  • Image Mask
  • SVG MOdal window
  • Border Animation SVG
  • BorderSVG1
  • Card Expansion
  • Multi Overlay
  • Hover Stack Motion
  • FAQ
  • responsive accordion
  • Smart Fixed Navigation
  • Vertical Fixed Nav1
  • Multiple Content Overlays
  • Card Expansion Pbrisk Apsara
  • Scroll Down Mouse SVG
  • Ex Bar Menu1
  • Ex Bar Menu2
  • Expanding Bar Menu3
  • Zoom
  • Hover Effect set1
  • Hover Stack 1row
  • Blend Double Exp
  • Cross Ref Table
  • Grid Load Animation
  • Split Page Layout
  • Team member bio
  • Responsive vertical tab
  • Product Comparision
  • Product Compare Manoela
  • Designer Developer Page
  • Header Play
  • Explodal
  • Explodal-New
  • Arti Intro Fixed Side
  • Arti intro side
  • Arti intro grid
  • Morphing Back
  • Morphing Back2a
  • Folder Preview Ideas
  • Folder Pre-3
  • Responsive Tabs-RTAB
  • Responsive Full Width Tab
  • Letter Interaction
  • Image Grid Demo1
  • lLittleSnippet1579
  • Split Screen rev 2a
  • Pointy Slider
  • Organic Morphing
  • Organic Morphing2
  • Buttons Baamboo
  • CSS Grid Slide Show
  • CSS Grid Slide Demo1
  • Sticky Top
  • Animated Pieces
  • Schedule Template
  • Animated Pieces Grid
  • Animated Pieces Gallery
  • M word Overlays
  • Hover Menu Items
  • Morphpage-d2
  • morphpage d-3
  • Back to top
  • Hover-menu-salal
  • Hover Menu-Yona
  • Hove Menu-Dustu
  • hover Menu Tsula
  • Menu hover Mohe
  • Morphing Back2aNew
  • Auto Hide Nav 3
  • indexap
    • servicesap
  • DragImageGrid
  • Split Layout
  • Deco Lines EX3
  • Organic SVG Morph
  • Team member bio1
  • Strechy Navigation
  • MENU Block revealer
  • Smart Fix Nav V1
  • lice Dual Demo1
  • Slice Demo1-Play
  • SVG Hero2
  • Slice Demo2-Play
  • Liquid D3
  • Grid Load Animation -shu
  • Quad Image
  • SVG Shape Overlay
  • Split Screen
  • xpandable Project Pres
  • Sliding Panel
  • Menu
  • Imersive video
  • Reveal1
  • Reveal2
  • Animated Intro
  • AOS-PDP-New
  • Sticky Footer
  • 3D grid
  • Vertical Fixed Nav
  • Vertical Fixed Nav2
  • Split Screen Reveal
  • On Load block revealer
  • On Scroll1
  • Modal Block reveal
  • Orgami Foldout Gallery
  • On Load blockX
  • Hover Slide
  • Grid Loading3
  • AOS Multistep
  • Onscroll-Orig
  • Border SVG Line
  • Samsung
  • HTML5 Video
  • Split Screen NEW1
  • Hover Tilt8N
  • Hover Tilt8-single
  • Horiz TimeLine
  • vert timeline
  • Vert Scroll timeline
  • Vline-Manoela
  • Split Screen rev 2 img
  • 10 Image Hover Effects
  • Rotate Icon
  • CSS Masked Transition
  • Hover Tilt Effect-N
  • Image Mask
  • SVG MOdal window
  • Border Animation SVG
  • BorderSVG1
  • Card Expansion
  • Multi Overlay
  • Hover Stack Motion
  • FAQ
  • responsive accordion
  • Smart Fixed Navigation
  • Vertical Fixed Nav1
  • Multiple Content Overlays
  • Card Expansion Pbrisk Apsara
  • Scroll Down Mouse SVG
  • Ex Bar Menu1
  • Ex Bar Menu2
  • Expanding Bar Menu3
  • Zoom
  • Hover Effect set1
  • Hover Stack 1row
  • Blend Double Exp
  • Cross Ref Table
  • Grid Load Animation
  • Split Page Layout
  • Team member bio
  • Responsive vertical tab
  • Product Comparision
  • Product Compare Manoela
  • Designer Developer Page
  • Header Play
  • Explodal
  • Explodal-New
  • Arti Intro Fixed Side
  • Arti intro side
  • Arti intro grid
  • Morphing Back
  • Morphing Back2a
  • Folder Preview Ideas
  • Folder Pre-3
  • Responsive Tabs-RTAB
  • Responsive Full Width Tab
  • Letter Interaction
  • Image Grid Demo1
  • lLittleSnippet1579
  • Split Screen rev 2a
  • Pointy Slider
  • Organic Morphing
  • Organic Morphing2
  • Buttons Baamboo
  • CSS Grid Slide Show
  • CSS Grid Slide Demo1
  • Sticky Top
  • Animated Pieces
  • Schedule Template
  • Animated Pieces Grid
  • Animated Pieces Gallery
  • M word Overlays
  • Hover Menu Items
  • Morphpage-d2
  • morphpage d-3
  • Back to top
  • Hover-menu-salal
  • Hover Menu-Yona
  • Hove Menu-Dustu
  • hover Menu Tsula
  • Menu hover Mohe
  • Morphing Back2aNew
  • Auto Hide Nav 3
  • indexap
    • servicesap
  • DragImageGrid
  • Split Layout
  • Deco Lines EX3
  • Organic SVG Morph
  • Team member bio1
  • Strechy Navigation
  • MENU Block revealer
  • Smart Fix Nav V1
  • lice Dual Demo1
  • Slice Demo1-Play
  • SVG Hero2
  • Slice Demo2-Play
  • Liquid D3
  • Grid Load Animation -shu
  • Quad Image
  • SVG Shape Overlay
  • Split Screen
  • xpandable Project Pres
  • Sliding Panel
Search by typing & pressing enter

YOUR CART

Self Imposed

Limitations

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 -->


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.

Click for full bio
Powered by Create your own unique website with customizable templates.