I have an image that I animated with CSS. It goes from -200px left to 2100px right and then starts over. What I want to do is when part of the image is disappearing to the right, I want that part to show on the left side and continue the animation.
Here is an example of what I want, you can see how part of the text that goes off-screen to the right reappears left and continues the animation. I want to do the same thing with CSS or JS.
Part of my code right now (I made it small - don't view full screen):
body {
background-color: pink;
width: 400px;
height: 200px;
}
.box {
position: absolute;
bottom: 50px;
left: 0px;
width: 200px;
height: 100px;
background-color: black;
animation: animate 5s linear infinite;
}
#keyframes animate {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(310%);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="box"></div>
</body>
</html>
Related
I am want this announcement to be animated, with the text sliding in from the left, pausing in the middle and sliding out to the right and repeat.
enter image description here
<div class="announcement-bar>
<p class="announcement-animation>Free two day Shipping</p>
</div>
Here is the css animation code I figured out. But the issue is that the text is not centering properly. It takes the starting of the element(p tag), the letter F, to the center of page and not the center of element. What am I doing wrong?
.announcement-bar p {
width: max-content;
position: relative;
left: -50px;
animation: move 8s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
#keyframes move
{
37.5% {
left: calc(50% - 25px); opacity: 1; -webkit-filter: opacity(1);
}
75% { left: calc(50% - 25px); opacity: 1;}
85% { left: 80%; opacity: 0;}
100% {opacity: 0;}
}
Not centered
My example (code below) is based on a 1920px width viewport. Which means that if you’re gonna use this animation for mobile devices it won’t work properly. If you want to change the speed of the animation you need to alter the “animation: announcement ..s linear”. If you want to change the place the animation stops midway (you’ll need to change this with the media query if you want to make this kind of animation for Mobile viewports), alter the “40% {margin-left: …px;} 60%{margin-left: …px;}”.
body {
margin: 0;
padding: 0;
}
.announcement-bar {
width: 100%;
}
.announcement-animation {
margin-left: -200px;
animation: announcement 12s linear;
animation-fill-mode:none;
animation-iteration-count: infinite;
animation-delay: 2s;
white-space: nowrap;
font-family: Arial, Helvetica, sans-serif;
}
#keyframes announcement{
0% {
margin-left: 0px;
}
40% {
margin-left: 800px;
}
60%{
margin-left: 800px;
}
100% {
margin-left: 2000px;
}
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="announcement-bar">
<p class="announcement-animation">Free two day Shipping</p>
</div>
</body>
</html>
This is my simple code, which I want it to scale my whole document (html) with a delay of 1s (with javascript) and it should animate slowly the scale of the whole website.
In this fiddle, it is not really working at all - but on my file it actually animates it, but only when the user moves the mouse constantly.
html {
height: 100%;
width:100%;
transition: transform 15s linear;
transform: scale(0.6)
setTimeout(function(){
document.querySelector("html").style.transform = "scale(0.7)";
},1000)
html {
height: 100%;
width:100%;
transition: transform 15s linear;
transform: scale(0.6); background:url("https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png");
}
<html>
<body></body>
</html>
I could not make it work with your code so I modified it like this:
<script>
setTimeout(function(){
document.querySelector("#test").style.transform = "scale(0.7)";
},1000)
</script>
<style>
html {
height: 100%;
width:100%;
}
#test{
height: 100%;
width:100%;
transition: transform 15s linear;
transform: scale(0.6);
background:url("https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png");
}
</style>
<html>
<body>
<div id="test"></div>
</body>
</html>
And it seems to work as expected for me, whether I move the mouse or not. The issue is that the background on html or body tag will fill the full size of the screen even if zooming in and out or resizing.
EDIT:
If you want the background to fit the full window while the content is growing: I just added a div in your body to see easier what is happening. Is this what you want to have?
setTimeout(function(){
document.querySelector("html").style.transform = "scale(0.8)";
},1000)
html {
height: 100%;
width:100%;
transition: transform 15s linear;
transform: scale(0.6);
background:url("https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png");
}
body{
height: 100%;
width:100%;
}
div{
height: 100%;
width:100%;
background-color: #000;
}
<body>
<div></div>
</body>
I would like to create the following webpage, where the navigation bar drops down on and is slanted.
So when a user opens the website its front page looks like
]1
Then when a user presses the "menu button" (which I have not drawn), the following menu bar appears (ideally slides down as an animation)
I really need help with designing the slanted navigation bar and adding the subsequent animation.
Thanks!
You can use an SVG shape as a background, and really any shape you want to make.
CodePen Link with an animation as well
HTML:
<div class="triangle-container">
<svg height="300" width="500">
<polygon points="0,-200 500,-200 500,100" class="triangle" />
Sorry, your browser does not support inline SVG.
</svg>
</div>
CSS:
body{
}
.triangle-container{
width: 500px;
margin: auto;
text-align:center;
border: 1px solid white;
&:hover, &:active{
.triangle{
transform: translate(0px, 200px);
}
}
.triangle{
fill: black;
transition: all 0.8s ease-in-out;
#keyframes mymove {
0% {opacity:0}
50% {opacity:1}
100% {opacity:0}
}
transform-origin: 250px 250px;
}
}
One way of doing it is if you have a triangle image, with a height of 0. And all of your menu items are off the top of the screen, out of view. When you want the menu to slide down, use jquery animate to increase image height and slide all of the menu items down.
const time = 700;
$("#triangleId").animate({
height: "+=10px"
}, time);
$("#menuItemOneId, #menuItemTwoId...").animate({
top: "+=10px"
}, time);
I made a little way using clip-path and css keyframes. This way you can avoid javascript and the code is responsive no pixels needed.
HTML
<html>
<body>
<div class = 'navbar'></div>
</body>
</html>
CSS
.navbar{
width: 100vw;
height: 25vh;
background-color: red;
clip-path: polygon(100% 0, 100% 100%,0% 0%);
animation: open 3s infinite;
}
#keyframes open{
0% {clip-path:polygon(100% 0, 100% 0,100% 0);}
100% {clip-path:polygon(100% 0, 100% 100%,0% 0%);}
}
Link to code pen for this:
https://codepen.io/mfortunato/pen/jOWmXvL
I have this PNG:
http://imgur.com/DbVFiyW
And I'm trying to make an animation with this png through CSS, I want the images to crossfade so it creates the illusion of only the petals fading in. For now the images do change correctly, but I have no idea how to make the new petals fade in. At this point I'll accept any approach with Javascript/jquery, although css only would be perfect.
This is my Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Sprite Animation</title>
</head>
<style type="text/css">
#spriteContainer {
width: 700px;
height: 507px;
display: block;
background-image: url("karuna_animation.png");
animation: sprite 3s steps(12) infinite;
}
#keyframes sprite {
100% {
background-position: -8520px;
}
}
</style>
<body>
<div id="spriteContainer"></div>
</body>
</html>
Maybe you could use several divs with different opacities?
.spriteContainer {
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 507px;
display: block;
background-image: url("http://i.imgur.com/DbVFiyW.png");
animation: sprite 3s steps(12) infinite;
}
#spriteContainer1 {
opacity: 0.3;
animation-delay: 0.08s;
}
#spriteContainer2 {
opacity: 0.6;
animation-delay: 0.16s;
}
#spriteContainer3 {
opacity: 1;
animation-delay: 0.24s;
}
HTML:
<div id="spriteContainer1" class="spriteContainer"></div>
<div id="spriteContainer2" class="spriteContainer"></div>
<div id="spriteContainer3" class="spriteContainer"></div>
jsfiddle
Maybe a way to do the fadeIn is to cut your sprite as many pictures you have with petals and then use a function in jQuery to fade them ?
So you will have a structure like this :
<div id="spriteContainer">
<img src="yourFirstPetal" alt="1st-petal" />
<img src="yourSecondPetal" alt="2nd-petal" />
<!-- and so on -->
</div>
And in CSS, you position your images in absolute position, one above the precedent one and play with fadeIn() and fadeOut() to show them with jQuery (or CSS but I don't know the method) ?
See an example of what I'm meaning here
i am trying to make "memory game" using html5, CSS3 and JS. I have completed the view and model part of this game and now trying to make the Controller. What i want is call a function i.e. flip in JS and want that function to perform transition instead of using hover effect of CSS3. Basically i am trying to follow this approach. I checked that flipping in css3 using hover as can be seen in sass code below, but for the game, the user decides where to click. For simplicity, i have concised the code in html5 since it repeats for all other divs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>I Don't Know</title>
<link rel="stylesheet" href="trapStyle.css">
</head>
<body>
<div class = "container" >
<div class="sub1" >
<div class="front" id="card1" onclick="flip(card1)">card1</div>
<div class="back" id="card1_1">what the hell?</div>
</div> <--sub1 Ends-->
<div class="sub1">
<div class="front" id="card2" onclick="flip(this)">card2</div>
<div class="back" id="card2_2">what the hell?
</div> <--sub1 Ends-->
</div> <-- container Ends -->
<script src ="script.js"></script>
</body>
</html>
and the SASS code for css
.container {
position: absolute;
left: 115px;
width: 1150px;
height: 700px;
background-color: silver;
/* SUB-CONTAINER to stack two cards */
.sub1 {
width: 200px; height: 200px;
float:left; margin: 5px;
.front {
position:absolute; width: 200px; height: 200px;
background-color: #498010;
transform: perspective( 600px) rotateY(0deg);
backface-visibility: hidden;
transition: transform 0.5s linear 0s;
}
.back {
position: absolute; width: 200px; height: 200px;
float:left; background-color: #689;
transform: perspective( 600px) rotateY(180deg);
backface-visibility: hidden;
transition: transform 0.5s linear 0s;
}
}
.sub1:hover > .front {
/* transform: perspective(600px) rotateY(-180deg); */
}
.sub1:hover > .back {
/* transform: perspective(600px) rotateY(0deg); */
}
}
and JavaScript
function flip(front) {
document.getElementById("front").style.transition = opacity 0.5s linear 0s;
document.getElementById("front").style.opacity = 0;
}
Note: the link, above, is trying to pass id to JS function where the transition takes place. Exactly same is being done here, just to get input from user instead of just hovering, but nothing happens! I copy/pasted the link code in my editor and smooth transitions are performed but when it comes of my code, nothing! Could you tell me where is my flaw?
Change your CSS from the hover state to a class, for iunstance change .sub1:hover to .hovered:
.container .hovered > .front {
transform: perspective(600px) rotateY(-180deg); }
.container .hovered > .back {
transform: perspective(600px) rotateY(0deg); }
And now, on click, add this class to the element clicked:
$(".sub1").click(function() {
$(this).addClass ('hovered');
})
fiddle
this function in javascript would be
function change(element) {
element.className = element.className + " hovered";
}
provided that you send the element in the function call
onclick="change(this)"
fiddle - function set only in the first div