ProjNatale - animated divs

Developer
Marco Pavan
Size
3,339 Kb
Views
24,288
  1. ProjNatale - animated divs Previews
  2. ProjNatale - animated divs HTML Codes
  3. ProjNatale - animated divs CSS Codes
  4. ProjNatale - animated divs JS Codes

How do I make an projnatale - animated divs?

What is a projnatale - animated divs? How do you make a projnatale - animated divs? This script and codes were developed by Marco Pavan on 18 November 2022, Friday.

ProjNatale - animated divs Previews
IQ Test

ProjNatale - animated divs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ProjNatale - animated divs</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="main-wrapper"> <div id="frame-1" class="frame no-rotate-frame"> <div id="page-1"> <button id="btn-1">>></button> <p>Testo page 1...</p> </div> </div> <div id="window"> <div id="frame-wrapper" class=""> <div id="frame-2" class="frame rotate-frame"> <div id="page-2"> <button id="btn-2">>></button><br/> <p>Testo page 2...</p> <video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop> <!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button -->
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video> </div> </div> <div id="frame-3" class="frame rotate-frame"> <div id="page-3"> <button id="btn-3">>></button><br/> <p>Testo page 3...</p> <video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop> <!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button -->
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video> </div> </div> <div id="frame-4" class="frame rotate-frame"> <div id="page-4"> <p>Testo page 4...</p> <video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop> <!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button -->
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video> </div> </div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

ProjNatale - animated divs - Script Codes CSS Codes

#main-wrapper { width: 960px; height: 750px; margin: 0 auto; position: relative;
}
#window { position: absolute; top: 750px; width: 960px; height: 750px; overflow: hidden; background-color: #bbb;
}
#frame-wrapper { position: absolute; width: 2280px; height: 750px; transform: rotateX(0deg) rotateZ(-40deg); transform-style: preserve-3d; transform-origin: top left; background-color: #bbb;
}
#frame-wrapper.scroll-all { animation-name: scrollFrames; animation-duration: 2s; animation-fill-mode: forwards;
}
#frame-wrapper.scroll-1 { animation-name: scrollFrames_1; animation-duration: 2s; animation-fill-mode: forwards;
}
#frame-wrapper.scroll-2 { animation-name: scrollFrames_2; animation-duration: 2s; animation-fill-mode: forwards;
}
.frame { width: 960px; height: 750px; top: 0; left: 0; position: absolute;
}
.rotate-frame { transform: rotateX(0deg) rotateZ(40deg); transform-origin: top left;
}
#frame-1 { background: red no-repeat center center;
}
#frame-2 { background: #bbb url("http://winnerhun.uw.hu/vigyorpofa.gif") no-repeat center center; left: 0;
}
#frame-3 { background: #bbb url("http://winnerhun.uw.hu/vigyorpofa.gif") no-repeat center center; left: 960px;
}
#frame-4 { background: #bbb url("http://winnerhun.uw.hu/vigyorpofa.gif") no-repeat center center; left: 1920px;
}
@keyframes scrollFrames { from { left: 0; top: 0; } to { left: -1920px; top: 1920px; }
}
@keyframes scrollFrames_1 { 0% { left: 0; top: 0; -webkit-filter: blur(0); } 10% { -webkit-filter: blur(5px); } 90% { -webkit-filter: blur(0); } 100% { left: -735px; top: 617px; }
}
@keyframes scrollFrames_2 { 0% { left: -735px; top: 617px; -webkit-filter: blur(0); } 10% { -webkit-filter: blur(5px); } 90% { -webkit-filter: blur(0); } 100% { left: -1470px; top: 1234px; }
}

ProjNatale - animated divs - Script Codes JS Codes

$(function() { console.log( "ready!" ); $('#btn-1').click(function() { console.log( "Click!" ); $(window).scrollTo({ top:750, left:0}, 500, 'ease'); }); $('#btn-2').click(function() { console.log( "Click!" ); $('#frame-wrapper').addClass('scroll-1'); }); $('#btn-3').click(function() { console.log( "Click!" ); $('#frame-wrapper').addClass('scroll-2'); });
});
ProjNatale - animated divs - Script Codes
ProjNatale - animated divs - Script Codes
Home Page Home
Developer Marco Pavan
Username topik
Uploaded November 18, 2022
Rating 3
Size 3,339 Kb
Views 24,288
Do you need developer help for ProjNatale - animated divs?

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!

Marco Pavan (topik) Script Codes
Name
CSS swapper
CSS Spinner
ProjNatale - transit.js
CSS arrow
Do something after a while
ProjNatale - background-image
Vue Test
A Pen by Marco Pavan
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!