Transition Menu and Video Background

Developer
Angelina
Size
4,971 Kb
Views
16,192
  1. Transition Menu and Video Background Previews
  2. Transition Menu and Video Background HTML Codes
  3. Transition Menu and Video Background CSS Codes
  4. Transition Menu and Video Background JS Codes

How do I make an transition menu and video background?

Firebase dynamic database Dynamic Left Side bar menu CSS Transition dynamic feed shows when you chose option PORTFOLIO or BLOG. What is a transition menu and video background? How do you make a transition menu and video background? This script and codes were developed by Angelina on 24 November 2022, Thursday.

Transition Menu and Video Background Previews
IQ Test

Transition Menu and Video Background - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Transition Menu and Video Background</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head> <title> Website by Angelina Lapteva</title> <script src="https://cdn.firebase.com/js/client/2.2.0/firebase.js"> </script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> </head> <body>
<div class="vid-container"> <video id="Video1" class="bgvid back" autoplay="false" muted="muted" preload="auto" loop> <source src="http://www.belvestitodress.com/wp-content/uploads/2017/04/Jellyfish-deeply-relaxing-1.mp4" type="video/mp4"> </video> <!-- end video--> <!-- BEGINING OF NAVIGATION-->
<div id="wrapper"> <div class="col-1-3"> <div class="module">About Me </div> <li> <a href="http://angelina-portfolio.com/wordpress_7/?page_id=98" target="_blank">Curriculum Vitae</a></li> <li> <a href="https://www.behance.net/AngelinaLapteva" target="_blank">My Behance</a></li> </div> <div class="col-1-3"> <div class="module">News </div> </div> <div class="col-1-3"> <div class="module">Other </div> </div> <!--end of NAVIGATION --> <!--WELCOME COLUMN --> <div class="col-1-1"> <div class="moduletwo"> Welcome to my website.</div> <!--END OF COLUMN --> <!--TOOL BAR --> <div class="tool-bar"> <div class="tools"> <ul> <li> <i class="fa fa-heart" id="search"></i> </li> <li> <i class="fa fa-ellipsis-v" id="settings"></i> </li> </ul </div><!--end of tools--> </div> </div> <!--LEFT POP UP MENU-1 --> <div class="filters"> <ul> <li id="blog-filter">Blog</li> <li id="portfolio-filter">Portfolio</li> </ul> </div><!-- end of FILTERS--> <!--LEFT POP UP MENU-2 --> <div class="filterssec"> <ul> <li id="blog-filter">first option</li> <li id="portfolio-filter">second option</li> </ul> </div><!-- end of OPTIONS--> <!--FEED --> <div class="feed"> <div class="feed-item blog"> <div class="icon-holder"> <div class="icon"></div> </div><!--end of icon holder--> <div class="text-holder"> <div class="feed-title">My Blog Post</div> <div class="feed-description">something here.</div> </div><!--end of text holder--> <div class="spacer"></div> </div><!--end of feed item--> <div class="feed-item portfolio"> <div class="icon-holder"> <div class="icon"></div> </div><!--end of icon holder--> <div class="text-holder"> <div class="feed-title">Title</div> <div class="feed-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem fuga suscipit velit minima cum? Cum fugit atque reiciendis esse maxime iste aspernatur, optio assumenda aperiam. Possimus ipsa labore sapiente sed!</div> </div><!--end of text holder--> </div><!--end of feed item--> </div><!--end of feed--> </div> <!-- END OF VIDEO BACKGROUND --> </body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Transition Menu and Video Background - Script Codes CSS Codes

