I would like to create some css animation on the home page of my site, with some notes falling.
Here is the example: http://labandallonnaise.org/joomla/(link no longer demonstrates behavior)
We can see that the notes are falling, then we have nothing before the next sequence.
Here is the code
.notes-wrapper {
overflow: hidden;
height: 630px;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin-top: -75px;
margin-bottom: -75px;
margin-left: -500px;
margin-right: -500px;
}
.notes {
background: url("gantry-theme://custom/images/background.svg") center !important;
height: 6300px;
animation: fall 10s linear infinite;
overflow: hidden;
z-index: 0;
background-repeat: repeat;
background-size: cover;
top: 0px;
}
.notes img {
animation: none;
background: transparent;
}
#keyframes fall {
0% {
transform: translateY(-1050px);
}
}
<div class="notes-wrapper">
<img style="display: block; margin-left: auto; margin-right: auto; animation: none; background: transparent;" src="images/logo/BandAllonnaisedudule.png" alt="" />
<div class="notes"> </div>
</div>
how can I have continuous animation?
It depends on exactly what effect you want with various viewport aspect ratios.
Whatever the details, you need two copies of the SVG so that you don't get a gap when one has reached the bottom and starts again.
Here's one way to get continuity which puts before and after pseudo elements on the notes div both of which animate down the full height of the viewport. One starts in the viewport, the other above it.
This is a simplistic way of doing it as it doesn't require you to know anything about the aspect ratio of the background image. It would be possible to get better control and produce different results depending on what you'd like to happen on narrow or wide devices. For example, should the notes always fit in completely horizontally, however small they then go? Should there always be only one copy of the background however wide the device and so on.
.notes-wrapper {
overflow: hidden;
position: relative;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100vw;
height: 100vh;
}
.notes {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.notes::before, .notes::after {
content: '';
background-image: url("https://ahweb.org.uk/background.svg");
position: absolute;
height: 100%;
width: 100%;
animation: fall 10s linear infinite;
overflow: hidden;
z-index: -1;
background-repeat: repeat no-repeat;
background-size: auto 100%;
background-position: center;
}
.notes::before {
top: -100%;
}
.notes::after {
top: 0;
}
#keyframes fall {
100% {
transform: translateY(100vh);
}
}
<div class="notes-wrapper">
<img style="display: block; margin-left: auto; margin-right: auto; animation: none; background: transparent;" src="images/logo/BandAllonnaisedudule.png" alt="" />
<div class="notes"></div>
</div>
Related
new to HTML and CSS. Could anyone teach me how to animate my picture from my current point to, another location? For example, moving from "top: 280px: left 600px;" to "top:180px; left 500px;"
Need someone to guide me along, thanks.
Below is my current code:
#robot {
position: fixed;
top: 280px;
left: 600px;
border-radius: 50%;
width: 50px;
height: 60px;
}
body {
height: 100%;
width: 100%;
background-image: url('TPHRG floorplan1.png');
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-size: 980px 400px, cover;
}
<img id="robot" src="https://img.favpng.com/20/7/18/clip-art-robot-free-content-image-vector-graphics-png-favpng-pJhfbKDrGy0yuQsKVTrjEu7br.jpg">
Here is a simplified example of an transition between to positions.
The key is to add the transition rule to your element (#robot), where you set the property you want to animate, the duration of the animation, easing function etc. See documentation for more examples.
Note that if you use the all keyword in the mentioned rule for shorthand convenience, it is adviced to specify which property you want to animate in the additional transition-property rule. This is for performance reasons.
In my example I'm using :hover to trigger the animation, but it might as well be when the page loads or when a certain class is added to your element by some JavaScript.
Hope it helps!
.box {
width: 500px;
height: 150px;
position: relative;
padding: 10px;
border: 5px solid green;
}
.cat {
position: absolute;
top: 50px;
left: 50px;
transition: all 1s ease-in;
transition-property: top, left;
}
.box:hover .cat {
top: 10px;
left: 300px;
}
<div class="box">
Hover me!
<img class="cat" src="https://placekitten.com/100/100" alt="A cat">
</div>
Yes, you can do it by simple using css.
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#robot {
position: fixed;
top: 280px;
left: 600px;
border-radius: 50%;
width: 50px;
height: 60px;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}
body {
height: 100%;
width: 100%;
background-image: url('TPHRG floorplan1.png');
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-size: 980px 400px, cover;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example {
from {top: 280px;left:600px;}
to {top: 180px;left:500px;}
}
/* Standard syntax */
#keyframes example {
from {top: 280px;left:600px;}
to {top: 180px;left:500px;}
}
</style>
<body>
<img id="robot" src="https://www.w3schools.com/images/compatible_chrome.gif">
<?php ?>
</body>
</html>
I'm trying to create an animated picture which contains a lot of layers.
In order to have images with right proportions on different screens I use cover css property value(I've tried it for both object-fit for images and background-size for background images). That's why my images on wide screen are croped by the browser.
The problem is that my layers are transformed(mostly rotated and moved) during the animation so there are moments when it is seen the cropped image.
Please see my example below.
How it can be prevented? Or it there some other technique?
body {
margin: 0;
padding: 0;
/*Just to imitate wide screen*/
width: 1000px;
height: 450px;
}
#container {
width: 100%;
height: 100vh;
/*Just to imitate wide screen*/
height: 100%;
overflow: hidden;
position: relative;
}
.layer {
height: 100%;
position: absolute;
width: calc(100% + 20px);
}
.layer img {
height: 100%;
width: 100%;
object-fit: cover;
}
.gulls {
animation: gulls ease-in-out 13s infinite alternate;
}
#keyframes gulls {
from {
transform: rotate(3deg) scaleX(0.95) skew(-10deg, -10deg);
}
to {
transform: rotate(-3deg) scaleX(1.05) skew(10deg, 10deg);
}
}
<div id="container">
<div class="layer">
<img src="https://firebasestorage.googleapis.com/v0/b/wedding-42174.appspot.com/o/animation%2Fsky.png?alt=media&token=25033588-d58c-4616-94e9-4974ec4157a4" alt="">
</div>
<div class="layer gulls">
<img src="https://firebasestorage.googleapis.com/v0/b/wedding-42174.appspot.com/o/animation%2Fgulls5.png?alt=media" />
</div>
</div>
Currently I have this: https://jsfiddle.net/koljada/c08qdw1m/
first of all i have to say that your birds image is a lot bigger then the birds therself (many padding around) as i see the whole image is 2048/1934...
anyway, when you use
object fit:cover he crop;
the image for save the proportion. you can using
object-fit:scale-down;
for save the proportion by scale down the image until he come inside the parent space. i add a quick exemple about how it works down here:
hope it is what you search for..
Images can be cropped with a container div with overflow: hidden; position: relative, So you can position the image inside with position: absolute. The top and left css attribute of the image has to be set a negative value.
The image exact values can be found by using sine and cosine functions.
body {
margin: 0;
padding: 0;
/*Just to imitate wide screen*/
width: 200px;
height: 100px;
}
#container {
width: 100%;
height: 100vh;
/*Just to imitate wide screen*/
height: 100%;
overflow: hidden;
position: relative;
}
.layer {
height: 100%;
position: absolute;
top: -20px;
left: -20px;
width: calc(100% + 20px);
}
.layer img {
height: 150%;
width: 150%;
}
.gulls {
animation: gulls ease-in-out 3s infinite alternate;
}
#keyframes gulls {
from {
transform: rotate(3deg) scaleX(0.95) skew(-10deg, -10deg);
}
to {
transform: rotate(-3deg) scaleX(1.05) skew(10deg, 10deg);
}
}
<div id="container">
<div class="layer gulls">
<img src="http://via.placeholder.com/350x150/000000" />
</div>
</div>
You can use overflow: hidden; position: relative to crop your images after using container div, and using position: absolute at the images to place the image.
I made this animation and it's working like a charm in every browser but IE and Edge. You can see the page here https://jsfiddle.net/03ddygdx/
.progress-container {
position: relative;
}
.background-progress-bar, .progress-bar {
width: 100%;
height: 10px;
top: 0px;
left: 0px;
position: absolute;
}
.background-progress-bar {
background-color: pink;
z-index: 8;
}
.progress-bar {
background-color: red;
z-index: 9;
}
.indeterminate {
animation: indeterminate 2.5s infinite linear;
}
#keyframes indeterminate {
0% {
width: 30%;
left: 0%;
}
25% {
width: 50%;
left: 50%;
}
50% {
width: 10%;
left: 0px;
}
75% {
width: 30%;
left: 0%;
}
100% {
width: 0%;
left: calc(100% - 5px);
}
}
<div class="progress-container">
<span class="background-progress-bar">
<span class="progress-bar indeterminate"></span>
</span>
</div>
In IE and Edge doesn't apply the left property, leaving the span always to the left. I've tried the -ms-animation property but that also doesn't work.
In case it matters I got this meta tag in my index.html
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Edit: Ok, the problem was adding a calc() to calculate the size of the left attribute, so the bug is in there.
Edit 2: I created a bug report about this specific case, so if there is there any information about it I guess you could check it out here https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12872907/
After hitting my head on the wall for a couple hours turns out it has to be a ie-edge bug. Changing the keyframes to this solved my problem.
#keyframes indeterminate {
0% {
width: 30%;
margin-left: 0%;
}
25% {
width: 50%;
margin-left: 50%;
}
50% {
width: 10%;
margin-left: 0px;
}
75% {
width: 30%;
margin-left: 0%;
}
100% {
width: 0%;
margin-left: 100%;
}
}
Here is the working on ie-edge example https://jsfiddle.net/vwty99s9/1/
I guess these browsers have trouble applying left values on animations, so simply change left for margin-left and you're good to go.
I have an idea for an Ajax-loader.
This is what I have accomplished so far:
body {
background-color: lightGrey;
counter-reset: h1-counter;
}
.wrap {
max-width: 200px;
height: 50px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
.wrap div {
background: linear-gradient(#0032f0, white, #0032f0);
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
opacity: .8;
}
.wrap div.dark-bar {
position: absolute;
width: 10%;
height: 100%;
animation: moveDarkBar 3s linear infinite;
z-index: 1;
}
#keyframes moveDarkBar {
from {
left: -20%;
}
to {
left: 120%;
}
}
<div class="wrap">
<div></div>
<div class="dark-bar"></div>
</div>
I want the moving indicator (.dark-bar) to be "melted" with foreground-div. Currently there is a hard line which is visually distinguishable.
Is there a way to get the moving indicator (.dark-bar) to be blurred on the left-, right edge?
You could make use of CSS filter to add blur to top layer which is animated as below,
filter - The filter property provides graphical effects like blurring,
sharpening, or color shifting an element. Filters are commonly used to
adjust the rendering of images, backgrounds, and borders.
Do include vendor prefixes for other browsers such as -webkit-,-o-,-moz-,-ms- to filter.
body {
background-color: lightGrey;
counter-reset: h1-counter;
}
.wrap {
max-width: 200px;
height: 50px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
.wrap div {
background: linear-gradient(#0032f0, white, #0032f0);
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
opacity: .8;
}
.wrap div.dark-bar {
position: absolute;
width: 10%;
height: 100%;
animation: moveDarkBar 3s linear infinite;
z-index: 1;
-webkit-filter:blur(2px); /*Add this*/
}
#keyframes moveDarkBar {
from {
left: -20%;
}
to {
left: 120%;
}
}
<div class="wrap">
<div></div>
<div class="dark-bar"></div>
</div>
Try using the box-shadow property and set the vertical and horizontal axis values to 0. Something like this:
div {
box-shadow: 0 0 10px black;
}
This might be a similar effect for the one you want.
Is it possible to have a body background image aligned to the edge of a container element?
Using boostrap 3, I want a background to the page that is fixed to a container edge, so when resizing, the background moves with the container (ie, in the example below, the background image centered over the container edge):
(source: nfx.nz)
Is this possible with a background image, or would I have to add a new absolutely positioned layer / or javascript...?
There are several solutions to your question, and it really depends on if you require dynamic sizing of the background. The example I have shown will animate the container dynamically, so you can see how it works.
Approach No. 1: Offset background position with known value
One is if you know the exact dimensions of the image, then you can simply position it negatively along the x-axis (i.e. moving it to the left) by half the width of the image. This is assuming that you are not dynamically sizing your background image:
* {
margin: 0;
padding: 0;
}
div {
background-color: steelblue;
background-image: url('http://placehold.it/400x200');
background-repeat: no-repeat;
background-position: -200px 0;
width: 50%;
margin: 0 auto;
height: 500px;
animation-name: pulse;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes pulse {
0% {
width: 50%;
}
50% {
width: 100%;
}
100% {
width: 50%;
}
}
<div>
Background image dimension: 400x200
</div>
Approach No. 2: Use pseudo/dummy element
If your background size is dynamic (i.e. changes with the size of the container), you are better off using an absolutely positioned pseudo-element or a dummy element:
* {
margin: 0;
padding: 0;
}
div {
background-color: steelblue;
width: 50%;
margin: 0 auto;
height: 500px;
animation-name: pulse;
animation-duration: 3s;
animation-iteration-count: infinite;
position: relative;
overflow: hidden;
}
div::before {
background-image: url('http://placehold.it/400x200');
background-repeat: no-repeat;
background-size: 100%;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -50%;
right: 50%;
}
div > * {
position: relative;
}
#keyframes pulse {
0% {
width: 50%;
}
50% {
width: 100%;
}
100% {
width: 50%;
}
}
<div>
<p>Background image dimension: 400x200</p>
</div>