I need a "special" animation and i am not finding how i will get this sort of animation i seek for, on each triangle should make the same animation, one to the left and one to the right, i need the right way to start making this. Do i use JQuery for this ?
The animation: I want the triangles to move more or less to the middle of screen in order to show the content that is hidden, as it happens here: beepi.com/default.aspx on the circles
I currently have this:
#anim {
z-index: 1;
position: relative;
height: 100%;
min-height: 100%;
background-image: url("http://i.imgur.com/EPM2arR.jpg");
background-image: no-repeat;
background-size: 100%;
}
#anim img {
z-index: 2;
position: relative;
height: 100%;
width: 100%;
}
.arrow-left {
text-align: left;
padding: 1.5% 12px;
text-transform: uppercase;
position: absolute;
width: 13%;
left: 0;
z-index: 3;
top: 40%;
}
.arrow-right {
text-align: right;
padding: 1.5% 15px;
text-transform: uppercase;
position: absolute;
width: 13%;
right: 0;
z-index: 3;
top: 40%;
}
.arrow-right h2 {
font-size: 28px;
color: #FFF;
}
.arrow-left h2 {
font-size: 28px;
color: #FFF;
}
<section id="anim">
<img src="http://i.imgur.com/AeCYNqc.png">
<div class="arrow-right">
<h2>Scouting For Companies</h2>
</div>
<div class="arrow-left">
<h2>Seeking For Ideas</h2>
</div>
</section>
The animation should be like this:
If I understood well, you need css animation. You can use something like this:
/* For right side */
.arrow-right{
animation: aniright 3s ease;
animation-fill-mode: forwards;
}
#keyframes aniright {
from { right: 0; }
to { right: 13%; }
}
/* For left side */
.arrow-left{
animation: anileft 3s ease;
animation-fill-mode: forwards;
}
#keyframes anileft {
from { left: 0; }
to { left: 13% }
}
I believe you will need to cut and put arrows from image in .arrow-left and .arrow-right classes together will all other elements you want to slide in.. and also put some action to call animation. For e.g:
.arrow-left:hover{
animation: anileft 3s ease;
animation-fill-mode: forwards;
}
... will start animation when your cursor goes over .arrow-left element.
Related
I am trying to make an animation in javascript, where as the character is running, the grond should move as well. The problem that I have is that the ground image has an animation, but the image gets cut, and reapear.
I have this piece of code in css
.ground {
position: absolute;
bottom:0;
width: 100%;
height: 100px;
animation: ground-animation 20s infinite linear;
}
#keyframes ground-animation {
from {
right: -80px;
}
to {
right: 100%;
}
}
Just double the width of ground and repeat background image. No?
https://codepen.io/ildar-meyker/pen/eYrdZyw
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.ground {
position: absolute;
left: 0;
bottom: 0;
width: 200%;
height: 100vh;
animation: ground-animation 20s infinite linear;
background: url(https://i.pinimg.com/originals/8f/1a/b8/8f1ab8b14a55720d6859620a6f596933.jpg) repeat-x 0 100%;
background-size: 50% auto;
}
#keyframes ground-animation {
from {
}
to {
transform: translateX(-50%);
}
I position a container absolute to the page. In this container there is a span that I need to position absolute to the page as well, because I want to hide it if it overflows the parent container after it's moved.
It should look like this.
I can only hide the span, if it is a child and the parent has its overflow hidden. But then I can't position both absolute.
My current code looks like this:
.container {
overflow: hidden;
position: absolute;
width: 150px;
height: 50px;
background-color: black;
animation: move 2s ease-in-out alternate infinite;
}
.container span {
position: absolute;
left: 20px;
top: 20px;
color: white;
font-size: 16px;
}
#keyframes move {
0% {
top: 0;
}
100% {
top: 200px;
}
}
<div class="container">
<span>Text</span>
</div>
.container {
overflow: hidden;
position: absolute;
width: 150px;
height: 50px;
background-color: black;
animation: move 2s ease-in-out alternate infinite;
}
.container span {
position: absolute;
left: 20px;
top: 20px;
color: white;
font-size: 16px;
animation: move2 2s ease-in-out alternate infinite;
}
#keyframes move {
0% {
top: 0;
}
100% {
top: 200px;
}
}
#keyframes move2 {
0% {
top: 0;
}
100% {
top: -200px;
}
}
<div class="container">
<span>Text</span>
</div>
Use position:fixed with the child and consider clip-path instead of overflow to hide the overflow:
.container {
clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
position: absolute;
width: 150px;
height: 50px;
background-color: black;
animation: move 2s ease-in-out alternate infinite;
}
.container span {
position: fixed;
left: 20px;
top: 20px;
color: white;
font-size: 16px;
}
#keyframes move {
0% {
top: 0;
}
100% {
top: 200px;
}
}
body {
background:blue;
}
<div class="container">
<span>Text</span>
</div>
I'm trying to animate .circle element. It should grow and then shrink after second. So I declared 2 css animations for one element. In Firefox it works great, but in Chrome it doesn't.
Can-i-use shows that animations css rule in Chrome should work too.
Codepen example
Full source code:
*,
*::before,
*::after {
box-sizing: border-box;
}
#keyframes one {
100% {
width: 5000px;
height: 5000px;
}
}
#keyframes two {
100% {
width: 0px;
height: 0px;
}
}
.container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: lightsalmon;
}
.circle {
position: absolute;
height: 0px;
width: 0px;
border-radius: 50%;
background-color: lightgreen;
/** If declare only one animation, then it will work in Chrome */
animation: one ease 1s alternate 1 paused, two ease 1s alternate 1 paused;
animation-fill-mode: forwards;
}
<div class="container">
<div class="circle"></div>
</div>
<script>
var circle = document.querySelector(".circle");
circle.style.animationPlayState = "running, paused";
setTimeout(() => {
circle.style.animationPlayState = "paused, running";
}, 1000);
</script>
So as one of the comments says, you can do this with a single animation. You should always try to use semantic, meaningful names when coding so I named the animation grow-shrink rather than just one.
*,
::before,
::after {
box-sizing: border-box;
}
#keyframes grow-shrink {
50% {
width: 5000px;
height: 5000px;
}
}
.container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: lightsalmon;
}
.circle {
position: absolute;
height: 0;
width: 0;
border-radius: 50%;
background-color: lightgreen;
animation: grow-shrink 2s;
}
You don't need any of the JavaScript to do this and you don't need the z-index property on .circle. I changed your animation-duration to be 2s rather than 1s since it is doing the work of both 1s animations you had initially. The animation-timing-function initial value is already ease, so I removed that because it is redundant. You also didn't need the alternate value.
If you meant the 1 after alternate in your animation value as the the value for animation-iteration-count then that can be safely removed as that property's initial value is already 1. If you meant it as a 1s delay for the grow animation to start and then another 1s delay for the shrink to start and simply forgot the units then you will have to let me know and I will show you how to modify it to do that. You can easily add the 1s delay for the animation start back in there, but delaying the shrinking would have to be done differently if you use this solution.
Here you can see the Codepen of it working.
🚧 EDIT: Solution #2 🚧
Alternately, if you want to see how to get this done using your method (though I wouldn't recommend it for this particular animation), here is the CSS code after I got your example to work in Chrome (and all other major browsers):
*,
*::before,
*::after {
box-sizing: border-box;
}
#keyframes grow {
0% {
height: 0;
width: 0;
}
100% {
height: 5000px;
width: 5000px;
}
}
#keyframes shrink {
0% {
height: 5000px;
width: 5000px;
}
100% {
height: 0;
width: 0;
}
}
.container {
align-items: center;
background-color: lightsalmon;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
.circle {
animation:
grow 1s ease-in forwards paused,
shrink 1s ease-out 1s forwards paused;
background-color: lightgreen;
border-radius: 50%;
height: 0;
position: absolute;
width: 0;
}
Go here to see the CodePen of solution #2 working.
I am have made a heading (the word Welcome) that reveals itself once the page has loaded (onload="").
Fiddle in case the code below doesn't work.
function animate() {
document.getElementById("mainText").style.width = "100%";
}
#mainText {
margin: 0px;
display: inline-block;
font-size: 100px;
width: 0%;
transition: width 2s;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
<body onload="animate()">
<h1 id="mainText">Welcome</h1>
</body>
The CSS and Plain JS work fine but I want the word "Welcome" to be revealed right side first and then moving along, so from the e to the W, instead of how it currently is, which opens left to right.
I have tried text align: right;, but this doesn't change anything.
I preferably don't want to use any jQuery, if the solution is a JS one.
An example of what the desired look should be, half way though the transition:
You can use the clip-path property to clip parts of the element so they are not visible. This property can also be animated to reveal the element again, using the forwards keyword in the animation so it stays in it's 'revealed' end state.
The inset takes values that are in order: from-top, from-right, from-bottom, from-left.
#text {
margin: 0;
font-size: 100px;
animation: reveal 2s forwards;
}
#keyframes reveal {
from {
clip-path: inset(0 0 0 100%);
}
to {
clip-path: inset(0 0 0 0);
}
}
<h1 id="text">Welcome</h1>
Yes, it is possible using Transitions and Positions:
window.onload = function () {
document.querySelector("h1").classList.add("active");
};
h1 {
overflow: hidden;
display: inline-block;
position: relative;
}
h1 .mask {
position: absolute;
transition: all 0.5s linear;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: #fff;
}
h1.active .mask {
right: 100%;
}
<h1><span class="mask"></span>Welcome</h1>
I just wrote an article about this - CSS Transitions & JavaScript for Animated Entry Effects. Hope it is useful... :)
One option is transform: translate with a pseudo element, and no extra element needed.
function animate() {
document.getElementById("mainText").classList.add('show');
}
#mainText {
position: relative;
margin: 0px;
display: inline-block;
font-size: 100px;
white-space: nowrap;
text-overflow: clip;
overflow: hidden;
}
#mainText::after {
content: '';
position: absolute;
left: 0; top: 0;
width: 100%; height: 100%;
background: white;
transition: transform 2s;
}
#mainText.show::after {
transform: translateX(-100%);
}
<body onload="animate()">
<h1 id="mainText">Welcome</h1>
</body>
Another option, an even better solution, using the pseudo with direction and left/width.
This one work in the same way clip-path does, completely transparent against its background, as opposite to having a mask that revels the text, and with much better browser support.
function animate() {
document.getElementById("mainText").classList.add('show');
}
body {
background: black;
}
#mainText {
position: relative;
margin: 0px;
display: inline-block;
font-size: 100px;
white-space: nowrap;
color: rgba(0, 0, 0, 0);
}
#mainText::before {
content: attr(data-text);
position: absolute;
left: 100%;
top: 0;
width: 0;
height: 100%;
color: white;
direction: rtl;
overflow: hidden;
transition: left 2s, width 2s;
}
#mainText.show::before {
left: 0;
width: 100%;
}
<body onload="animate()">
<h1 id="mainText" data-text="Welcome">Welcome</h1>
</body>
Something like this
function animate() {
document.getElementById("overlay").style.width = "0%";
}
#mainText {
margin: 0px;
display: inline-block;
font-size: 100px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
#overlay{
width: 100%;
position:absolute;
top:0;
left:0;
background:#fff;
transition: width 2s;
height:100%;
}
<body onload="animate()">
<h1 id="mainText">Welcome</h1>
<div id="overlay"></div>
</body>
This will require a pseudo-element with a background on top of your heading serving as a mask. Instead of altering the inline styles I will simply add a class is-active. So everything style related can be styled via CSS.
function animate() {
document.getElementById("mainText").className = "is-active";
}
#mainText {
margin: 0px;
display: inline-block;
position: relative;
font-size: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
#mainText:before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
background: #FFF;
transition: width 2s;
}
#mainText.is-active:before {
width: 0%;
}
<body onload="animate()">
<h1 id="mainText">Welcome</h1>
</body>
I use Transform: translateX to achieve the desired effect.
It slides the text sideways or horizontally on the X axis.
.message {
color: darkred;
font-size: 30px;
display: inline-block;
font-weight: 100;
font-family: sans-serif;
}
.sliding-text-1,
.sliding-text-2,
.sliding-text-3 {
animation-name: slide;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: forwards;
opacity: 0;
}
.sliding-text-2 {
animation-delay: 2s;
color: darkblue;
}
.sliding-text-3 {
animation-delay: 4s;
color: darkgreen;
}
#keyframes slide {
from {
transform: translateX(200px);
}
to {
transform: translateX(0px);
opacity: 1;
}
}
<h1 class="message sliding-text-1">Hello!</h1>
<h1 class="message sliding-text-2">Thanks for visiting!</h1>
<h1 class="message sliding-text-3">Have a nice day!</h1>
I am trying to create a simple full page overlay with bootstrap.
However the overlay is appearing 'behind' my main content (a blue box in the example).
I'm sure I am missing something very obvious however any help would be appreciated.
I need to overlay to disappear when the page is clicked anywhere, this is working.
I have included my current code and a jsfiddle. You can see that the overlay is behind the blue box, which seems to load first?
HTML
<div class="overlay overlay-data">
<p>click anywhere to close this overlay</p>
</div>
<div class="col-md-4">
<div class="menu-item blue">
<p>MY INFO BOX</p>
</div>
</div>
JS
$(document).ready(function () {
$(".overlay").addClass('overlay-open');
$("section").addClass('blur');
});
$(document).on('click', '.overlay', function () {
$(".overlay").removeClass('overlay-open');
$("section").removeClass('blur');
});
CSS
.blur {
-webkit-filter: blur(2px);
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
}
.overlay p {
text-align: center;
position: relative;
top: 20%;
height: 60%;
font-size: 80px;
}
.overlay-data {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
visibility: 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-open {
opacity: 0.5;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.blue {
background: #28ABE3;
}
.menu-item {
padding-top: 45px;
padding-bottom: 45px;
margin-bottom: 45px;
transition: all 0.3s;
border: 5px solid transparent;
}
Specify the z-index in your css to be greater than your main content.
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
z-index: 1;
}
JSFiddle
Read more about it at MDN, z-index.
Use z-index to add overlay effect use this css
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
z-index:99999
}