ProjNatale - transit.js

Developer
Marco Pavan
Size
7,182 Kb
Views
14,168
  1. ProjNatale - transit.js Previews
  2. ProjNatale - transit.js HTML Codes
  3. ProjNatale - transit.js CSS Codes
  4. ProjNatale - transit.js JS Codes

How do I make an projnatale - transit.js?

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

ProjNatale - transit.js Previews
IQ Test

ProjNatale - transit.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ProjNatale - transit.js</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section id="main-wrapper"> <div id="frame-0" class="frame"> <!--<button id="btn-0">>></button> <p>Testo page 0...</p> <img --> <div class="content"> <div class="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras condimentum, diam at tristique rhoncus, quam sapien condimentum nunc, vitae iaculis mi eros id massa. Phasellus faucibus mauris ac ligula pellentesque placerat. Aliquam blandit in enim at tincidunt. Proin vitae egestas arcu, ut fringilla mi. </div> </div> </div> <div id="window"> <div id="background" class=""> <div id="frame-1" class="background-layer"> <video poster="http://placehold.it/720x404" 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/backflip.webm" type="video/webm"> <source src="http://thenewcode.com/assets/videos/backflip.mp4" type="video/mp4"> </video> </div> <div id="frame-2" class="background-layer"> <video poster="http://placehold.it/720x404" id="bgvid-2" 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 id="frame-3" class="background-layer"> <video poster="http://placehold.it/720x404" id="bgvid-3" 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/mountain.webm" type="video/webm"> <source src="http://thenewcode.com/assets/videos/mountain.mp4" type="video/mp4"> </video> </div> </div> <div id="layer" class="index-2"> <!----> <div class="content-layer" id="layer-1"> <div class="buttons"> <button class="prev"><<</button> <button class="next">&gt;&gt;</button> <div class="clear">&nbsp;</div> </div> <div class="headers"> <h2>[1]Title</h2> <h3>[1]Subtitle</h3> </div> <a href="#" data-frame="1" class="showZoom"/>[1]click</a> <div class="socials"> [1]FACEBOOK TWITTER.... </div> </div> <div class="content-layer" id="layer-2"> <div class="buttons"> <button class="prev"><<</button> <button class="next">&gt;&gt;</button> <div class="clear">&nbsp;</div> </div> <div class="headers"> <h2>[2]Title</h2> <h3>[2]Subtitle</h3> </div> <a href="#" data-frame="2" class="showZoom"/>[2]click</a> <div class="socials"> [2]FACEBOOK TWITTER.... </div> </div> <div class="content-layer" id="layer-3"> <div class="buttons"> <button class="prev"><<</button> <button class="next">&gt;&gt;</button> <div class="clear">&nbsp;</div> </div> <div class="headers"> <h2>[3]Title</h2> <h3>[3]Subtitle</h3> </div> <a href="#" data-frame="3" class="showZoom"/>[3]click</a> <div class="socials"> [3]FACEBOOK TWITTER.... </div> </div> </div> <div id="zoom" class=""> <div class="zoom-layer hide" id="zoom-1"> <a href="#" class="hideZoom" data-frame="1"/>X</a> <img src="http://placekitten.com/960/750"/> </div> <div class="zoom-layer hide" id="zoom-2"> <a href="#" class="hideZoom" data-frame="2"/>X</a> <img src="http://placekitten.com/g/960/750"/> </div> <div class="zoom-layer hide" id="zoom-3"> <a href="#" class="hideZoom" data-frame="3"/>X</a> <img src="http://placekitten.com/960/750"/> </div> </div> </div> </section> <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='https://ricostacruz.com/jquery.transit/jquery.transit.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

ProjNatale - transit.js - Script Codes CSS Codes

