Some ideas for modern multi-layer page transitions using CSS Animations.

Overview

Multi-Layer Page Reveal Effects

Some ideas for modern multi-layer page transitions using CSS Animations.

Article on Codrops

Demo

Sponsor

Demo sponsored by Hack Reactor: Your CS success starts here.

License

Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".

Read more here: License

Credits

Misc

Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest

© Codrops 2016

You might also like...

Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.

Rain & Water Effect Experiments Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber. Article on Codrops

Jan 4, 2023

Some shape morphing hover effects on images using SVG clipPath.

Some shape morphing hover effects on images using SVG clipPath.

Organic Shape Animations with SVG clipPath Some shape morphing hover effects using SVG clipPath on an image. Article on Codrops Demo Credits Anime.js

Oct 16, 2022

Loading effects for assets including some built in animated reveals

Loading effects for assets including some built in animated reveals

Asset loading effects This is a library to show the loading progress of given assets and reveal them using various animations. Please give feedback, r

Dec 8, 2022

A lightweight, efficient and easy-to-use Canvas library for building some cool particle effects.

JParticles · 中文 | English 官网:jparticles.js.org 特效列表 粒子运动 波纹运动 波纹进度条 雪花飘落 线条动画 介绍 JParticles(JavaScript Particles 的缩写)是一款基于 Canvas 的不依赖于其他库的轻量级 JavaScr

Dec 27, 2022

Lazy Line Painter - A Modern JS library for SVG path animation

Lazy Line Painter - A Modern JS library for SVG path animation

Lazy Line Painter lazylinepainter.info A Modern JS library for SVG path animation Getting Started | Documentation | Examples | Lazy Line Composer Gett

Jan 3, 2023

Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Background Scale Hover Effect Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths. Article on Codrops Demo

Dec 6, 2022

3D (animated) cube using only CSS (Less), originally used by LeanCloud (aka. AVOS Cloud)

cube.less 3D (animated) cube using only CSS (LESS). Demo See this demo page. There's also a live production site (WIP) using these cubes. Install $ bo

Nov 14, 2022

Create a beautiful 3D tilted effect on scroll with jQuery Tilted Page Scroll plugin

#Tilted Page Scroll by Pete R. Create a beautilful 3D tilted scrolling effect for your website with jQuery Tilted Page Scroll. Created by Pete R., Fou

Sep 18, 2022

fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

What is fakeLoader.js fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulat

Dec 6, 2022
Comments
  • connect to the navbar

    connect to the navbar

    Hello, thank you for a plugin, it is a good job. If you don’t mind I have a question, could you help me, please? I have tried to connect my navbar and logo(homepage) clicks to this plugin, but have a problem with the code, it will be great to solve this problem, Thank you very much. Here is the code by which I connected navbar and logo(homepage) to the plugin.

    (function() {

    var pages = [].slice.call(document.querySelectorAll('.pages > .page')),
    	currentPage = 0,
    	
    	revealerOpts = {
    		// the layers are the elements that move from the sides
    		nmbLayers : 3,
    		// bg color of each layer
    		bgcolor : ['#52b7b9', '#ffffff', '#53b7eb'],
    		// effect classname
    		effect : 'anim--effect-3'
    	};
    	revealer = new Revealer(revealerOpts);
    
    // clicking the page nav
    var navbar = document.getElementById("navbar").getElementsByTagName("a");
    var n;
    for (var i = 0; i < navbar.length; i++) {
    	navbar[i].addEventListener('click', function() {n = i; reveal('top'); });
    }
    
    // triggers the effect by calling instance.reveal(direction, callbackTime, callbackFn)
    function reveal(direction) {
    		var callbackTime = 750;
    
            callbackFn = function() {
    
            	// this is the part where is running the turning of pages
            	classie.remove(pages[currentPage], 'page--current');
    
            	currentPage = n;
    
            	classie.add(pages[currentPage], 'page--current');
    
            };
    
        revealer.reveal(direction, callbackTime, callbackFn);
    } 
    

    })();

    opened by bagratzakaryan 1
Owner
Codrops
Codrops
A slideshow that uses a CSS glitch effect for slide transitions.

Glitch Slideshow A slideshow that uses the CSS Glitch Effect to transition between slides. Article on Codrops Demo Credits Images by Unsplash.com imag

Codrops 111 Dec 16, 2022
Modern ways of revealing new content using SVG animations.

Page Loading Effects Modern ways of revealing new content using SVG animations. Article on Codrops Demo Integrate or build upon it for free in your pe

Codrops 635 Dec 30, 2022
image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.

Diaporama Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions

Gaëtan Renaudeau 797 Nov 26, 2022
A collection of demo variations, ideas, concepts & experiments.

Codrops Sketches A collection of demo variations, ideas, raw concepts & experiments. Demos 2022 Sketch 001: Repetition Hover Effect (Round) Sketch 002

Codrops 56 Dec 27, 2022
CSS loading animations with minimal effort!

Whirl CSS loading animations with minimal effort! whirl is a curation of CSS loading animations(whirls! ?? ). It started as a drop in CSS file to get

Jhey Tompkins 1.4k Jan 4, 2023
🔮 CSS loading animations made by single element.

Three Dots The project is a set of CSS loading animations created with three dots which made by just single element. I think the project can not only

Zongbin 1.2k Dec 29, 2022
Pure css cross-browser loading animations.

[ArtWorx] xLoader Pure css cross-browser loading animations. xLoader is part of the ArtWorx collection. Most of the loaders made by community, You can

Anas Tawfik 21 Nov 15, 2021
Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. This is a porting to Web Animation API of the fabulous animate.css project.

Animatelo Just-add-water Web Animations Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emp

GibboK 477 Nov 12, 2022
A React component for creating typing animations.

react-typewriter A react component for animated typing text. Installation npm install --save react-typewriter Usage Pass in children to the TypeWrite

Ian Dilling 80 Dec 1, 2022
Create cool animated SVG spinners, loaders and other looped animations in seconds

SVG Circus SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds. Developing To run a local SVG

Alex Kaul 301 Dec 24, 2022