I have a full screen width background on my site, but I want to replace it with an image slideshow..everything works correctly, but when the images load in, they become all distorted.. I think it has something to do with the width/height being 100% and also with the "background-size: cover". Further explaination would also be awesome.
I'd like to make the image div fit exactly in the parent div as the "background-image:" property of does. Any help would be appreciated. Thank you very much!
Image DIV CSS:
#crossfade > img {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 30s linear infinite 0s;
-moz-animation: imageAnimation 30s linear infinite 0s;
-o-animation: imageAnimation 30s linear infinite 0s;
-ms-animation: imageAnimation 30s linear infinite 0s;
animation: imageAnimation 30s linear infinite 0s;
}
Parent DIV CSS:
.main-content {
margin-top: -5px;
display: inline-block;
content: "";
position: relative;
padding-top: -5px;
height: 300px;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background-image: url(../content/images/header_bg.jpg) no-repeat center center;
background-size: cover;
z-index: 0;
}
They get distorted because you forcefully set their width and height to 100%.
You should use min-width and min-height instead and center them with the translate transformation.
#crossfade > img {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 30s linear infinite 0s;
-moz-animation: imageAnimation 30s linear infinite 0s;
-o-animation: imageAnimation 30s linear infinite 0s;
-ms-animation: imageAnimation 30s linear infinite 0s;
animation: imageAnimation 30s linear infinite 0s;
}
Additionally there are no negative paddings
Related
I'm trying to solve this problem, but I'm giving up and I'm here to see if you can give me some hints.
I made this bubble effect in which when I touch each bubble it pops, but I can't get the bubbles to reappear after a few seconds (as if they were new bubbles).
I leave the code here below:
function changeStyle1() {
var element = document.getElementById("pop1");
element.style.opacity = "0";
}
function changeStyle2() {
var element = document.getElementById("pop2");
element.style.opacity = "0";
}
function changeStyle3() {
var element = document.getElementById("pop3");
element.style.opacity = "0";
}
function changeStyle4() {
var element = document.getElementById("pop4");
element.style.opacity = "0";
}
function changeStyle5() {
var element = document.getElementById("pop5");
element.style.opacity = "0";
}
function changeStyle6() {
var element = document.getElementById("pop6");
element.style.opacity = "0";
}
function changeStyle7() {
var element = document.getElementById("pop7");
element.style.opacity = "0";
}
function changeStyle8() {
var element = document.getElementById("pop8");
element.style.opacity = "0";
}
function changeStyle9() {
var element = document.getElementById("pop9");
element.style.opacity = "0";
}
function changeStyle10() {
var element = document.getElementById("pop10");
element.style.opacity = "0";
}
function changeStyle11() {
var element = document.getElementById("pop11");
element.style.opacity = "0";
}
body {
background: #000;
color: #333;
font: 100% Lato, Arial, Sans Serif;
height: 100vh;
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* OBJECTS */
button {
background: transparent;
border-color: transparent;
}
.bubble {
position: fixed;
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.25);
}
.bubble:after {
content: '';
position: absolute;
top: 80px;
left: 80px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
z-index: 10;
filter: blur(2px);
}
.bubble::before {
content: '';
position: absolute;
top: 50px;
left: 45px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #fff;
z-index: 10;
filter: blur(2px);
}
.bubble span {
position: absolute;
border-radius: 50%;
}
.bubble span:nth-child(1) {
inset: 10px;
border-left: 15px solid #0fb4ff;
filter: blur(8px);
}
.bubble span:nth-child(2) {
inset: 10px;
border-right: 15px solid #ff4484;
filter: blur(8px);
}
.bubble span:nth-child(3) {
inset: 20px;
border-top: 15px solid #ffeb3b;
filter: blur(8px);
}
.bubble span:nth-child(4) {
inset: 30px;
border-left: 15px solid #ff4484;
filter: blur(12px);
}
.bubble span:nth-child(5) {
inset: 10px;
border-bottom: 10px solid #fff;
filter: blur(8px);
transform: rotate (330deg);
}
/* ANIMATIONS */
.x1 {
-webkit-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: -5%;
top: 5%;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
}
.x2 {
-webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
left: 5%;
top: 80%;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
}
.x3 {
-webkit-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 10%;
top: 40%;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
transform: scale(0.7);
}
.x4 {
-webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
left: 20%;
top: 0;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}
.x5 {
-webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
left: 30%;
top: 50%;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
}
.x6 {
-webkit-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 50%;
top: 0;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
}
.x7 {
-webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 65%;
top: 70%;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
}
.x8 {
-webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
left: 80%;
top: 10%;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}
.x9 {
-webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
left: 90%;
top: 50%;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
}
.x10 {
-webkit-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 80%;
top: 80%;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}
.x11 {
-webkit-animation: animateBubble 19s linear infinite, sideWays 3s ease-in-out infinite alternate;
-moz-animation: animateBubble 19s linear infinite, sideWays 3s ease-in-out infinite alternate;
animation: animateBubble 19s linear infinite, sideWays 3s ease-in-out infinite alternate;
left: 90%;
top: 90%;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
transform: scale(0.7);
}
/* KEYFRAMES */
#-webkit-keyframes animateBubble {
0% {
margin-top: 1000px;
}
100% {
margin-top: -100%;
}
}
#-moz-keyframes animateBubble {
0% {
margin-top: 1000px;
}
100% {
margin-top: -100%;
}
}
#keyframes animateBubble {
0% {
margin-top: 1000px;
}
100% {
margin-top: -100%;
}
}
#-webkit-keyframes sideWays {
0% {
margin-left: 0px;
}
100% {
margin-left: 50px;
}
}
#-moz-keyframes sideWays {
0% {
margin-left: 0px;
}
100% {
margin-left: 50px;
}
}
#keyframes sideWays {
0% {
margin-left: 0px;
}
100% {
margin-left: 50px;
}
}
<head>
<title>Pure CSS Animated Bubbles</title>
</head>
<body>
<button type="button" onclick="changeStyle()">Click Me</button>
<div id="background-wrap">
<button id="pop1" onclick="changeStyle1()" class="bubble x1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop2" onclick="changeStyle2()" class="bubble x2">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop3" onclick="changeStyle3()" class="bubble x3">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop4" onclick="changeStyle4()" class="bubble x4">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop5" onclick="changeStyle5()" class="bubble x5">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop6" onclick="changeStyle6()" class="bubble x6">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop7" onclick="changeStyle7()" class="bubble x7">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop8" onclick="changeStyle8()" class="bubble x8">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop9" onclick="changeStyle9()" class="bubble x9">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop10" onclick="changeStyle10()" class="bubble x10">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop11" onclick="changeStyle11()" class="bubble x11">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</body>
Codepen link: https://codepen.io/tomas-saint-romain/details/LYdaMRG
You dont need all of those functions,just one will be enough
JS
const changeStyleToBubble = (id) => {
//we get the id directly from the html element,as parameter
const element = document.getElementById(id);
element.style.opacity = "0";
//set it back to 1 after 2 seconds (2000 ms)
setTimeout(() => {
element.style.opacity = "1";
}, 2000)
}
HTML
<button id="pop2" onclick="changeStyleToBubble(this.id)" class="bubble x2">
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>
The problem started on the last Chrome update, since then the images crop and just do not render properly, but not all of them, just a couple.
I am using them this way:
.ch-info > div {
text-align: center;
display: block;
position: absolute;
width: 100%;
height: 105%;
border-radius: 50%;
background-position: center center;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
Inside the div I have this class which provide the background image.
.img-1 {
background-image: url(../images/icons/name.svg);
background-size:cover;
}
I have no idea how to fix it. I have seen that applying fixed sizes on the image solves it but the same size do not work for all the pics and I would wanna know what can be the problem. I was thinking that may be something related to changes on how the CSS property works since update but it's just a theory.
This happens only on Chrome.
I am trying to rotate an element using jquery. My problem is that the element doesn't rotate fluently, but the speed is being increased from the beginning and decreased in before the end of the rotation. Is there a way to rotate element fluently? Thanks.
rotatingElement.css({
WebkitTransform: 'rotate(' + max_rotation + 'deg)',
WebkitTransitionDuration: rotating_time + 's'
});
Try this. Use linear option in -webkit-animation
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation: spin 1s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
p {
margin: 20px;
width: 100px;
height: 100px;
background: green;
-webkit-animation: spin 3s infinite;
}
whith linear option
<div></div>
<br>whithout linear option
<p></p>
I'm not very experienced in Javascript/jQuery/CSS3 animations.
I needed an animated slider, so I downloaded an example from internet and tried to modify it.
At that banner image were at right side and texts were at left side.
But, I need image at left side and texts at right side.
That's why, I change the image's div and text's css this way:
Previous CSS code:
.da-img {
position: absolute;
left: 60%;
}
.da-slide p, .da-slide h2, .da-slide a {
position: absolute;
left: 10%;
}
After changed by me:
.da-img {
position: absolute;
left: 10%;
}
.da-slide p, .da-slide h2, .da-slide a {
position: absolute;
left: 40%;
}
After changing it, it worked fine:
But, when slider goes to the left to right or right to left, every things go to their previous position:
I don't understand why it happened. Every time after refreshing page, the image shows at the left side of the div for the first time, but after the slider moves, everything changes!
Please, tell me how can I fix it. You can see my touched files here.
To understand better how key frames works go here and have a read about it. they way he explains stuff is just really good.
there is some stuff you need to play with before you can make it work: this here is your start state:
.da-slide-fromleft h2{
-webkit-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
-moz-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
-o-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
-ms-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
animation: fromLeftAnim1 0.6s ease-in 0.6s both;
}
the rest is in sample at css/style.css line #337 as the name suggest is what happens when it does slide from the left side. that animation respond to this key frame:
#-webkit-keyframes fromLeftAnim1{
0%{ left: -110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
#-webkit-keyframes fromLeftAnim2{
0%{ left: -110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
that is just like saying move my element from -110% to 10% and while you do it change its opacity to 1.
what you need to do is see if there is any existing key frame that meets what you need, other wise just copy one of them change the name and play with the positions(right or left) and the %
so it will looks something like this::
.da-slide-fromleft h2{
-webkit-animation: your_custom_name 0.6s ease-in 0.6s both;
-moz-animation: your_custom_name 0.6s ease-in 0.6s both;
-o-animation: your_custom_name 0.6s ease-in 0.6s both;
-ms-animation: your_custom_name 0.6s ease-in 0.6s both;
animation: your_custom_name 0.6s ease-in 0.6s both;
}
and is key frame:
#-webkit-keyframes your_custom_name{
0%{ left: -10%; opacity: 0; }
100%{ left: 110%; opacity: 1; }
}
also you can play to make it better with the animation transitions and times, easy-in, easy-out, and so on.. more here :CLICK ME: