Here I am trying to create a background image slider by using jQuery slider by animating its background position.
Here is my html and CSS
<div id="sliderWrapper">
</div>
#sliderWrapper
{
/*background-color: transparent;*/
width: 620px;
height: 349px;
background-image: url(images/1.png), url(images/2.jpg);
background-position: 0px 0px, 620px 0px;
background-repeat: no-repeat,no-repeat;
background-size: cover,cover;
-webkit-background-size: cover,cover;
-moz-background-size: cover,cover;
}
$('#sliderWrapper').animate({
'backgroundPosition':'-620px 0px,0px 0px'
}, 1500);
There animate of backgroundPosition is not working
I read in many blogs to use the following
backgroundPositionX:'-640px';
It works fine with div having single background Images. But I don't know how to work with div's having multiple background Images.
You can set the alternate style in a CSS class, the transition also in the CSS, and just use scripting to toggle the class:
CSS
#test
{
width: 620px;
height: 349px;
background-image: url(image1.jpg), url(image2.jpg);
background-position-x: 0px, 620px;
background-position-y: 0px, 0px;
background-repeat: no-repeat,no-repeat;
background-size: cover,cover;
transition: background-position-x 1.5s;
}
#test.test2 {
background-position-x: -620px, 0px;
}
scripting:
$('#button').click(function () {
$('#test').toggleClass('test2')
})
One option would be use CSS3 transitions and add multiple images with ID's, like so:
HTML
<div id="bg_imgs">
<img src="img1.jpg id="bg1" />
</div>
CSS
#bg_imgs { z-index: -1; /* places the DIV behind the default "layer" on content */ }
#img1 {
-webkit-animation: myanim 5s infinite; /* Chrome, Safari 5+ */
-moz-animation: myanim 5s infinite; /* Firefox 5-15 */
-o-animation: myanim 5s infinite; /* Opera 12.00 */
animation: myanim 5s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
}
#-webkit-keyframes myanim {
0% { opacity: 0.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
#-moz-keyframes myanim {
0% { opacity: 0.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
#-o-keyframes myanim {
0% { opacity: 0.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
#keyframes myanim {
0% { opacity: 0.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
Related
i am trying to create animated background slideshow that zoom in the first image and then come back to normal for the next image and zoom it, any ideas please ??
.img-contaner {
position: fixed;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
animation: img 20s ease-in-out infinite;
background: url(./1.jpg);
}
#keyframes img{
25%{
background: url(./2.jpg);
transform: scale(1.2);
}
50%{
background: url(./3.jpg);
transform: scale(1.2);
}
75%{
background: url(./4.jpg);
transform: scale(1.2);
}
100%{
background: url(./1.jpg);
transform: scale(1.2);
}
}
i tried this but the image stays zoomed the whole animation
Don't override the background-image using the background: shorthand. You'll override the other background-* styles.
Preload all your images into the browser to prevent flickering using a :before pseudo
It's "container" not "contaner"
Math time:
4 images + 4 transitions + 4 pauses = 12. 100 / 12 = 8.3 Calculate incrementally and floor or round your value to be used as animation keyframes steps:
/*QuickReset*/*{margin:0;box-sizing:border-box;}
.img-container {
position: fixed;
width: 100%;
height: 100%;
background: center / cover no-repeat;
animation: img 20s ease-in-out infinite;
}
/* Preload images to prevent flicker during animation */
.img-container:before {
content: "";
background-image:
url(//placehold.it/500x300/0bf?text=1),
url(//placehold.it/500x300/f0b?text=2),
url(//placehold.it/500x300/bf0?text=3),
url(//placehold.it/500x300/0fb?text=4);
}
#keyframes img {
0%, 8% {
background-image: url(//placehold.it/500x300/0bf?text=1);
transform: scale(1);
}
17% {
transform: scale(1.2);
}
25%, 33% {
background-image: url(//placehold.it/500x300/f0b?text=2);
transform: scale(1);
}
41% {
transform: scale(1.2);
}
50%, 58% {
background-image: url(//placehold.it/500x300/bf0?text=3);
transform: scale(1);
}
66% {
transform: scale(1.2);
}
75%, 83% {
background-image: url(//placehold.it/500x300/0fb?text=4);
transform: scale(1);
}
91% {
transform: scale(1.2);
}
}
<div class="img-container"></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'm trying to make a submarine (SVG) seem as if it's floating on top of a
wave (also SVG).
Since the wave is constantly going up and down, I want the submarine to be centered vertically (x), but be moving horizontally on top of the wave.
This is the code for the wave
// best seen at 1500px or less
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #B7E8EB 100%);
overflow: hidden;
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #015871;
}
.wave {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>
I added a class called 'sub' to get your picture formatted and also to add the animation. Notice I added the 'ease-out' as the animation timing function so that it goes down fast but up slower to keep up with the wave timing. But this is also just a result of tweaking the parameters and the animation 'updown' just right so that its working in the opposite direction to the wave based on how it starts. This is one way to do it, if you want to tweak the height or the ease out just change the seconds on ease-out in the 'sub' class or tweak the pixel count in the updown function. Hope this helps!
// best seen at 1500px or less
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #B7E8EB 100%);
overflow: hidden;
}
.sub{
position: absolute;
top: 85%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -100px; /* Start height margin */
margin-left: -50px; /* Half the width */
animation: updown 7s cubic-bezier(0.42, 0, 0.58, 1) infinite;
animation-timing-function:ease-in-out;
transform: translate3d(0, 0, 0);
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #015871;
}
.wave {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier(0.36, 0.48, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite,
swell 7s ease -1.25s infinite;
opacity: 1;
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
#keyframes updown {
0%, 100% {
transform: translate3d(0,-40px,0);
}
70% {
transform: translate3d(0,45px,0);
}
}
<img class = "sub" src = "https://image.flaticon.com/icons/svg/447/447773.svg">
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>
I'm trying to make my background fade in upon entering the website. I've tried several methods that does work. However, I'm just having trouble centering the background on different resolution. As you can currently see upon entering my website, whenever you resize your browser, the background would be in the middle at all times. Website: http://studi0.ml/ That's exactly what I'm trying to achieve, yet still have the globe to be in the middle at all times. And my background is pure CSS. Keep in mind, I just started website designing. I've been trying to code for 2-3 weeks now.
html,
body {
background: url(http://studi0.ml/EzJsucI.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-transition: background 0.0s linear;
-moz-transition: background 0.75s 0.0s linear;
-o-transition: background 0.75s 0.0s linear;
transition: background 0.75s 0.0s linear;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
I would recommend a different setup if you want a background image to fade in on page load. You can have a separate div in a different flow than the rest of your page and have it animate to an opacity of 1 on page load.
HTML
<html>
<head> ... </head>
<body>
<div class="page-bg"></div>
</body>
</html>
CSS
html, body {
height: 100%;
width: 100%;
}
body {
position: relative;
}
.page-bg {
opacity: 0;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(http://studi0.ml/EzJsucI.jpg) no-repeat center center fixed;
background-size: cover;
animation-name: fadeIn;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-duration: 1s;
animation-fill-mode:forwards;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Of course you might need to add polyfills for the animation and keyframes declarations. (i.e. -moz-animation-name, -webkit-animation-name, etc..)
Here is a working example on Plunkr. I had to swap the image you used with one with a https link so there wouldn't be an issue loading it.
If we are trying just to fade bg-color of a div, we can use:
.field-error {
color: #f44336;
padding: 2px 5px;
position: absolute;
font-size: small;
background-color: white;
}
.highlighter {
animation: fadeoutBg 3s; /***Transition delay 3s fadeout is class***/
-moz-animation: fadeoutBg 3s; /* Firefox */
-webkit-animation: fadeoutBg 3s; /* Safari and Chrome */
-o-animation: fadeoutBg 3s; /* Opera */
}
#keyframes fadeoutBg {
from { background-color: lightgreen; } /** from color **/
to { background-color: white; } /** to color **/
}
#-moz-keyframes fadeoutBg { /* Firefox */
from { background-color: lightgreen; }
to { background-color: white; }
}
#-webkit-keyframes fadeoutBg { /* Safari and Chrome */
from { background-color: lightgreen; }
to { background-color: white; }
}
#-o-keyframes fadeoutBg { /* Opera */
from { background-color: lightgreen; }
to { background-color: white; }
}
<div class="field-error highlighter">File name already exists.</div>
Similarly you can achieve any style change in from and to sections like color: green to change the font-color to green, or if you want to use :
1) Fade-in: give opacity: 0 to opacity: 1
2) Fade-out: give opacity: 1 to opacity: 0
For Further details refer to https://stackoverflow.com/a/58525787/1904479
I'm changing the background-image of a div using jquery+css like this:
var slide_images = ["http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2014/2/7/1/FNM_030114-Spaghetti-Carbonara-Recipe-h_s4x3.jpg", "http://www.labrasseriefirenze.it/labrasserie/wp-content/uploads/2013/12/spaghetti-carbonara.jpg"];
var slide_count = 0;
$(document).ready(function() {
setInterval(function() {
slide_count=++slide_count%slide_images.length;
$('.slide_photo').css('background-image', 'url(\''+slide_images[slide_count]+'\')');
}, 4000);
});
.slide_photo {
position: relative;
top: 30px;
width: 100%;
height: 200px;
background-image: url('http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2014/2/7/1/FNM_030114-Spaghetti-Carbonara-Recipe-h_s4x3.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
transition: all .2s ease;
}
.slide_photo:hover {
background-size: 110% auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="slide_photo"></div>
The question is: Is it possible to add a fade-in effect or transition to make the change smoother than it is?
How about some css3 animation like this
.slide_photo{
-webkit-animation: fade 4s infinite;
-moz-animation: fade 4s infinite;
-o-animation: fade 4s infinite;
animation: fade 4s infinite;
}
.slide_photo {
position: relative;
top: 30px;
width: 100%;
height: 200px;
background-image: url('http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2014/2/7/1/FNM_030114-Spaghetti-Carbonara-Recipe-h_s4x3.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
transition: all .2s ease;
-webkit-animation: fade 4s infinite;
-moz-animation: fade 4s infinite;
-o-animation: fade 4s infinite;
animation: fade 4s infinite;
}
.slide_photo:hover {
background-size: 110% auto;
}
#-webkit-keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
var slide_images = ["http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2014/2/7/1/FNM_030114-Spaghetti-Carbonara-Recipe-h_s4x3.jpg", "http://www.labrasseriefirenze.it/labrasserie/wp-content/uploads/2013/12/spaghetti-carbonara.jpg"];
var slide_count = 0;
$(document).ready(function() {
setInterval(function() {
slide_count = ++slide_count % slide_images.length;
$('.slide_photo').css('background-image', 'url(\'' + slide_images[slide_count] + '\')');
}, 4000);
});
.slide_photo {
position: relative;
top: 30px;
width: 100%;
height: 200px;
background-image: url('http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2014/2/7/1/FNM_030114-Spaghetti-Carbonara-Recipe-h_s4x3.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
transition: all .2s ease;
-webkit-animation: fade 4s infinite;
-moz-animation: fade 4s infinite;
-o-animation: fade 4s infinite;
animation: fade 4s infinite;
}
.slide_photo:hover {
background-size: 110% auto;
}
#-webkit-keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="slide_photo"></div>