Page Animation

Developer
Michael Lee
Size
3,202 Kb
Views
6,072
  1. Page Animation Previews
  2. Page Animation HTML Codes
  3. Page Animation CSS Codes
  4. Page Animation JS Codes

How do I make an page animation?

Saw Phil LaPier's excellent page animations on Dribbble. He mentioned that he created it with his excellent SASS library, Bourbon. So I had to give it a shot.. What is a page animation? How do you make a page animation? This script and codes were developed by Michael Lee on 20 January 2023, Friday.

Page Animation Previews
IQ Test

Page Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Page Animation</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p class="Credits">Inspired by <a href="https://twitter.com/phillapier">Phil LaPier</a>'s Dribbble, a pen by <a href="http://michaellee.co">Michael Lee</a></p>
<a href="javascript:;" class="Trigger">TRIGGER</a>
<div class="Stage"> <div class="Card-top"></div> <div class="Card-right"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Page Animation - Script Codes CSS Codes

body, html { color: #fff; font-family: 'Source Sans Pro', sans-serif; height: 100%; margin: 0; padding: 0; text-align: center; background-color: #5856D6; background-image: -webkit-linear-gradient(#5856D6, #1D62F0); background-image: linear-gradient(#5856D6, #1D62F0);
}
a { color: #fff; text-decoration: none; border-bottom: 2px solid rgba(255, 255, 255, 0.4); padding-bottom: 2px; -webkit-transition: border 0.5s ease; -moz-transition: border 0.5s ease; transition: border 0.5s ease;
}
a:hover { border-bottom: 2px solid white;
}
.Credits { margin: 2em 0 1em;
}
.Stage { background: #414141; left: 0; margin: auto; overflow: hidden; position: absolute; right: 0; height: 568px; width: 320px;
}
.Stage.is-pushed .Card-top { opacity: 0.2; -webkit-transform: scale3d(0.7, 0.7, 0.7); -moz-transform: scale3d(0.7, 0.7, 0.7); -ms-transform: scale3d(0.7, 0.7, 0.7); -o-transform: scale3d(0.7, 0.7, 0.7); transform: scale3d(0.7, 0.7, 0.7);
}
.Stage.is-pushed .Card-right { right: 0;
}
.Card-top, .Card-right { background: #fff; display: block; position: absolute; height: 1000px; width: 320px;
}
.Card-top { -webkit-transition: all 0.85s ease; -moz-transition: all 0.85s ease; transition: all 0.85s ease;
}
.Card-right { right: -100%; -webkit-transition: all 0.85s ease; -moz-transition: all 0.85s ease; transition: all 0.85s ease;
}
.Trigger { text-decoration: none; border: 2px solid #fff; display: inline-block; letter-spacing: 2px; margin: 1em 0; overflow: hidden; padding: 10px; position: relative; z-index: 2; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; transition: background 0.5s ease;
}
.Trigger:hover { background: rgba(255, 255, 255, 0.2);
}

Page Animation - Script Codes JS Codes

$('.Trigger').on('click', function(){ $('.Stage').toggleClass('is-pushed');
});
Page Animation - Script Codes
Page Animation - Script Codes
Home Page Home
Developer Michael Lee
Username michaellee
Uploaded January 20, 2023
Rating 4
Size 3,202 Kb
Views 6,072
Do you need developer help for Page Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Michael Lee (michaellee) Script Codes
Name
Hidden Social Media Share Buttons
Illustrated CSS Switch
X Mobile Menu
Mountains Illustration
Stop Using Corner Banners
Responsive C3.js chart
SVG Hearts
Ringing bell
Rotating Button
Current time clock icon
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!