I have a 3 column template made with Bootstrap that I am trying to get to animate properly. I'm sure I'm missing something simple but can't figure it out and could use some feedback. I am just trying to get the left off-canvas menu to animate by sliding in. I have tried messing with each div and animating that as well but it still won't animate. I tried searching online but can't find anything that could possibly help me. I appreciate any suggestions.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/pwrpg.css">
<title>Hello, world!</title>
</head>
<body>
<header class="header-container bg-success">headeropenClose</header>
<div class="wrapper">
<section class="content">
<div class="columns">
<main class="main" id="main">Content: Flexible width
<div class="box"></div>
</main>
<aside class="sidebar-first" id="sidebar-first">Sidebar first: Fixed widthClose</aside>
<aside class="sidebar-second">Sidebar second: Fixed width</aside>
</div>
</section>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="js/pwrpg.js"></script>
</body>
</html>
CSS
/* Layout Containers */
.header-container{position: relative;height:50px;}
body{
margin: 0;
}
.wrapper{
min-height: 100vh;
background: #ccc;
display: flex;
flex-direction: column;
}
.content {
display: flex;
flex: 1;
background: #999;
color: #000;
transition: all 0.3s ease-in-out;
}
.columns{
display: flex;
flex:1;
}
.main{
flex: 1;
order: 2;
background: #eee;
transition: margin-left .5s;
padding: 20px;
}
.sidebar-first{
width: 260px;
background: #ccc;
order: 1;
transition: all .25s ease-out;
}
.sidebar-second{
width: 260px;
order: 3;
background: #ddd;
}
.sidebar-first .closebtn {
font-size: 36px;
}
#media (max-width: 991.99px) {
.sidebar-first, .sidebar-second {display:none;transition: all .25s ease-out;}
.main {
position: relative;
transition: all .25s ease-out;
}
}
.box {
width: 150px;
height: 150px;
background: red;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: green;
cursor: pointer;
}
JS
/* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("sidebar-first").style.width = "260px";
document.getElementById("sidebar-first").style.display = "block";
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("sidebar-first").style.width = "260px";
document.getElementById("sidebar-first").style.display = "none";
}
Don't use "display: none;" when transitioning an element in or out. All you're doing is showing / hiding something rather than having a smooth transition between styles.
If you want to animate things, do so buy adding a CSS class onto the elements you want to transition rather than changing the styles of those elements in JS.
For example, to slide something in from the left:
#my-sidebar {
opacity: 0;
pointer-events: none;
transform: translateX(-100%);
transition: all 0.4s ease;
}
#my-sidebar.transition-in {
opacity: 1;
pointer-events: all;
transform: translateX(0);
}
Related
I've been asked to create a web page which has a fixed header (just a standard header bar, about 80px high, which stays in place when the page scrolls). At the top of the page is a hero image, and when it's visible, the header should have a gradient background, (black at the top, transparent at the bottom).
Once the user has scrolled on down past the hero image, the header background should change to black.
I've seen it done, so I know it's possible, but I'm just not sure how it works and I haven't been able to figure it out. Can anyone point me in the right direction?
The HTML is:
<div id="body">
<div id="header">
... header contents (basically a logo and some navigation) ...
</div>
<div id="pageContent">
<div id="heroImage">
<img src="/path/to/image" />
</div>
<div id="about">
... About ...
</div>
... more sections
</div>
and currently the header CSS is:
#header {
background: linear-gradient(to bottom, rgba(0,0,0,255) 0%, rgba(0,0,0,255) 17%, rgba(0,0,0,0) 78%, rgba(0,0,0,0) 100%);
position: fixed;
width: '100%';
z-index: 1000;
}
You would have to do this kind of stuff in JavaScript, since you can't really do this with css only.
In this snippet you can see how you can change the styling of the Header after scroling. You would need to check the Position of your Hero and if the Window is scrolled past this point, you can change the styling with css-classes.
Here is a similar question, for more information.
var navbar = document.getElementById("navbar");
var nav = document.getElementById("nav");
var placeholder = document.getElementById("navbar_placeholder");
var sticky = navbar.offsetTop;
window.onscroll = function() {myFunction()};
function myFunction() {
if (window.pageYOffset > sticky) {
navbar.classList.add("sticky");
// placeholder.classList.add("display");
nav.classList.add("shrink");
} else {
navbar.classList.remove("sticky");
// placeholder.classList.remove("display");
nav.classList.remove("shrink");
}
}
const options = {threshold: 0.5};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry)
if (entry.isIntersecting) {
entry.target.classList.add('show');
} else {
entry.target.classList.remove('show');
}
});
}, options);
const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((el) => observer.observe(el));
:root{
--background-color: #001728;
--darker-background-color: #000000;
--accent-color: #20cc5b;
--text-color: #FFFFFF;
--navbar-height: 80px;
}
html{
height: 100%;
}
body{
height: 100%;
background-color: var(--background-color);
}
nav{
height: var(--navbar-height);
background-color: red;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 4px solid var(--accent-color);
transition-property: height;
transition-duration: 0.5s;
}
.navbar {
position:absolute;
left:0;
right:0;
top:0;
}
.navbar-placeholder {
position:relative;
height:80px;
transition: height 0.5s;
}
.text1{
padding: 30px;
color: white;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 2;
}
.disappear {
opacity: 0%;
transition-duration: 0.5s;
}
.shrink {
height: 40px;
transition-property: height;
transition-duration: 0.5s;
}
.display {
display: block;
height: var(--navbar-height);
}
h1, p{
font-size: 50px;
color: white;
}
section {
display: grid;
place-items: center;
align-content: center;
min-height: 100vh;
border: 5px solid white;
}
.hidden {
opacity: 0;
transition: all 1s;
}
.show {
opacity: 1;
transition: all 1s;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WeSoDev</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="navbar_placeholder" class="navbar-placeholder">
<div id="navbar">
<nav id="nav">
<h2 id="header">header</h2>
</nav>
</div>
</div>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<script src="index.js"></script>
</body>
</html>
I am trying to have a responsive web design, but when I shrink my browser size, button is overlapping my text parts, does anyone know how to fix this? 1st picture is for normal screen size, 2nd picture is for shrunk screen size. I'd like to show like 1st picture even for shrunk screen size.
HTML code is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quote API</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="button">
<button onclick="getQuote()">Give me a quote!</button>
</div>
<div id="para">
<p id="quote"></p>
<p id="quoteauthor">test</p>
</div>
<script src="script.js"></script>
</body>
</html>
And CSS file code is
body{
background:rgb(68, 142, 226);
}
#para {
margin-top: 30%;
}
p {
text-align: center;
color:white;
}
button{
background:white;
border: 4px solid white;
border-radius:1em;
font-size:24px;
padding:1em 3em;
/*CSS center element trick*/
position: absolute;
top: 50%;
left: 50%;
-webkit-transform:
translate(-50%, -50%);
transform:
translate(-50%, -50%);
-webkit-transition-property:
all;
-webkit-transition-duration:
1s;
-webkit-transition-timing-function:
ease-out;
transition-property:
all;
transition-duration:
1s;
transition-timing-function:
ease-out;
}
button:hover{
background:green;
color:white;
font-size:34px;
/*the previous padding:1em 3em; is what enlarges the element on hover ***note that the unit em translates to the size of your font. example: font=24px then 1em = 24px*/
}
You are positioning your button absolutely, which takes it out of the elements flow. You just need to use some layout technique: for example, flex or grid. See the example below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quote API</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background: rgb(68, 142, 226);
}
.vbox {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
color: white;
padding-block: 15%;
}
button {
background:white;
border: 4px solid white;
border-radius:1em;
font-size:24px;
padding:1em 3em;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-out;
}
button:hover {
background: green;
color: white;
font-size: 34px;
}
</style>
</head>
<body>
<div class="vbox">
<button onclick="getQuote()">Give me a quote!</button>
<span id="quote">Your favorite quote from your favorite author.</span>
<span id="quoteauthor">Your favorite author</span>
</div>
<script src="script.js"></script>
</body>
</html>
Our Angular (v7) app has a splash animation that basically shows a rotating wheel (CSS animation) embedded into the index.html, so it shows instantly on page load.
This works fine, however every ~4 page loads there is a slight flicker of the zoom level (I am using the latest Chrome on Windows 10), meaning the square div which holds the "splash message" starts at one size, and then drops in about 5% of it's size. It happens very fast and about a second from the moment the static HTML contents are rendered to view, and before the Angular view is rendered. And it looks like some of the rendering engine is getting loaded lazily and something goes wrong (?)
Could it be that Angular is changing zoom/translation factor on page load?
Index.html
<!doctype html>
<html lang="en" class="mitzi-page-root">
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mitzi-splash-view-indicator {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
-webkit-animation: fadein 2s;
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.mitzi-splash-indicator-dialog-bg {
position: absolute;
width: 15rem;
height: 12rem;
align-self: center;
border-style: solid;
border-width: .1rem;
border-radius: 1rem;
background: #FFFFFF;
border-color: #378b68;
-webkit-animation: fadein 5s;
animation: fadein 5s;
}
.mitzi-splash-indicator-loader-wrapper {
position: absolute;
left: 4.6875rem;
top: 2.2495rem;
width: 5.625rem;
height: 5.625rem;
padding-bottom: 3rem;
}
.mitzi-splash-indicator-loader {
width: 5.625rem;
height: 5.625rem;
align-self: center;
animation: mitzi-splash-indicator-spin 1s steps(8) infinite;
}
.mitzi-splash-indicator-message {
position: absolute;
top: 9.125rem;
width: 100%;
text-align: center;
height: 1rem;
line-height: 1rem;
font-family: 'Open Sans', serif;
font-size: 1rem;
font-weight: normal;
color: #2A6E52;
}
#keyframes mitzi-splash-indicator-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.mitzi-splash-indicator-spinner {
fill: #0c573c;
}
</style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">
<link rel="shortcut icon" sizes="32x32" href="assets/img/favicon-mitzi.png" type="image/png" />
</head>
<body class="mitzi-body">
<mitzi-root>
</mitzi-root>
<div id="mitzi_app_preloader" class="mitzi-splash-view-indicator">
<div class="mitzi-splash-indicator-dialog-bg">
<div class="mitzi-splash-indicator-loader-wrapper">
<div class="mitzi-splash-indicator-loader">
<svg class="mitzi-splash-indicator-spinner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;">
<!-- HERE COMES SOME **STATIC** SVG GRAPHICS THAT IS BEING ROTATED BY **CSS** (AND NOT BY SVG ANIMATIONS - WHICH *WOULD* MESS THINGS UP)... -->
</svg>
</div>
</div>
<span class="mitzi-splash-indicator-message">Loading ...</span>
</div>
</div>
<div style="display: none !important" id="hidden-div-for-assets-load-on-startup">
<img src="assets/img/common/error.svg">
<img src="assets/img/status_icons/form_error.png">
<span class="pi pi-times"></span>
</div>
<title>mitzi</title>
</body>
</html>
box-sizing was set by our own code .... which triggered a minor change in the size of the div
I saw an example for Twitter Favorite animation and I used in my design for testing and now i have problem with alignment for the icons and I don't know how to fix it? Can anyone explain things to me, please?
Below you will the actual code use and I need all the icon with the text to be in one column some thing similar to twitter icon but very basic one.
/* when a user clicks, toggle the 'is-animating' class */
$(".heart").on('click touchstart', function(){
$(this).toggleClass('is_animating');
});
/*when the animation is over, remove the class*/
$(".heart").on('animationend', function(){
$(this).toggleClass('is_animating');
});
.postfooter {
display: flex;
justify-content: flex-start;
color: #b3b3b3;
margin-top: 30px;
font-size: 25px;
}
.postfooter .fa {
margin-left: 40px;
}
.heart {
cursor: pointer;
height: 70px;
width: 70px;
background-image:url( 'https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png');
background-position: left;
background-repeat:no-repeat;
background-size:2900%;
}
.heart:hover {
background-position:right;
}
.is_animating {
animation: heart-burst .8s steps(28) 1;
}
#keyframes heart-burst {
from {background-position:left;}
to { background-position:right;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- Font-Awesome CDN -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<div class="postfooter">
<div><i class="fa fa-reply" aria-hidden="true"> 2</i></div>
<div><i class="fa fa-retweet" aria-hidden="true"> 30</i></div>
<div><div class="heart"></div> 16</div>
</div>
</body>
</html>
The reason why your elements aren't aligning is because the div element containing your heart animation is a block-level element (versus the i elements with the font-awesome icons, which are inline).
To fix that part, you just have to add display: inline-block to the heart element. The height of your heart element is also 70px, so to align the other elements, you'll also need to add height: 70px and line-height: 70px; to your post-footer. Finally, to adjust for the fact that the heart element is much wider than the other elements, you can wrap the heart counts in a span and give it a negative margin.
/* when a user clicks, toggle the 'is-animating' class */
$(".heart").on('click touchstart', function(){
$(this).toggleClass('is_animating');
});
/*when the animation is over, remove the class*/
$(".heart").on('animationend', function(){
$(this).toggleClass('is_animating');
});
.postfooter {
display: flex;
justify-content: flex-start;
color: #b3b3b3;
margin-top: 30px;
font-size: 25px;
height: 70px;
line-height: 70px;
}
.postfooter .fa {
margin-left: 40px;
}
.heart {
display: inline-block;
cursor: pointer;
height: 70px;
width: 70px;
background-image:url( 'https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png');
background-position: left;
background-repeat:no-repeat;
background-size:2900%;
}
.heart-text {
margin-left: -20px;
}
.heart:hover {
background-position:right;
}
.is_animating {
animation: heart-burst .8s steps(28) 1;
}
#keyframes heart-burst {
from {background-position:left;}
to { background-position:right;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- Font-Awesome CDN -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<div class="postfooter">
<div><i class="fa fa-reply" aria-hidden="true"> 2</i></div>
<div><i class="fa fa-retweet" aria-hidden="true"> 30</i></div>
<div class="heart"></div><span class="heart-text">16</span>
</div>
</body>
</html>
Okay, so im learning html and css, so im relativly new to this. I have followed many youtube videos to create different layouts. However, I am having real trouble in with this particular tutorial that i followed (https://www.youtube.com/watch?v=Wwe2zOz030o).
In this tutorial it shows how to make a really cool nav bar using the css transition effect, however, when the window is resized and i hover to expand a div it moves all of the other divs down the page. i want the divs to remain in the container at all times whatever the size of the window. i'm hoping this is really simple...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#import url("styles.css");
</style>
</head>
<body>
<div id="container">
<a href="#"><div class="menu">
<p class="p1">HOME</p>
<p class="p2">THIS IS OUR INTRO </p>
</div>
</a>
<div class="menu1">
<p class="p1">GALLERY</p>
<p class="p2">THIS IS MY PHOTOGRAPHY GALLERY</p>
</div>
<div class="menu2">
<p class="p1">ART PROJECTS</p>
<p class="p2">MY ART COLLECTION</p>
</div>
<div class="menu3">
<p class="p1">CONTACT</p>
<p class="p2">CONTACT ME</p>
</div>
</div>
</body>
</html>
the CSS styles are...
a{text-decoration:none;
}
#container{
height: 125px;
width: auto;
background-color:rgba(0,0,0,1);
position: relative;
}
.menu{
height: 125px;
width: 150px;
background-color: rgba(139,62,181,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.menu1{
height: 125px;
width: 150px;
background-color: rgba(255,153,0,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.menu2{
height: 125px;
width: 150px;
background-color: rgba(53,108,255,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.menu3{
height: 125px;
width: 150px;
background-color: rgba(154,44,21,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.p1{
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
color: rgba(255,255,255,.7);
font-weight: bold;
position: relative;
width: 100px;
top: 0px;
left: 15px;
transition:all .2s ease-in-out 0s;
}
.p2{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color: rgba(255,255,255,.5);
position:relative;
top:0px;
left: 11px;
transition:all .2s ease-in-out 0s;
}
.menu:hover{
width:900px;
}
.menu1:hover{
width:900px;
}
.menu2:hover{
width:900px;
}
.menu3:hover{
width:900px;
}
.menu:hover .p1{
color:rgba(255,255,255,1);
}
.menu:hover .p2{
color:rgba(255,255,255,1);
}
.menu1:hover .p1{
color:rgba(255,255,255,1);
}
.menu1:hover .p2{
color:rgba(255,255,255,1);
}
.menu2:hover .p1{
color:rgba(255,255,255,1);
}
.menu2:hover .p2{
color:rgba(255,255,255,1);
}
.menu3:hover .p1{
color:rgba(255,255,255,1);
}
.menu3:hover .p2{
color:rgba(255,255,255,1);
}
It is a good case to use "flexbox".
Please take a look at your code with implemented flexbox:
http://codepen.io/Nargus/pen/uymsI
I added only display: flex; and overflow:hidden; to #container.
Also added min-width for each menu item (the same as width) so that flexbox knows its limits.
Width in .menu*:hover may be as big as you wish, all extras will be cut by flexbox itself.
Flexbox is ok on all modern browsers: http://caniuse.com/#feat=flexbox