/*CSS reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block;
}
body { line-height: 1;
}
ol, ul { list-style: none;
}
blockquote, q { quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
/*CSS reset*/
/*Utilities*/
.index-1 { z-index: 9;
}
.index-2 { z-index: 99;
}
.index-3 { z-index: 999;
}
.hide { display: none;
}
.invisible { opacity: 0;
}
.clear { clear: both;
}
.visible { opacity: 1;
}
.not-visible { opacity: 0;
}
/*Utilities*/
/*General rules*/
#main-wrapper { width: 960px; height: 750px; /**/ margin: 0 auto; position: relative;
}
#window { position: relative; top: 600px; width: 100%; height: 100%;
}
.frame, #zoom, #background, #layer { width: 100%; height: 100%; top: 0; left: 0; position: absolute;
}
/*General rules*/
/*Specific rules*/
#frame-0 { height: 600px;
}
#frame-0 .content { position: absolute; bottom: 0; text-align: center; padding: 20px 70px; background: #c8c8c8; /* Fallback for older browsers without RGBA-support */ background: rgba(200, 200, 200, 0.5); line-height: 27px;
}
.background-layer { width: 100%; height: 100%; position: relative;
}
#frame-0 { background: #ccc; background-image: url("/images/img-1.jpg");
}
#frame-1, #frame-2, #frame-3 { background: #f0b7a1; /* Old browsers */ background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #f0b7a1 0%, #8c3310 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #f0b7a1 0%, #8c3310 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=0 ); /* IE6-9 */
}
#background video { width: 720px; height: 404px; display: block; position: relative; margin: 0 auto; top: 173px;
}
#layer { background-color: transparent;
}
#layer button { margin: 10px; display: block;
}
#layer .buttons { border: 1px solid; background-color: red; float: right; margin: 15px; display: none;
}
#layer .content-layer { width: 100%; height: 100%; position: relative;
}
#layer .content-layer .headers { text-align: center; color: white;
}
#layer .content-layer .headers h2 { text-transform: uppercase; margin-bottom: 10px; font-size: x-large;
}
#zoom .zoom-layer p { position: absolute;
}
.showZoom { position: absolute; top: 50%; left: 25%; text-decoration: none; font-weight: bold; font-size: x-large;
}
.hideZoom { position: absolute; right: 0; background-color: white; padding: 5px; text-decoration: none; font-size: x-large; border: 1px solid black;
}
.socials { position: absolute; bottom: 0; padding: 20px; margin: 10px; border: 1px solid black;
}
/*Specific rules*/
/*Transitions*/
.smil #frame-1 { transform: translate3d(0, 0, 0); background: transparent;
}
.smil #frame-2 { transform: translate3d(800px, -800px, 0px); background: transparent;
}
.smil #frame-3 { transform: translate3d(1600px, -1600px, 0px); background: transparent;
}
.smil #layer .buttons { display: block;
}
.smil #window { overflow: hidden; background-color: #bbb; background: #f0b7a1; /* Old browsers */ background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #f0b7a1 0%, #8c3310 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #f0b7a1 0%, #8c3310 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=0 ); /* IE6-9 */
}
.smil .background-layer { position: absolute; top: 0; left: 0;
}
.smil #layer .content-layer { display: none;
}
.smil #layer .content-layer#layer-1 { display: block;
}
.smil #background video { margin: 0; top: 50%; margin-top: -202px; margin-left: -360px; left: 50%;
}
/*#frame-wrapper {
animation-duration: 1s;
animation-fill-mode: forwards;
}
#frame-wrapper.position_1 {
animation-name: position_1;
}
#frame-wrapper.position_2 {
animation-name: position_2;
}
#frame-wrapper.position_3 {
animation-name: position_3;
}
#frame-wrapper.position_4 {
animation-name: position_4;
}
#frame-wrapper.position_5 {
animation-name: position_5;
}*/
/*@keyframes position_1 {
0% {
left: $defaultTop;
top: $defaultLeft;
-webkit-filter: blur(0);
}
10% {
-webkit-filter: blur(5px);
}
90% {
-webkit-filter: blur(0);
}
100% {
left: $defaultLeft - $stepLeft;
top: $defaultTop + $stepTop;
}
}
@keyframes position_2 {
0% {
left: $defaultLeft - $stepLeft;
top: $defaultTop + $stepTop;
-webkit-filter: blur(0);
}
10% {
-webkit-filter: blur(5px);
}
90% {
-webkit-filter: blur(0);
}
100% {
left: $defaultLeft - $defaultLeft*2;
top: $defaultTop + $stepTop*2;
}
}
@keyframes position_3 {
0% {
left: $defaultLeft - $defaultLeft*2;
top: $defaultTop + $stepTop*2;
-webkit-filter: blur(0);
}
10% {
-webkit-filter: blur(5px);
}
90% {
-webkit-filter: blur(0);
}
100% {
left: $defaultLeft - $stepLeft;
top: $defaultTop + $stepTop;
}
}
@keyframes position_4 {
0% {
left: $defaultLeft - $stepLeft;
top: $defaultTop + $stepTop;
-webkit-filter: blur(0);
}
10% {
-webkit-filter: blur(5px);
}
90% {
-webkit-filter: blur(0);
}
100% {
left: $defaultTop;
top: $defaultLeft;
}
}*/

