Is there a way you can code javascript to be able to detect the height of your browser and then move a div accordingly to the bottom of that browsers height?
Im wanting to get a footer to stay at the bottom of the page constantly as when I do this with CSS there tends to be a large space of nothing when heading to phone and tablet sizes.
Thanks in advance.
Edit:
Here is a fiddle. If you make the browser smaller you will see space beneath the footer http://jsfiddle.net/4RvWY/14/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<!--===================================================css links===================================================!-->
<link href='http://fonts.googleapis.com/css?family=Raleway:600,500,400,200' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,900,100,300' rel='stylesheet' type='text/css'>
<link href="css/default_style.css" rel="stylesheet" type="text/css" />
<link href="css/contact_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--===================================================Header===================================================!-->
<div class="wrapper">
<div class="headerwrap">
<div class="social">
<aside class="socialfade"> <img class="move" src="images/deviant.png">
<img class="move" src="images/yt.png"/>
<img class="move" src="images/fb.png"/>
</aside>
<!--close socialfade!-->
</div>
<!--close social!-->
<div class="header">
<div class="logo">
<aside class="logofade">
<img src="images/logo.png" />
</aside>
<!--close logofade-->
</div>
<!--close logo-->
</div>
<!--close header!-->
<div class="menu">
<ul class="menutxt">
<aside class="menufade">
<li>HOME
</li>
<li>PORTFOLIO
</li>
<li>CONTACT
</li>
</aside>
</ul>
</div>
<!--close menu!-->
</div>
<!--close headerwrap!-->
<!--===================================================Contact===================================================!-->
<div class="toptxt">
<div id="test2">
<p class="infotxt">Get in touch...</p>
</div>
</div>
<div class="detailwrap">
<div class="contact">
<img class="move2" class="hover" src="images/me2.png">
<p class="text">Luke Babich</p>
</div>
<!--close contact!-->
<div class="contact">
<img class="move2" class="hover" src="images/phone.png">
<p class="text">+27 72 836 0954</p>
</div>
<!--close contact!-->
<div class="contact">
<img class="move2" class="hover" src="images/mail.png">
<p class="text">lukerbab#gmail.com</p>
</div>
<!--close contact!-->
</div>
<!--close detailwrap!-->
<!--===================================================Footer===================================================!-->
<div class="footerwrap2">
<p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved ©2015</p>
</div>
<!--close footerwrap!-->
</div>
<!--close wrapper!-->
</body>
</html>
#charset"utf-8";
/*---------------------------- Body and Default ----------------------------*/
body {
margin:0 auto;
background:#171717;
font-family:'Roboto', sans-serif;
color:#CCC;
}
a {
color:#000;
transition:300ms;
}
a:hover {
color:#000;
}
a:link {
text-decoration: none;
}
/*---------------------------- Main Wrapper ----------------------------*/
.wrapper {
position:relative;
width:100%;
}
/*---------------------------- Header ----------------------------*/
.header {
position:relative;
min-height:180px;
height: 100%;
padding-right:225px;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
-moz-box-shadow: 0px 10px 20px 0px #333;
-webkit-box-shadow: 0px 10px 20px 0px #333;
box-shadow: 0px 10px 20px 0px #000;
z-index:200;
}
.logo {
position: absolute;
min-width:60px;
top:4%;
}
.logo img {
display: block;
margin-left: auto;
margin-right: auto;
width:100%;
}
.social {
position: absolute;
width:100%;
min-width:20px;
top:15px;
right:1%;
z-index:500;
}
.social img {
float:right;
width:35px;
display: block;
padding:0 0 0px 15px;
}
img.move {
bottom:0px;
transition: transform 0.4s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move:hover {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.4, 1.4, 1.4);
}
/*---------------------------- Menu ----------------------------*/
.menu {
position:absolute;
width:100%;
top:200px;
z-index:401;
}
ul {
margin: 0 auto;
padding:0 0 5px 0;
list-style-type: none;
}
li {
display: inline;
list-style:none;
padding:1%;
transition: all 300ms;
}
li a {
color:#CCC;
transition:300ms;
}
li a:hover {
color:#900;
}
.menutxt {
text-align: center;
font-family:'Raleway', sans-serif;
font-size:1.8vw;
font-weight:400;
z-index:300;
}
/*---------------------------- Footer Text ----------------------------*/
.foottxt {
width:100%;
text-align: center;
background:#070707;
font-family:'Roboto', sans-serif;
padding:15px 0;
font-size:0.7em;
color:#FFFFFF;
font-weight:200;
margin: 0;
box-sizing: border-box;
}
/*---------------------------- -------------------------------------------------------- FADERS ---------------------------- ----------------------------*/
/*---------------------------- Logo Fader ----------------------------*/
.logofade {
animation: logofadein 3s;
-moz-animation: logofadein 3s;
/* Firefox */
-webkit-animation: logofadein 3s;
/* Safari and Chrome */
-o-animation: logofadein 3s;
/* Opera */
}
}
#keyframes logofadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes logofadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes logofadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes logofadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
/*---------------------------- menu Fader ----------------------------*/
.menufade {
opacity:0;
animation: menufadein forwards 3s 1s;
;
-moz-animation: menufadein forwards 3s 1s;
/* Firefox */
-webkit-animation: menufadein forwards 3s 1s;
/* Safari and Chrome */
-o-animation: menufadein forwards 3s 1s;
/* Opera */
}
}
#keyframes menufadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes menufadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes menufadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes menufadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
/*---------------------------- social Fader ----------------------------*/
.socialfade {
opacity:0;
animation: socialfadein forwards 3s 0.5s;
;
-moz-animation: socialfadein forwards 3s 0.5s;
/* Firefox */
-webkit-animation: socialfadein forwards 3s 0.5s;
/* Safari and Chrome */
-o-animation: socialfadein forwards 3s 0.5s;
/* Opera */
}
}
#keyframes socialfadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes socialfadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes socialfadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes socialfadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
#charset"utf-8";
/*---------------------------- Content ----------------------------*/
.toptxt {
margin-top:130px;
width:100%;
}
/*.contactwrap{
width:100%; change back if cant figure it out
margin-top:60px;
}*/
.detailwrap {
margin-top:100px;
width:100%;
text-align: center;
/* center align .contacts */
}
/* clearfix */
.detailwrap:after {
content:"";
display: table;
clear: both;
}
.infotxt {
text-align: center;
font-family:'Raleway', sans-serif;
font-size:2em;
font-weight:400;
}
.contact {
display: inline-block;
/* make it possible to use text-align */
width: 15%;
min-width: 180px;
/* avoid 15% being making the contacts less than 115px */
margin: 4% 1% 10% 0;
}
.contact img {
width: 90px;
display: block;
margin: 0 auto;
max-width: 100%;
/*bring back if needed*/
height: auto;
/*bring back if needed*/
}
.contact .text {
top:-15px;
text-align:center;
visibility:hidden;
}
.contact:hover .text {
animation: fadein 2s;
visibility:visible;
}
img.move2 {
bottom:0px;
transition: transform 1s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move2:hover {
-moz-transform: translate(-2px, -2px);
-ms-transform: translate(-2px, -2px);
-o-transform: translate(-2px, -2px);
-webkit-transform: translate(-2px, -2px);
transform: translate(0px, -10px)
}
/*---------------------------- Footer ----------------------------*/
.footerwrap2 {
position:absolute;
width:100%;
z-index:501;
-moz-box-shadow: 0px -10px 20px 0px #000;
-webkit-box-shadow: 0px -10px 20px 0px #000;
box-shadow: 0px -10px 10px 0px #000;
}
/*---------------------------- Textfader ----------------------------*/
#test2 p {
animation: fadein 5s;
-moz-animation: fadein 5s;
/* Firefox */
-webkit-animation: fadein 5s;
/* Safari and Chrome */
-o-animation: fadein 5s;
/* Opera */
transition: opacity 5s;
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
Here is the CSS table layout solution. Just add the below style into your stylesheet.
In table layout, by default table row/rows will auto expand to maximum height available of the entire table. And if we set all the containers to height:100%, that allows the bottom row to be always stay at the bottom of the page.
html, body {
height: 100%;
}
.wrapper {
display: table;
width: 100%;
height: 100%;
}
.headerwrap, .toptxt, .detailwrap, .footerwrap2 {
display: table-row;
}
.detailwrap {
height: 100%; /*push other rows to their minimal height*/
}
Note, must remove .footerwrap2{position:absolute;} and relevant styles.
Updated - http://jsfiddle.net/4RvWY/17/
CSS should be sufficient here. Did you try position: absolute; bottom: 0px? (Dont forget to set position: relative; on parent element
The window.innerHeight property gives the available window height. That is, the space top to bottom, minus toolbars etc.
Then use element.style.top = innerHeight value to set the div to the appropriate position. Minus an amount from the innerHeight value to give some space from the bottom of the window.
If I've got your idea right this should help:
HTML
<div class="wrapper">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.wrapper {
display: table;
height: 100%;
width: 300px;
margin: 0 auto;
}
.content {
display: table-row;
height: 100%;
background-color: yellow;
}
.footer {
height: 50px;
background-color: red;
}
.header {
height: 50px;
background-color: lightblue;
}
JSFiddle - try to resize window.
Related
When the smoke animation is finished, it stays a little on the bottom right. I don't want to see this and try to fix this.
How do I solve this problem? I showed the problems in the picture. Additionally, the smoke.mp4 link is below.
body
{
margin: 0;
padding: 0;
background:black;
}
section {
height: 100vh;
background: #000;
}
video {
object-fit: cover;
}
h1 {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
color: #ddd;
font-size: 5em;
font-family: sans-serif;
letter-spacing: 0.2em;
}
h1 span {
display: inline-block;
animation: animate 1s linear forwards;
}
#keyframes animate {
0% {
opacity: 0;
transform: rotateY(90deg);
filter: blur(10px);
}
100% {
opacity: 1;
transform: rotateY(0deg);
filter: blur(0px);
}
}
h1 span:nth-child(1) {
animation-delay: 1s;
}
h1 span:nth-child(2) {
animation-delay: 1.5s;
}
h1 span:nth-child(3) {
animation-delay: 2s;
}
h1 span:nth-child(4) {
animation-delay: 2.5s;
}
h1 span:nth-child(5) {
animation-delay: 3s;
}
h1 span:nth-child(6) {
animation-delay: 3.75s;
}
h1 span:nth-child(7) {
animation-delay: 4s;
}
h1 span:nth-child(8) {
animation-delay: 4.5s;
}
<section>
<video src="smoke.mp4" autoplay muted></video>
<h1>
<span>W</span>
<span>E</span>
<span>L</span>
<span>C</span>
<span>O</span>
<span>M</span>
<span>E</span>
</h1>
</section>
smoke video link: https://drive.google.com/file/d/1ncI67cgjRGoQZHF6I0dEpXwvFwCKxFPK/view
It looks like your video's last frame is not completely black. What you can do is listen for the ended event of the video and then hide it.
document
.querySelector('video')
.addEventListener('ended', function(e) {
e.target.style.display = 'none';
});
// ofcourse you could toggle a class that hides it
// instead of setting an inline style
body {
margin: 0;
padding: 0;
background: black;
}
section {
height: 100vh;
background: #000;
}
video {
width:100%;
height:100%;
object-fit: cover;
}
h1 {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
color: #ddd;
font-size: 8vw;
font-family: sans-serif;
letter-spacing: 0.2em;
}
h1 span {
display: inline-block;
animation: animate 1s linear forwards;
}
#keyframes animate {
0% {
opacity: 0;
transform: rotateY(90deg);
filter: blur(10px);
}
100% {
opacity: 1;
transform: rotateY(0deg);
filter: blur(0px);
}
}
h1 span:nth-child(1) {
animation-delay: 1s;
}
h1 span:nth-child(2) {
animation-delay: 1.5s;
}
h1 span:nth-child(3) {
animation-delay: 2s;
}
h1 span:nth-child(4) {
animation-delay: 2.5s;
}
h1 span:nth-child(5) {
animation-delay: 3s;
}
h1 span:nth-child(6) {
animation-delay: 3.75s;
}
h1 span:nth-child(7) {
animation-delay: 4s;
}
h1 span:nth-child(8) {
animation-delay: 4.5s;
}
<section>
<video src="https://drive.google.com/uc?export=download&id=1ncI67cgjRGoQZHF6I0dEpXwvFwCKxFPK" autoplay muted></video>
<h1>
<span>W</span>
<span>E</span>
<span>L</span>
<span>C</span>
<span>O</span>
<span>M</span>
<span>E</span>
</h1>
</section>
For my first-year uni project in web development, I created a website that is aimed at getting people to join a cooking school.
I got the grade I wanted, but I forgot about this problem I had until I saw the issue again.
I have two containers. The first container is a slideshow that shows 3 images that are on a looped animation.
The second container is a bar below that shows what image, out of the three, is being shown.
Now the issue I have is that I can't get the bar to place within the image container. In fact, I have a strange white space because of this.
Solutions I have tried:
I used padding to move it manually (It worked but when I resized or adjusted the screen, the bar would be placed in odd positions, this wouldn't be an effective method)
I tried using margin: 0;
I haven't got the slightest idea of what to do, so any help is welcome.
I don't know how to include images here but here is an example: https://cooking-school-project.hostman.site/index.html
Here is the codepen: https://codepen.io/gulam101/pen/qBaxwMq
(I couldn't include the exact images from my project, so I included images of cats)
Here is the code:
HTML
<div class="mySlides fade">
<img src="/pictures/img10.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="/pictures/img02.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="/pictures/img03.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="dot-container">
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</div>
</div>
CSS For images/Slides
/* DO NOT ALTER (CODE UNDERNEATH) */
.mySlides {
display: none;
}
img {
vertical-align: middle;
height: 50%;
background-size: cover;
object-fit: cover;
object-position: 50% 50%;
}
/* DO NOT ALTER (CODE ABOVE) */
CSS (The core part of the slideshow)
/* Slideshow Animation */
/* Slideshow container */
.slideshow-container {
position: relative;
margin: auto;
background-size: cover;
background: no-repeat center center fixed;
border-bottom: none;
border-left: none;
border-right: none;
}
/* Disables Slideshow Animation for smaller/less powerful devices */
#media only screen and (max-width: 767px) {
.mySlides,
.slideshow-container,
.prev,
.next,
.dot-container,
.fade,
.dot {
display: none;
}
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: #4CAF50;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
background-color: #333;
opacity: 0.8;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover,
.prev:focus,
.next:focus,
.prev:active,
.next:active {
-webkit-animation-name: pulse-grow-on-hover;
animation-name: pulse-grow-on-hover;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
/* Pulse Grow Animation */
#-webkit-keyframes pulse-grow-on-hover {
to {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
#keyframes pulse-grow-on-hover {
to {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
/* End of Animation */
CSS Dot-container
.dot-container {
padding-top: 15px;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #333;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
position: relative;
padding-top: 1px;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
How can I go about animating a fake box-shadow underline that have under my the link? I would like to have the underline go from left to right.
I am using a script that changes the color of the underline everything that it loads the page it alternates between three colors.
I have tried to add "animation: stretchRight;" to a.red, a.blue, a.yellow, but it does not seem to work.
I can use the use the stretchRight class to other elements so I know that works well. I believe it has something to do with the script.
Below is the code I am working on.
Can anyone of you wizards help me with this problem?
body {
background-color: #FFFFFF;
margin: 0px;
}
.container {
display: block;
width: 85%;
/*center vertically & horizontally*/
position:absolute; top:50%; left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
#wotd {
text-align: center;
margin: 0;
font-weight: bold;
cursor: pointer;
clear: none;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
animation: fadein 2s;
}
a, a:visited, a:hover {
/*display: block; this makes the whole line justified*/
-ms-text-align-last: justify;
-moz-text-align-last: justify;
text-align-last: justify;
text-decoration: none;
color: #000000;
}
a.red {
box-shadow: inset 0 -1.3vw 0 0 #DB3069;
}
a.yellow {
box-shadow: inset 0 -1.3vw 0 0 #fffd35;
}
a.blue {
box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* This is WiP */
#keyframes stretchRight {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
#-webkit-keyframes stretchRight {
0% {
-webkit-transform: scaleX(0);
}
100% {
-webkit-transform: scaleX(1);
}
}
#object {
display: block;
height: 180px;
width: 180px;
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
visibility: visible;
}
.eee {
box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
animation: stretchRight;
-webkit-animation: stretchRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
<body>
<div class="container">
<div id="wotd">blah blah blueee<a id="decor" href="https://stackoverflow.com/questions/44692808/integrating-a-script-within-css">pew pew paw</a></div>
<div id="object" class="eee"></div>
</div>
</body>
<script type="text/javascript">
var classes = ['red', 'blue', 'yellow'];
var random_class = classes[Math.floor(Math.random() * classes.length)];
var title = document.getElementById('decor');
classes.forEach((el) => {
title.classList.remove(el);
});
title.classList.add(random_class);
</script>
</html>
You need to specify the animation on the link itself and the #keyframes must specify the CSS property you want to animate.
var classes = ['red', 'blue', 'yellow'];
var random_class = classes[Math.floor(Math.random() * classes.length)];
var title = document.getElementById('decor');
classes.forEach((el) => {
title.classList.remove(el);
});
title.classList.add(random_class);
body {
background-color: #FFFFFF;
margin: 0px;
}
.container {
display: block;
width: 85%;
/*center vertically & horizontally*/
position:absolute; top:50%; left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
#wotd {
text-align: center;
margin: 0;
font-weight: bold;
cursor: pointer;
clear: none;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
animation: fadein 2s;
}
a, a:visited, a:hover {
/*display: block; this makes the whole line justified*/
-ms-text-align-last: justify;
-moz-text-align-last: justify;
text-align-last: justify;
text-decoration: none;
color: #000000;
}
a.red {
box-shadow: inset 0 -1.3vw 0 0 #DB3069;
}
a.yellow {
box-shadow: inset 0 -1.3vw 0 0 #fffd35;
}
a.blue {
box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#keyframes stretchRight {
0% {
transform: scaleX(0);
border-bottom:none;
}
100% {
transform: scaleX(1);
border-bottom:1px solid black;
}
}
#decor {
animation-duration: 3s;
animation-name: stretchRight;
}
<div class="container">
<div id="wotd">blah blah blueee<a id="decor" href="https://stackoverflow.com/questions/44692808/integrating-a-script-within-css">pew pew paw</a></div>
<div id="object" class="eee"></div>
</div>
I change the vertical position of a container by adding/removing classes, which define the verticle-align of the element. So far everything is working. I would like to animate this movement of the element. Is this possible? And if yes, would this be possible with CSS-animations?
JSFiddle:
http://jsfiddle.net/j1wxc6a1/1/
HTML
<div id="main">
<div id="wrapper" class="col-middle">
<div class="container">
<div id="content" class="top-margin">
<input type="text">
</div>
</div>
</div>
</div>
CSS
.col-top {
vertical-align: top;
}
.col-middle {
vertical-align: middle;
}
.top {
margin-top: 100px;
}
#main {
display: table;
padding-left: 0px;
padding-right: 0px;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
height: 100% !important;
}
#wrapper {
display: table-cell;
float: none;
}
JS
$('#wrapper').removeClass('col-middle').addClass('col-top');
$('#content').addClass('top');
Add this css properties to #wrapper:
transition-duration:1s;
-webkit-transition-duration:1s;
and you will get 1 second animation from all style properties change.
Add extra transition-property: vertical-align; to play animation only when vertical-align changed.
Way without setting transition is:
$('#wrapper').animation({'vertical-align': 'top'}, 1000);
it won't work as an Animation , it will just change the position to the top
Demo
.col-top {
vertical-align: top;
}
.col-middle {
vertical-align: middle;
}
.top {
margin-top: 100px;
}
#main {
display: table;
padding-left: 0px;
padding-right: 0px;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
height: 100% !important;
}
#wrapper {
height:300px;
display: table-cell;
float: none
animation: Animate 4s;
-webkit-animation: Animate 4s;
}
#keyframes example
{
from {vertical-align: middle;}
to {vertical-align: top;}
}
-webkit-#keyframes example
{
from {vertical-align: middle;}
to {vertical-align: top;}
}
You can use CSS3 Animation:
See Following Example:
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 4s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
#keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
also can use JavaScript.
I created an animated header div menu that slides down on page load. I used animation-delay to delay the animation for 1 second. When the user scrolls down the header div changes colors fine but when scrolling back up the header disappears for a split second. Please help.
$(window).scroll(function() {
if ($(this).scrollTop() > 250){
$('header').addClass("sticky");
$('a').css({
color: '#fff'
});
}
else{
$('header').removeClass("sticky");
$('a').css({
color: '#151515'
});
}
});
body{
margin:0px;
}
#content{
height:500px;
width:500px;
display:block;
background-color:pink;
margin: 0 auto;
margin-top:50px;
}
header{
position: fixed;
top: -300px;
width: 100%;
height:50px;
padding-top:25px;
text-align: center;
background: red;
z-index: 1;
font-size: .8em;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
animation:theheader 1s;
-moz-animation:top theheader 1s; /* Firefox */
-webkit-animation:theheader 1s; /* Safari and Chrome */
-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
animation-delay: 1s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
header.sticky {
height:50px;
padding-top:25px;
background-color: blue;
color: #FFF;
}
#-moz-keyframes theheader
{
from {
top: -300px;
}
to {
top:0px;
}
}
<header>
MENU
</header>
<div id="content">
</div>
<div id="content">
</div>
<div id="content">
</div>
https://jsfiddle.net/qectrqg3/35/
If you're simply animating the top value, I would recommend using transition instead of animations. Transitions will ensure you don't get a flicker when changing "animation" values in the middle of a transition.