I would like to make a full screen rotating background with tiled images like this one:
.overlay{
position:fixed;
background:url(https://codepo8.github.io/canvas-images-and-pixels/img/horse.png);
background-repeat:repeat;
-webkit-animation:180s rotate-left infinite linear;
-moz-animation:180s rotate-left infinite linear;
-o-animation:180s rotate-left infinite linear;
-ms-animation:180s rotate-left infinite linear;
animation:180s rotate-left infinite linear;
top:0;
left:0;
width:100%;
height:100%;
}
#-moz-keyframes rotate-left{
0%{ -moz-transform:rotate(0deg); -moz-transform-origin:50% 50%; }
100%{ -moz-transform:rotate(-360deg); }
}
#-webkit-keyframes rotate-left{
0%{ -webkit-transform:rotate(0deg); -webkit-transform-origin:50% 50%; }
100%{ -webkit-transform:rotate(-360deg); }
}
<div class="overlay">
</div>
Is there a trick to make the tiles to fill the whole screen in all positions?
Thank you for your help in anticipation.
background-size will not work here because you are rotating a div, not the background itself.
Mathematically, if you want the child div to cover the entirety of parent div's area during animation you need to make sure the child's height and width are equal or grater to the diagonal distance between corners of parent element.
So, you can either do the math, or simply make it really big.
body{ margin: 0; }
.parent{
position: relative;
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
overflow: hidden;
}
.overlay{
background:url(https://codepo8.github.io/canvas-images-and-pixels/img/horse.png);
background-repeat:repeat;
-webkit-animation:180s rotate-left infinite linear;
-moz-animation:180s rotate-left infinite linear;
-o-animation:180s rotate-left infinite linear;
-ms-animation:180s rotate-left infinite linear;
animation:180s rotate-left infinite linear;
width:1000%;
height:1000%;
position: absolute;
top: 50%;
left: 50%;
}
#-moz-keyframes rotate-left{
0%{ -moz-transform:rotate(0deg) translate(-50%, -50%); -moz-transform-origin: top left; }
100%{ -moz-transform:rotate(-360deg) translate(-50%, -50%); -moz-transform-origin: top left; }
}
#-webkit-keyframes rotate-left{
0%{ -webkit-transform:rotate(0deg) translate(-50%, -50%); -webkit-transform-origin: top left; }
100%{ -webkit-transform:rotate(-360deg) translate(-50%, -50%); -webkit-transform-origin: top left; }
}
#keyframes rotate-left{
0%{ transform:rotate(0deg) translate(-50%, -50%); transform-origin: top left; }
100%{ transform:rotate(-360deg) translate(-50%, -50%); transform-origin: top left; }
}
<div class="parent">
<div class="overlay">
</div>
</div>
Related
I have a situation similar to this fiddle, where I have a CSS3 animation that scales an element absolute-positioned in the centre of another element. However, when the animation takes place it is off-centre, as seen by the red squares relative to blue in the example. How do I centre it? I have tried a couple of configurations around the transform-origin property, but this isn't producing the correct results.
#keyframes ripple_large {
0% {transform:scale(1); }
75% {transform:scale(3); opacity:0.4;}
100% {transform:scale(4); opacity:0;}
}
.container {
position: relative;
display: inline-block;
margin: 10vmax;
}
.cat {
height: 20vmax;
}
.center-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 10px;
width: 10px;
background: blue;
}
.to-animate {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid red;
height: 5vmax;
width: 5vmax;
transform-origin:center;
}
.one {
animation: ripple_large 2s linear 0s infinite;
}
.two {
animation: ripple_large 2s linear 1s infinite;
}
<div class='container'>
<img src='http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg' class='cat'>
<div class='center-point'>
</div>
<div class='to-animate one'></div>
<div class='to-animate two'></div>
</div>
The issue is that you are overriding the translate transformation.
When you specify a new transformation (the one inside the animation) it override the first one. In your case you are removing the translation that is fixing the center alignment.
You need to add them to the same transform property and pay attention to the order because it's important (Why does order of transforms matter? rotate/scale doesn't give the same result as scale/rotate)
#keyframes ripple_large {
0% {
transform: translate(-50%, -50%) scale(1);
}
75% {
transform: translate(-50%, -50%) scale(3);
opacity: 0.4;
}
100% {
transform: translate(-50%, -50%) scale(4);
opacity: 0;
}
}
.container {
position: relative;
display: inline-block;
margin: 10vmax;
}
.cat {
height: 20vmax;
}
.center-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 10px;
width: 10px;
background: blue;
transform-origin: center;
}
.to-animate {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid red;
height: 5vmax;
width: 5vmax;
}
.one {
-webkit-animation: ripple_large 2s linear 0s infinite;
animation: ripple_large 2s linear 0s infinite;
}
.two {
-webkit-animation: ripple_large 2s linear 1s infinite;
animation: ripple_large 2s linear 1s infinite;
}
<div class='container'>
<img src='http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg' class='cat'>
<div class='center-point'>
</div>
<div class='to-animate one'></div>
<div class='to-animate two'></div>
</div>
UPDATE
As commented, it's better to center your element using another method than translation to avoid changing the animation since this can be used with other elements.
Example:
#keyframes ripple_large {
0% {
transform: scale(1) ;
}
75% {
transform:scale(3) ;
opacity: 0.4;
}
100% {
transform: scale(4) ;
opacity: 0;
}
}
.container {
position: relative;
display: inline-block;
margin: 10vmax;
}
.cat {
height: 20vmax;
}
.center-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 10px;
width: 10px;
background: blue;
transform-origin:center;
}
.to-animate {
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;
margin:auto;
border: 1px solid red;
height: 5vmax;
width: 5vmax;
}
.one {
animation: ripple_large 2s linear 0s infinite;
}
.two {
animation: ripple_large 2s linear 1s infinite;
}
<div class='container'>
<img src='http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg' class='cat'>
<div class='center-point'>
</div>
<div class='to-animate one'></div>
<div class='to-animate two'></div>
</div>
I have created a mockup of a "kite flying" page that a client requested, which makes the kite follow the cursor around the screen. I would like to have it rotate so that it looks like the kite is traveling in the direction of the movement.
I would like to do something like:
transform: rotate3d(0, 1, 1, 25deg); //TURN KITE TO THE RIGHT
transform: rotate3d(0, -1, -1, 25deg); //TURN KITE TO THE LEFT
But I don't know enough about JS to set up the function so that if the movement on the X-axis is increasing, it rotates right, and if it is decreasing, it rotates left.
Demo in question: http://stoysnet.com/clients/wingsofthewind/flyme/
Pardon my messy code... I am very new at Javascript and CSS animations.
EXTRA: If anyone has suggestions on how to make the "string" so that it A) moves left and right as currently shown, but also B) tips so that it is pointing toward/connected to the kite, I am open to suggestions.
EDIT: Full code of page shown here (cleaned up a bit), so others can still view it when the mockup is removed:
// SCRIPT FOR CURSOR FOLLOW
$(document).on('mousemove', (event) => {
$('.follower').css({
left: event.clientX,
top: event.clientY/1.5 -100,
});
$('.string').css({
left: event.clientX,
});
});
// END SCRIPT FOR CURSOR FOLLOW
// SCRIPT FOR SWAP IMAGE
function pickKite(kite) {
document.getElementById("flyme").style.backgroundImage = "url(" + kite + ")";
}
// END SCRIPT FOR SWAP IMAGE
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#keyframes windy {
0% {
transform: translateX(-30%) translateY(-30%);
}
25% {
transform: translateX(-50%) translateY(-50%);
}
50% {
transform: translateX(-80%) translateY(-30%);
}
75% {
transform: translateX(-50%) translateY(-10%);
}
100% {
transform: translateX(-30%) translateY(-30%);
}
}
body {
padding:0px;
margin:0px;
}
.container {
width:100%;
height:100vh;
background-image: url(https://i.imgur.com/ak3aIyl.png);
background-size: cover;
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 180s linear infinite;
-ms-animation: animatedBackground 180s linear infinite;
-moz-animation: animatedBackground 180s linear infinite;
-webkit-animation: animatedBackground 180s linear infinite;
cursor:crosshair;
}
.follower {
width: 200px;
height: 200px;
background-image: url(https://i.imgur.com/i4xmPPt.png);
background-position: center center;
background-size: contain;
transition-duration: 1800ms;
transition-timing-function: ease-out;
position: fixed;
left:50%;
top:50%;
transform: translateX(-50%) translateY(-50%);
transform-origin:50% 50%;
animation: windy 20s ease-in-out infinite;
-ms-animation: windy 20s ease-in-out infinite;
-moz-animation: windy 20s ease-in-out infinite;
-webkit-animation: windy 20s ease-in-out infinite;
}
.string {
width: 2px;
height: 400px;
background:#FFFFFF;
background-position: center center;
background-size: cover;
transition-duration: 1000ms;
transition-timing-function: ease-out;
position: fixed;
left:50%;
top:100%;
transform: translateX(-50%) translateY(-50%);
transform-origin:100% 50%;
}
.kite-selector {
position: absolute;
bottom:10px;
right:10px;
width:300px;
height:100px;
background-color:rgba(0,0,0,0.31);
}
.kite-selector div {
float:left;
margin-left:15px;
}
label > input{ /* HIDE RADIO */
visibility: hidden; /* Makes input not-clickable */
position: absolute; /* Remove input from document flow */
}
label > input + img{ /* IMAGE STYLES */
cursor:pointer;
background-color:rgba(255,255,255,0.00);
}
label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
background-color:rgba(255,255,255,0.25);
}
<div class="container">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="follower" id="flyme"></div>
<div class="string">String Position Marker</div>
<!-- KITE IMAGE SELECTOR -->
<div class="kite-selector">
<h3 style="margin:10px;">Select your kite:</h3>
<form>
<div>
<label><input type="radio" name="kite" value="https://i.imgur.com/i4xmPPt.png" checked onClick="pickKite(this.value);"><img src="https://i.imgur.com/i4xmPPt.png" style="max-height:50px;" alt="kite1"></label>
</div>
<div>
<label><input type="radio" name="kite" value="https://i.imgur.com/iXRQF77.png" onClick="pickKite(this.value);"><img src="https://i.imgur.com/iXRQF77.png" style="max-height:50px;" alt="kite2"></label>
</div>
<div>
<label><input type="radio" name="kite" value="https://i.imgur.com/L3IA1hX.png" onClick="pickKite(this.value);"><img src="https://i.imgur.com/L3IA1hX.png" style="max-height:50px;" alt="kite3"></label>
</div>
</form>
</div>
<!-- END KITE IMAGE SELECTOR -->
</div>
I have a div within another div to which I would like to apply a CSS animation. The problem seems to be that I am applying multiple transforms to the div. In order to center the inner div, I am using the following:
#inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I then add the following class to the div on click:
.spin {
animation: whirl 1s ease-in-out;
}
#keyframes whirl {
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(0deg);
}
}
It seems that the fact that I have already used a transform to center the div makes it so that the animation doesn't work correctly. If I remove the transform: translate(-50%, -50%); line from the CSS, the animation works correctly, but the div is not centered.
Here is a jsfiddle I made to demonstrate the issue.
Thanks for your help!
The issue is because the translate is lost on animation.change it by adding both translate and rotate on animation
#keyframes whirl {
50% {
transform: translate(-50%, -50%) rotate(180deg);
}
100% {
transform: translate(-50%, -50%) rotate(0deg);
}
}
function spin() {
$("#inner").addClass("spin");
}
#main {
background-color: black;
position: relative;
width: 400px;
height: 400px;
}
#inner {
background-color: red;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border-radius: 10px;
transform: translate(-50%, -50%);
}
.spin {
animation: whirl 1s ease-in-out;
}
#keyframes whirl {
50% {
transform: translate(-50%, -50%) rotate(180deg);
}
100% {
transform: translate(-50%, -50%) rotate(0deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="inner" onclick="spin()"></div>
</div>
I have a ken burns effect slideshow running with multiple pictures. I want to add an overlay on the mobile site of the slideshow, where the colours are switching between green red yellow and blue automatically. The overlay is not appearing and I can't figure out the problem. Any help is appreciated.
HTML:
<div id="slideshow">
<img src="images/Campus2.jpg" alt="school pic">
<img src="images/bio_lab_optimised.jpg" alt="bio lab pic">
<img src="images/Capture.jpg" alt="school pic">
<img src="images/class_optimised.jpg" alt="class pic">
<img src="images/LFPS_optimised.jpg" alt="school pic">
<img src="images/phy_lab_optimmised.jpg" alt="physics lab">
<img src="images/cs_lab.jpg" alt="class pic">
<img src="images/x-optimised.jpg" alt="school pic">
<img src="images/page-1-hero-image.jpg" alt="school's image">
<img src="images/kindergarten2.jpg" alt="kindergarten">
</div>
CSS: (for overlay)
.overlay {
position: relative;
top:0;
left:0;
width:100%;
height:100%;
display: block;
z-index:3;
animation: color-animation 80s linear alternate;
}
#keyframes color-animation {
0% {
background-color: rgba(255,0,0,0.5);
}
25% {
background-color: rgba(0,255,0,0.5);
}
50% {
background-color: rgba(0,0,255,0.5);
}
100% {
background-color: rgba(255,255,0,0.5);
}
}
CSS: (ken burns effect)
#slideshow{
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
#slideshow img {
position: absolute;
left: 0;
top: 0;
z-index: 1;
/* to make pic responsive */
min-height: 100%;
min-width: 1024px;
width: 100vw;
height: 100vh;
opacity:0;
-webkit-transition-property: opacity, -webkit-transform;
-webkit-transition-duration: 3s, 45s;
-moz-transition-property: opacity, -moz-transform;
-moz-transition-duration: 3s, 45s;
-ms-transition-property: opacity, -ms-transform;
-ms-transition-duration: 3s, 45s;
-o-transition-property: opacity, -o-transform;
-o-transition-duration: 3s, 4s;
transition-property: opacity, transform;
transition-duration:3s, 45s;
}
#slideshow img {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
}
#slideshow img:nth-child(2n+1) {
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-o-transform-origin: top right;
transform-origin: top right;
}
#slideshow img:nth-child(3n+1) {
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-ms-transform-origin: top left;
-o-transform-origin: top left;
transform-origin: top left;
}
#slideshow img:nth-child(4n+1) {
-webkit-transform-origin: bottom right;
-moz-transform-origin: bottom right;
-ms-transform-origin: bottom right;
-o-transform-origin: bottom right;
transform-origin: bottom right;
}
/**
* Because of the stacking context, we need to make sure that the first image (in source) is not hidden by the last one.
* The rule below moves all images past the second one down the stack.
* This is because the second image needs to show on top of the first one when it transitions in.
*/
#slideshow .fx:first-child + img ~ img {
z-index:-1;
}
/**
* Because images are styled with a different point of origin, the following rule will create different panning effects.
*/
#slideshow .fx {
opacity:1;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
Javascript:
function slideEffect(){
//apply fx class to first element
document.getElementById('slideshow').getElementsByTagName('img')[0].className = "fx";
//loop kenburns effect every 15 seconds
window.setInterval(kenBurns, 15000);
//gets all images under slideshow
var images = document.getElementById('slideshow').getElementsByTagName('img'),
numberOfImages = images.length,
i= 1;
function kenBurns() {
//applies class fx appropriately
if(i==numberOfImages){ i = 0;}
images[i].className = "fx";
if(i===0){ images[numberOfImages-2].className = "";}
if(i===1){ images[numberOfImages-1].className = "";}
if(i>1){ images[i-2].className = "";}
i++;
}
};
if (window.innerWidth < 480)
{
$('#slideshow').addClass('.overlay');
}
slideEffect();
You are basically just changing the style of #slideshow.
What you properly want instead, is to add a separate overlay on top of the slider. To do that I would highly recommend to use a pseudo-element.
I would also recommend to use media-queries instead of your JavaScript solution. It's a bit nicer.
If you want to keep your way, change .overlay to this:
.overlay:before {
display: block;
content: '';
position: relative;
top:0;
left:0;
width:100%;
height:100%;
z-index:3;
animation: color-animation 80s linear alternate;
}
..or if you want to use media-queries instead, remove this:
if (window.innerWidth < 480)
{
$('#slideshow').addClass('.overlay');
}
..and add this to the CSS instead:
#media screen and (max-width : 480px) {
#slideshow:before {
display: block;
content: '';
position: relative;
top:0;
left:0;
width:100%;
height:100%;
z-index:3;
animation: color-animation 80s linear alternate;
}
}
It almost do the exact same thing. When the screen width is lower than 480px, a pseudo-element is added to #slideshow, which in fact is the overlay.
I have the following HTML code. I have applied some animations to the logo using CSS3 and it's working as I wanted. Now the animation works when we hover on the logo. I want the animation to work automatically when the page loads.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>After Quote</title>
<style type="text/css">
.container {
background: none repeat scroll 0 0 #1180AE;
height: 340px;
margin: 0 auto;
padding-top: 50px;
width: 215px;
background: url(container.jpg) no-repeat;
}
.content {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 8px;
height: 200px;
margin: 0 auto;
padding-top: 115px;
width: 194px;
}
.logo:hover {
border-radius: 50%;
transform: rotate(720deg);
}
.logo {
height: 80px;
margin: 0 auto;
transition: all 1s ease 0s;
width: 80px;
}
.logo img {
border-radius: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="logo"> <img src="logo.jpg" alt="logo" /> </div>
<!--logo-->
</div>
<!--content-->
</div>
<!--container-->
</body>
</html>
There are multiple ways how you can achieve this:
The first one is to add a class to the logo after pageload with JavaScript. You need to do this, because CSS transitions only react on changes like classlist changes, hover etc., but can not start by itself.
The second way is to use CSS keyframe animations, which I believe is more what you want. You can learn about it here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
#-webkit-keyframes anm {
0% {-webkit-transform: rotate(0deg);}
25% {-webkit-transform: rotate(180deg);}
50% {-webkit-transform: rotate(360deg);}
75% {-webkit-transform: rotate(540deg);}
100% {-webkit-transform: rotate(720deg);}
}
#keyframes anm {
0% {transform: rotate(0deg);}
25% {transform: rotate(180deg);}
50% {transform: rotate(360deg);}
75% {transform: rotate(540deg);}
100% {transform: rotate(720deg);}
}
.logo img {
height: 80px;
border-radius: 15px;
-webkit-animation: anm 1s;
animation: anm 1s;
}
.logo img:hover {
border-radius: 50%;
transition: all 1s ease 0s;
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}
It won't unless you use #keyframes CSS animations. you can use like mentioned below..
and use animation-rotate class in your img tag. Here is the Demo.
.animation-rotate {
margin:auto;
-webkit-animation:coinflip 2s infinite linear;
animation:coinflip 2s infinite linear;
-moz-animation:coinflip 2s infinite linear;
}
#-webkit-keyframes coinflip {
0% {
-webkit-transform:rotateY(-1deg);
}
100% {
-webkit-transform:rotateY(360deg);
}
}
#-moz-keyframes coinflip {
0% {
-moz-transform:rotateY(-1deg);
}
100% {
-moz-transform:rotateY(360deg);
}
}
#keyframes coinflip {
0% {
transform:rotateY(0deg);
}
100% {
transform:rotateY(360deg);
}
}