ProjNatale - transit.js - Script Codes JS Codes

$(function() { console.log("ready!"); /*var positionClasses=['position_0','position_1','position_2','position_3','position_4']; var currentPositionIndex = 0; var currentPositionClass = positionClasses[currentPositionIndex]; var $movingElem = $('#frame-wrapper'); $('#prev').click(function() { $movingElem.removeClass(currentPositionClass); currentPositionClass = positionClasses[currentPositionIndex--]; $movingElem.addClass(currentPositionClass); }); $('#next').click(function() { $movingElem.removeClass(currentPositionClass); currentPositionClass = positionClasses[currentPositionIndex++]; $movingElem.addClass(currentPositionClass); });*/ var $movingElem = $('#background'); var stepLeft = 700; var stepTop = 700; var currentFrame = 1; var $nextBtn = $('.smil .next'); var $prevBtn = $('.smil .prev'); var $_nextBtn = $('.no-smil .next'); var $_prevBtn = $('.no-smil .prev'); $nextBtn.click(function() {	console.log('Click!'); currentFrame++; $('.content-layer').hide(); $movingElem.animate({ left: "-=800", top: "+=800" }, 800, function() { console.log("Finish!"); }); $('#layer-' + currentFrame).show(); }); $prevBtn.click(function() { currentFrame--; $('.content-layer').hide(); $movingElem.animate({ left: "+=800", top: "-=800" }, 800, function() { console.log("Finish!"); }); $('#layer-' + currentFrame).show(); }); /*Old browsers*/ $_nextBtn.click(function() { currentFrame++; $(window).scrollTo({ top: "+=750", left: 0 }, 600, 'ease'); }); $_prevBtn.click(function() { currentFrame--; $(window).scrollTo({ top: "-=750", left: 0 }, 600, 'ease'); }); /*Old browsers*/ $('.showZoom').click(function(e) { e.preventDefault(); console.log("Zoom!"); $('#zoom').addClass('index-3'); var frame = $(this).data('frame'); $('#zoom #zoom-' + frame).removeClass('hide'); }); $('.hideZoom').click(function(e) { e.preventDefault(); console.log("No Zoom!"); $('#zoom').removeClass('index-3'); var frame = $(this).data('frame'); console.log(frame); $('#zoom #zoom-' + frame).addClass('hide'); });
});
ProjNatale - transit.js - Script Codes
ProjNatale - transit.js - Script Codes
Home Page Home
Developer Marco Pavan
Username topik
Uploaded November 18, 2022
Rating 3
Size 7,182 Kb
Views 14,168
Do you need developer help for ProjNatale - transit.js?

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
A Pen by Marco Pavan
ProjNatale - background-image
Vue Test
CSS arrow
ProjNatale - animated divs
CSS Spinner
CSS swapper
Do something after a while
Create amazing marketing copy 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!