В google chrome, «Просмотр кода фрейма» в контекстном меню фрейма с результатом. Открывается новое окно с кодом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - Page Transition with Loader</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@-webkit-keyframes delay {
0%, 40%, 100% {
transform: scaleY(0.05);
-webkit-transform: scaleY(0.05);
}
20% {
transform: scaleY(1);
-webkit-transform: scaleY(1);
}
}
@keyframes delay {
0%, 40%, 100% {
transform: scaleY(0.05);
-webkit-transform: scaleY(0.05);
}
20% {
transform: scaleY(1);
-webkit-transform: scaleY(1);
}
}
body {
font-size: 1.6rem;
font-family: "Open Sans", sans-serif;
color: #4089a6;
background-color: #ffffff;
-webkit-font-smoothing: antialiased;
/*&.is-changing{
&:before,
&:after{
transform: translateY(0);
}
}*/
}
body:before, body:after {
content: '';
height: 50vh;
width: 100%;
position: fixed;
left: 0;
background: #1c2020;
z-index: 1;
}
body:before {
top: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
body:after {
bottom: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
h1 {
color: #1c2020;
margin-bottom: 1em;
font-size: 2.2rem;
font-weight: 100;
}
.btn {
display: inline-block;
padding: 1.4em 1.6em;
margin-bottom: 2em;
border-radius: 50em;
background-color: #343b3b;
color: #ffffff;
font-weight: bold;
font-size: 0.8rem;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
}
.btn:hover {
background-color: #404949;
}
.loader {
margin: 0 auto;
width: 60px;
height: 50px;
text-align: center;
font-size: 10px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
z-index: 500;
opacity: 0;
}
.loader > div {
height: 100%;
width: 8px;
display: inline-block;
float: left;
margin-left: 2px;
-webkit-animation: delay 0.8s infinite ease-in-out;
animation: delay 0.8s infinite ease-in-out;
}
.loader .bar1 {
background-color: #754fa0;
}
.loader .bar2 {
background-color: #09b7bf;
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.loader .bar3 {
background-color: #90d36b;
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.loader .bar4 {
background-color: #f2d40d;
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.loader .bar5 {
background-color: #fcb12b;
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.loader .bar6 {
background-color: #ed1b72;
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
main {
height: 100vh;
/* padding: 10px; */
text-align: center;
}
main .-content {
position: relative;
height: 100vh;
}
main .-content > div {
height: 100%;
overflow: hidden;
overflow-y: auto;
}
main .-content.-index {
background-color: #f6f6f6;
display: table;
width: 100%;
}
main .-content.-index > div {
display: table-cell;
vertical-align: middle;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<div class="loader">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
</div>
<main>
<div class="-content -index">
<div>
<h1>Loader Transition</h1>
<a href="#" class="btn js-trigger-transition">Begin Transition</a>
</div>
</div>
</main>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.12.1/plugins/CSSRulePlugin.min.js'></script>
<script id="rendered-js">
// play on load for gallery view
setTimeout(transition, 1000);
$('.js-trigger-transition').on('click', function (e) {
e.preventDefault();
transition();
});
function transition() {
var tl = new TimelineMax();
tl.to(CSSRulePlugin.getRule('body:before'), 0.2, { cssRule: { top: '50%' }, ease: Power2.easeOut }, 'close').
to(CSSRulePlugin.getRule('body:after'), 0.2, { cssRule: { bottom: '50%' }, ease: Power2.easeOut }, 'close').
to($('.loader'), 0.2, { opacity: 1 }).
to(CSSRulePlugin.getRule('body:before'), 0.2, { cssRule: { top: '0%' }, ease: Power2.easeOut }, '+=1.5', 'open').
to(CSSRulePlugin.getRule('body:after'), 0.2, { cssRule: { bottom: '0%' }, ease: Power2.easeOut }, '-=0.2', 'open').
to($('.loader'), 0.2, { opacity: 0 }, '-=0.2');
}
//# sourceURL=pen.js
</script>
</body>
</html>
Скопировала, вставила в текстовый редактор, сохранила как html. Нормально открывается, и всё работает.