*{ /* better to do spacing in griid with padding but not with margin*/ margin:0; box-sizing:border-box; /* expand out of words */
}
body{ padding:0; margin:0;
}
/* I USSUALY PIT DIV WITH RED BORDER AND THST HOW I CAN TRACK ALL MY DIV BOXES*/
/div { border: solid red 1px;
}
/* VIDEO AS A BACKGROUND*/
.vid-container{ position:relative; height:100vh; overflow:hidden;
}
.bgvid.back { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100;
}
/* NAVIGATION */
#wrapper{ border: 1px solid black; width: 100%; margin:auto;
}
#wrapper div{
/* border: 1px solid black;*/
}
/* SELECTION FOR ALL COLUMNS*/
[class*='col-'] { float:left;
}
/* NAVIGATION LOOK AND TRANSITION*/
.col-1-3 { height:50px; width: 100%; background-color: #4184E5; padding:5px; -webkit-transition: height 2s; transition: height 2s; overflow:hidden; opacity: 0.6; border-radius: 10px; text-align:center; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size:28px;
}
.col-1-3:hover
{ background-color:#4184E5; height:150px; opacity:1; border-radius:10px;
}
.col-1-1 { width: 100%; background-size: cover;
position:absolute; height:50px; margin-top:150px; opacity: 0.6; border-radius: 10px; background-color:#4184E5;
}
.module{ padding: 10px; /*border: 1px solid black;*/ color:white;
}
/* WELCOME TO MY WEBSITE TITLE*/
.moduletwo{ padding: 10px; /*border: 1px solid black;*/ color:white; text-align: center; font-size:250%; text-shadow: 4px 1px #275387; height:80px; padding-top:5px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;	line-height: 28px;
}
@media all and (min-width: 100px) { .col-1-3 { width: 33.333%;
}
.tool-bar{ position: fixed; width: 240px; height: 48px; background: #4184E5; z-index: 50; align:center; color: white; font-size: 1.7em; border-radius: 10px;
}
.tool-bar .tools{ align:center; position: fixed; left: 70px;
}
.tool-bar .tools ul{ list-style-type: none;
}
.tool-bar .tools ul li{ display: inline;
} .filters{ position:fixed; background: #4184E5; width: 240px; height: 220px; z-index: 60; top: 280px; left: -100%; transition: left 0.3s; border-radius:15px;
} /* HEART LEFT POP UP MENU*/ .filterssec{ position:fixed; background: #4184E5; width: 240px; height: 220px; z-index: 60; top: 280px; left: -100%; transition: left 0.3s; border-radius:15px;
} a:link { text-decoration: none;
} a:active { color: white;
} /* INSTEAD OF BORING DOTS...*/ li { list-style-image: url('https://www.nzforensics.co.nz/site/images/299126.png')
} /* DESCRIPTION FOR FEED*/ .feed{ margin-top: 80px; color: black;
}
.feed-item { display: block; width:80%; height: 100px; margin-left:180px;
}
.feed-item .icon-holder{ width: 20%; float: left;
}
.feed-item .icon-holder .icon{ width: 50px; height: 50px; background-image: url('https://www.visitsealife.com/SiteImages/Assets/4/1/moon_jellyfish.png'); background-size:50px; float: right;
}
.feed-item .text-holder{ padding-left: 15px; width: 60%; height: 100%; float: left; border-bottom: 1px solid grey; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.feed-item .spacer{ width: 20%; float: left;
}
.feed-item .text-holder .feed-description{ height: 2.4em; overflow: hidden; text-overflow: ellipsis; font-color:white; background-color:#7979A3;
}
.blog{ overflow: hidden; transition: height 0.3s; color: white;
}
.portfolio{ overflow: hidden; transition: height 0.3s; color: white;
} .feed-title { background-color:#7979A3; }

Transition Menu and Video Background - Script Codes JS Codes

$(function(){ //make a template var compiled =_.template('<div class="feed-item <% if (obj.type){%> <%= type %> <%}%> "><div class="icon-holder"> <div class="icon"></div></div><div class="text-holder"><div class="feed-title"><%= title %></div><div class="feed-description"><%= description %></div><div class="spacer"></div></div>'); var blogFilterOn = true; var portfolioFilterOn = true; ////LEFT MENU TRANSITION/////// var filtersOpen = false; var searchOpen=false; $('#settings').click(function(){ console.log(filtersOpen); if(filtersOpen){ //move off screen $('.filters').css('left','-100%'); filtersOpen = false;//set the boolean to false }else{ //perfect place to move the settings box $('.filters').css('left', '0px'); filtersOpen = true; //set the boolean to true } }); ////////CLICK ON HEART!!!////// $('#search').click(function(){ console.log(searchOpen); if(searchOpen){ //move off screen $('.filterssec').css('left','-100%'); searchOpen = false;//set the boolean to false }else{ //perfect place to move the settings box $('.filterssec').css('left', '0px'); searchOpen = true; //set the boolean to true } }); ////////CLICK ON BLOG TO SHOW////
$('#blog-filter').click(function(){ if(blogFilterOn){	$('#blog-filter').css('color', 'red')	$('.blog').css('height', '0px'); blogFilterOn = false; }else{ console.log("blog filter is off"); $('#blog-filter').css('color', 'white'); $('.blog').css('height', '100px'); blogFilterOn = true; } }) //CLICK ON PORTFOLIO TO SHOW///// $('#portfolio-filter').click(function(){ if(portfolioFilterOn){ $('#portfolio-filter').css('color', 'red');	$('.portfolio').css('height', '0px'); portfolioFilterOn = false; }else{ $('#portfolio-filter').css('color', 'white'); $('.portfolio').css('height', '100px'); portfolioFilterOn = true; } })
////////////////////FIREBASE inside we put url of our datebase name based in firebase //////FIREBASE!!!//////////////// var ref = new Firebase("https://firstaccount.firebaseio.com/activities"); ref.on("value", function(snapshot){ console.log("DATA FROM FIREBASE!!!") console.log(snapshot.val() ); var data = snapshot.val(); console.log(data[0]); for (var i=0; i<data.length; i++){ data[i].firebase = true; var text = compiled(data[i]); $('.feed').append(text); } })
})
Transition Menu and Video Background - Script Codes
Transition Menu and Video Background - Script Codes
Home Page Home
Developer Angelina
Username Angelina_Lapteva
Uploaded November 24, 2022
Rating 3
Size 4,971 Kb
Views 16,192
Do you need developer help for Transition Menu and Video Background?

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!

Angelina (Angelina_Lapteva) Script Codes
Name
A Pen by Angelina
Scalable objects
Instructions page
Icons and Grid
3d looking button
Beautiful PersonaL Page
Gradient Button
SVG Animation diagramm
Menu Transitions
Smooth scroll
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!