Javascript setTimeout working well. but opacity starting in 1 to 0.5. How to fixed opacity 0.50 in setTimeout mode?
jQuery(document).ready(function() {
document.getElementById('load').style.visibility = "visible";
document.getElementById('load').style.width = '100' + '%';
document.getElementById('load').style.height = '100' + '%';
document.getElementById('load').style.position = 'initial';
document.getElementById('load').style.backgroundImage = "url('image/load.gif')";
jQuery('#load').fadeOut(3000);
});
#load {
background-repeat: no-repeat;
background-position: center;
opacity: 0.50 !important;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id='load'>
</div>
</body>
Check out the below. Try using animate
var x = document.getElementById('load');
$(x).animate({opacity:0.5},3000);
Hope this helps..!
Instead you can do it like following way:
HTML, CSS and JS
jQuery(document).ready(function() {
setTimeout(function() {
jQuery('#load').removeClass('active');
}, 1000)
});
#load {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
transition: 0.5s;
text-align: center;
display: none;
}
#load.active {
display: block;
transition: 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='load' class="active">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif">
</div>
Here is jsfiddle link
Related
I am trying to get my background "jumbotron" to change images. It works, however, I would like to add a transition to the image background as it is pretty rough. I was hoping to do it in the internal script or javascript however neither appears to be working. Is there any way to achieve this I've been trying to figure it out for a few hours and I can not find any guides online for it that makes sense to me.
var i = 0;
var images = [];
var slideTime = 12000; // 12 seconds
images[0] = 'https://i.pinimg.com/736x/ba/92/7f/ba927ff34cd961ce2c184d47e8ead9f6.jpg';
images[1] = 'https://thumbs.dreamstime.com/b/portrait-funny-cat-fly-his-nose-portrait-funny-cat-fly-his-nose-isolated-white-background-125606127.jpg';
images[2] = 'https://mymodernmet.com/wp/wp-content/uploads/2022/11/masayuki-oki-cat-street-photography-19.jpeg';
function changePicture() {
document.getElementById('jumbotron').style.transition = "all 4s";
document.getElementById('jumbotron').style.backgroundImage = "linear-gradient(to right bottom, #0d146f, transparent)," + "url(" + images[i] + ")";
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
setTimeout(changePicture, slideTime);
}
window.onload = changePicture;
#jumbotron {
background-position: center;
background-size: cover;
background-repeat: no-repeat !important;
height: 100vh;
-webkit-transition: background-image 2s ease-in-out;
transition: background-image 2s ease-in-out;
}
.center h3 {
margin: 0;
position: absolute;
top: 40%;
left: 20%;
transform: translate(-50%, -180%);
}
.center p {
margin: 0;
position: absolute;
top: 40%;
left: 20%;
transform: translate(-50%, -50%);
}
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div id="jumbotron" class="text-white text-center" style="">
<div class="center" slot="float: right;">
<h3>Welcome!</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
I managed to make a smooth transition by giving the jumbotron just the linear gradient background and using an absolute positioned child element with a transition on opacity. The trick is to fade out the background before changing the image and fading back in.
var i = 0;
var images = [];
var slideTime = 12000; // 12 seconds
images[0] = 'https://i.pinimg.com/736x/ba/92/7f/ba927ff34cd961ce2c184d47e8ead9f6.jpg';
images[1] = 'https://thumbs.dreamstime.com/b/portrait-funny-cat-fly-his-nose-portrait-funny-cat-fly-his-nose-isolated-white-background-125606127.jpg';
images[2] = 'https://mymodernmet.com/wp/wp-content/uploads/2022/11/masayuki-oki-cat-street-photography-19.jpeg';
const bg = document.querySelector('#jumbotron .bgi')
function changePicture() {
bg.classList.add('fade')
setTimeout(() => {
bg.style.backgroundImage = "linear-gradient(to right bottom, #0d146f, transparent)," + "url(" + images[i] + ")";
bg.classList.remove('fade')
}, 2000)
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
setTimeout(changePicture, slideTime);
}
window.onload = changePicture;
#jumbotron {
position: relative;
height: 100vh;
background-image: linear-gradient(to right bottom, #0d146f, transparent);
}
#jumbotron .bgi {
content: "";
background-position: center;
background-size: cover;
background-repeat: no-repeat !important;
-webkit-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#jumbtron .bgi.fade {
opacity: 0;
}
.center h3 {
margin: 0;
position: absolute;
top: 40%;
left: 20%;
transform: translate(-50%, -180%);
}
.center p {
margin: 0;
position: absolute;
top: 40%;
left: 20%;
transform: translate(-50%, -50%);
}
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div id="jumbotron" class="text-white text-center" style="">
<div class="bgi"></div>
<div class="center" slot="float: right;">
<h3>Welcome!</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
I did something similar using pseudo element after (or before). My implementation was in React using styled-components.
I tried to create the same using vanilla js. I hope it helps.
https://codesandbox.io/s/determined-ramanujan-z70egr
Essentially I am adding and removing a css rule (pseudo element before) where I run a transition to background-size.
I'm not using opacity because I thought that what the original question was related to transitioning background images. But I think those solutions look better to me as you don't have to touch the CSS rules.
const images = [];
const slideTime = 2000; // 2 seconds made it short to not wait much for this demo
let i = 0;
images[0] =
"https://i.pinimg.com/736x/ba/92/7f/ba927ff34cd961ce2c184d47e8ead9f6.jpg";
images[1] =
"https://thumbs.dreamstime.com/b/portrait-funny-cat-fly-his-nose-portrait-funny-cat-fly-his-nose-isolated-white-background-125606127.jpg";
images[2] =
"https://mymodernmet.com/wp/wp-content/uploads/2022/11/masayuki-oki-cat-street-photography-19.jpeg";
function changePicture() {
document.styleSheets[0].insertRule(
`#jumbotron::before { position: absolute; content: ''; top:0; left:0;width: 100%; height: 100%; background-image: url("${images[i]}"); background-size: cover; transition: all 1s ease; transform-origin: 0% 50%; }`,
document.styleSheets[0].cssRules.length - 1
);
}
function run() {
i++;
if (i === 3) {
i = 0;
}
}
function removeRule() {
setTimeout(() => {
document.styleSheets[0].deleteRule(
document.styleSheets[0].cssRules.length - 1
);
}, slideTime);
}
window.onload = () => {
setInterval(() => {
run();
changePicture();
removeRule();
}, slideTime);
};
#jumbotron {
height: 100vh;
position: relative;
}
#jumbotron::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("https://i.pinimg.com/736x/ba/92/7f/ba927ff34cd961ce2c184d47e8ead9f6.jpg");
background-size: cover;
transition: all 1s ease;
transform-origin: 0% 50%;
}
#jumbotron::after {
content: "";
inset: 0;
position: absolute;
background-image: linear-gradient(to right bottom, #0d146f, transparent);
}
.center h3 {
margin: 0;
position: absolute;
top: 40%;
left: 20%;
transform: translate(-50%, -180%);
}
.center p {
margin: 0;
position: absolute;
top: 40%;
left: 20%;
transform: translate(-50%, -50%);
}
<html lang="en">
<head>
<link rel="stylesheet" href="./styles.css" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>
<body>
<div id="jumbotron" class="text-white text-center">
<div class="center" slot="float: right;">
<h3>Welcome!</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<script src="./script.js"></script>
</body>
</html>
When you run the snippet, at least in my end, the pictures flash the first time they are loaded. This won't occur on codesandbox (see link above)
If you want a transition between two background images, I suggest using ::before and ::after pseudo-elements with background images, and then change the opacity on one of them.
I think it's easier if I showed the changes in steps. This code below have the same behavior as your code, where I only set --background-image.
I should point out that you should never ever use float and position: absolute unless you know what you're doing, because it just messes up the page flow. I updated (removed) the CSS accordingly. Also, Bootstrap is just the worst because you will end up trying to override anything Boostrap tries to implement, just like your CSS code did in your snippet.
var i = 0;
var images = [];
var TWELVE_SECONDS = 12000;
images[0] = 'https://i.pinimg.com/736x/ba/92/7f/ba927ff34cd961ce2c184d47e8ead9f6.jpg';
images[1] = 'https://thumbs.dreamstime.com/b/portrait-funny-cat-fly-his-nose-portrait-funny-cat-fly-his-nose-isolated-white-background-125606127.jpg';
images[2] = 'https://mymodernmet.com/wp/wp-content/uploads/2022/11/masayuki-oki-cat-street-photography-19.jpeg';
function changePicture() {
let nextImage = i++ % images.length;
document.getElementById('jumbotron').style.setProperty('--background-image', `url(${images[nextImage]}`);
setTimeout(changePicture, TWELVE_SECONDS);
}
window.onload = changePicture;
#jumbotron {
--foreground-image: '';
--background-image: '';
position: relative;
height: 100vh;
background-image: linear-gradient(to right bottom, #0d146f, transparent);
}
#jumbotron::before,
#jumbotron::after {
content: '';
position: absolute;
inset: 0px; /* top: 0; bottom: 0; left: 0; right: 0; */
background-image: var(--foreground-image);
background-position: center;
background-size: cover;
background-repeat: no-repeat !important;
z-index: -1;
}
#jumbotron::after {
background-image: var(--background-image);
z-index: -2;
}
.center {
display: inline-block;
position: relative;
margin-top: 10%;
margin-left: 20%;
text-align: center;
}
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div id="jumbotron" class="text-white">
<div class="center" slot="float: right;">
<h3>Welcome!</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
So if I expand on this code above, I will set the old visible image as a foreground image (in ::before), and then set it's opacity to 0 to fade out to the new image set in the background image (in ::after).
I also set the animation speed in code, so it's easier to just change one value rather than having to jump around between CSS and javascript if you want to change certain values.
As a bonus, I added preloading of the next image as well. You don't want to transition into an image that haven't been loaded.
var i = 0;
var images = [];
var preloadedImage = new Image();
var TWELVE_SECONDS = 12000;
var TWO_SECONDS = 2000;
images[0] = 'https://i.pinimg.com/736x/ba/92/7f/ba927ff34cd961ce2c184d47e8ead9f6.jpg';
images[1] = 'https://thumbs.dreamstime.com/b/portrait-funny-cat-fly-his-nose-portrait-funny-cat-fly-his-nose-isolated-white-background-125606127.jpg';
images[2] = 'https://mymodernmet.com/wp/wp-content/uploads/2022/11/masayuki-oki-cat-street-photography-19.jpeg';
function changePicture() {
let jumbotronEl = document.getElementById('jumbotron');
let oldImage = (i-1) % images.length;
let currentImage = i++ % images.length;
let upcomingImage = i % images.length;
if (preloadedImage.src) {
jumbotronEl.style.setProperty('--foreground-image', `url(${images[oldImage]}`);
jumbotronEl.style.setProperty('--background-image', `url(${images[currentImage]}`);
jumbotronEl.style.setProperty('--opacity-animation-duration', TWO_SECONDS + 'ms');
toggleForegroundFade();
setTimeout(toggleForegroundFade, TWO_SECONDS);
} else {
jumbotronEl.style.setProperty('--background-image', `url(${images[currentImage]}`);
}
setTimeout(() => {
preloadedImage.src = images[upcomingImage]
}, TWO_SECONDS);
setTimeout(changePicture, TWELVE_SECONDS);
}
function toggleForegroundFade() {
document.getElementById('jumbotron').classList.toggle('foreground-hidden');
}
window.onload = changePicture;
#jumbotron {
--foreground-image: '';
--background-image: '';
--opacity-animation-duration: '';
position: relative;
height: 100vh;
background-image: linear-gradient(to right bottom, #0d146f, transparent);
}
#jumbotron.foreground-hidden::before {
opacity: 0;
transition: opacity var(--opacity-animation-duration);
}
#jumbotron::before,
#jumbotron::after {
content: '';
position: absolute;
inset: 0px; /* top: 0; bottom: 0; left: 0; right: 0; */
background-image: var(--foreground-image);
background-position: center;
background-size: cover;
background-repeat: no-repeat !important;
z-index: -1;
}
#jumbotron::after {
background-image: var(--background-image);
z-index: -2;
}
.center {
display: inline-block;
position: relative;
margin-top: 10%;
margin-left: 20%;
text-align: center;
}
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div id="jumbotron" class="text-white foreground-hidden">
<div class="center">
<h3>Welcome!</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
I'm using the following code for a progress bar:
<div class="slide-progress-bar">
<div class="progress-bar" id="progress-bar"></div>
<!--progress-bar-->
</div>
<script>
var elem = document.getElementById("progress-bar");
var width = 1;
function progressBar() {
resetProgressBar();
id = setInterval(frame, 300);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width +"%";
}
}
}
function resetProgressBar() {
width = 1;
elem.style.width = width;
}
progressBar()
</script>
<style>
.slide-progress-bar {
width: 150px;
background-color:rgba(155, 155, 155, 0.36);
transition: width 10s linear;
display: inline-block;
vertical-align: middle;
margin: auto;
width: 100%;
}
.progress-bar {
height: 5px;
background-color: #ff4546;
position: relative;
transition: linear;
}
</style>
It works fine (when the page loads, progress bar starts and completes 300frames) but when I switch the tab or minimizes the window it stops and when I reopen the tab, it resumes. I don't want this top happen. I want the progress bar to continue loading even when not in focus. Is there way to do so ?, cause I saw such progress bars on may other sites.
Set Interval stops when page is minimize. You can use Date object to check how many time pass since progress bar starts loading.
<div class="slide-progress-bar">
<div class="progress-bar" id="progress-bar"></div>
<!--progress-bar-->
</div>
<script>
var animationTimeInMiliseconds = 30000; //30s
var interval = 300;
var elem = document.getElementById("progress-bar");
var beginningDate = new Date().getTime(); // Time in miliseconds
function progressBar() {
resetProgressBar();
id = setInterval(frame, interval);
function frame() {
var milisecondsFromBegin = new Date().getTime() - beginningDate;
var width = Math.floor(milisecondsFromBegin / animationTimeInMiliseconds * 100);
elem.style.width = width + "%";
if (width >= 100) {
clearInterval(id);
}
}
}
function resetProgressBar() {
elem.style.width = 0;
}
progressBar()
</script>
<style>
.slide-progress-bar {
width: 150px;
background-color:rgba(155, 155, 155, 0.36);
transition: width 10s linear;
display: inline-block;
vertical-align: middle;
margin: auto;
width: 100%;
}
.progress-bar {
height: 5px;
background-color: #ff4546;
position: relative;
transition: linear;
}
</style>
You can use css3 transitions instead of js animations to solve the problems you are facing.
You can read more about it here
Adding an example for your reference.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.slide-progress-bar {
width: 150px;
background-color:rgba(155, 155, 155, 0.36);
transition: width 10s linear;
display: inline-block;
vertical-align: middle;
margin: auto;
width: 100%;
}
.slide-progress-bar .progress-bar {
height: 5px;
background-color: #ff4546;
position: relative;
transition: linear;
animation: progres 4s infinite linear;
}
#keyframes progres{
0%{
width: 0%;
}
25%{
width: 50%;
}
50%{
width: 75%;
}
75%{
width: 85%;
}
100%{
width: 100%;
}
};
</style>
</head>
<body>
<div class="slide-progress-bar">
<div class="progress-bar"></div>
</div>
</body>
</html>
I'm trying to recreate the google image row layout because I can't find any library that can help me. It doesn't matter how many images you add or the size, the row will auto adjust. I'm pretty close except for the vertical alignment of the "Hover text". I'd like to have it in the center of the image. I read this could be done by line-height but this does not work properly when you use a longer piece of text.
Here is my code jsFiddle
<div class="image-row">
<a href="#1" class="wrapper">
<span class="text">Hover text</span>
<img src="https://source.unsplash.com/random/768x960" width="768" height="960"/>
</a>
<a href="#2" class="wrapper">
<span class="text">Hover text</span>
<img src="https://source.unsplash.com/random/1280x851" width="1280" height="851"/>
</a>
<a href="#2" class="wrapper">
<span class="text">Hover text</span>
<img src="https://source.unsplash.com/random/1600x1600" width="1600" height="1600"/>
</a>
</div>
function picRow(selector) {
masterArray = [];
// create each lineArray and push it to masterArray
$(selector).each(function () {
// get "selector" css px value for margin-bottom
// - parse out a floating point number
// - and divide by the outer width to get a decimal percentage
margin = (parseFloat($(this).css("margin-bottom"), 10)) / ($(this).outerWidth());
marginRight = margin * 100 + "%";
// subtract subtract the total child margin from the total width to find the usable width
usableWidth = (1 - ((($(this).find("img").length) - 1) * margin));
// for each child img of "selector" - add a width/height as value in the ratios array
ratios = [];
$(this).find("img").each(function () {
ratios.push(($(this).attr('width')) / ($(this).attr('height')));
});
// sum all the ratios for later divison
ratioSum = 0;
$.each(ratios, function () {
ratioSum += parseFloat(this) || 0;
});
lineArray = [];
$.each(ratios, function (i) {
obj = {
// divide each item in the ratios array by the total array
// as set that as the css width in percentage
width: ((ratios[i] / ratioSum) * usableWidth) * 100 + "%",
height: ((ratios[i] / ratioSum) * usableWidth) * 100 + "%",
// set the margin-right equal to the parent margin-bottom
marginRight: marginRight
};
lineArray.push(obj);
});
lineArray[lineArray.length - 1].marginRight = "0%";
// alert(lineArray[lineArray.length - 1].marginRight);
masterArray.push(lineArray);
});
$(selector).each(function (i) {
$(this).find("img").each(function (x) {
$(this).css({
"width": masterArray[i][x].width,
"margin-right": masterArray[i][x].marginRight
});
});
$(this).find(".text").each(function (x) {
var imgHeight = $(this).parent().find("img").height();
//console.log(imgHeight)
$(this).css({
"width": masterArray[i][x].width,
"height": imgHeight,
"margin-right": masterArray[i][x].marginRight
});
});
});
}
$(document).ready(function () {
picRow(".image-row");
});
$( window ).resize(function() {
picRow(".image-row");
});
html, body {
height: 100%;
}
.image-row {
width: 100%;
margin: 1% 0;
}
.image-row img {
width: 100%;
height: auto;
display: block;
font-size: 0;
float: left;
}
.image-row::after {
content: "";
display: table;
clear: both;
}
*{
box-sizing: border-box;
}
.wrapper {
position: relative;
padding: 0;
/*width:100px;*/
display:block;
}
.text {
position: absolute;
top: 50%;
/*line-height: 441px;*/
color:#9CBDBE;
font-weight:bold;
font-size:100%;
background-color:#fff;
width: 100px;
text-align: center;
padding: 1%;
z-index: 10;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.text:hover {
opacity:0.8;
}
img {
z-index:1;
}
People tell me this is possible without jQuery and just using CSS but then I lose all the responsiveness..
You can add this following code to your .text class in your css :
.text {
position: absolute;
top: 50%;
line-height: 150px;
color:#9CBDBE;
font-weight:bold;
font-size:17px;
background-color:#fff;
width: 100px;
text-align: center;
padding: 1%;
z-index: 10;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
Here is the jsfiddle https://jsfiddle.net/jfgnta38/1/
Also, if i may, you should learn flexbox which is a really useful "tool" to put your element where you want.
Please find below code
<div class="image-row">
<a href="#1" class="wrapper">
<img src="https://source.unsplash.com/random/768x960" width="768" height="960"/>
<div class="overlay">
<div class="text">Hover</div>
</div>
</a>
<a href="#2" class="wrapper">
<img src="https://source.unsplash.com/random/1280x851" width="1280" height="851"/>
<div class="overlay">
<div class="text">Hover</div>
</div>
</a>
<a href="#2" class="wrapper">
<img src="https://source.unsplash.com/random/1600x1600" width="1600" height="1600"/>
<div class="overlay">
<div class="text">Hover</div>
</div>
</a>
</div>
--- Jquery
function picRow(selector) {
masterArray = [];
// create each lineArray and push it to masterArray
$(selector).each(function () {
// get "selector" css px value for margin-bottom
// - parse out a floating point number
// - and divide by the outer width to get a decimal percentage
margin = (parseFloat($(this).css("margin-bottom"), 10)) / ($(this).outerWidth());
marginRight = margin * 100 + "%";
// subtract subtract the total child margin from the total width to find the usable width
usableWidth = (1 - ((($(this).find("img").length) - 1) * margin));
// for each child img of "selector" - add a width/height as value in the ratios array
ratios = [];
$(this).find("img").each(function () {
ratios.push(($(this).attr('width')) / ($(this).attr('height')));
});
// sum all the ratios for later divison
ratioSum = 0;
$.each(ratios, function () {
ratioSum += parseFloat(this) || 0;
});
lineArray = [];
$.each(ratios, function (i) {
obj = {
// divide each item in the ratios array by the total array
// as set that as the css width in percentage
width: ((ratios[i] / ratioSum) * usableWidth) * 100 + "%",
height: ((ratios[i] / ratioSum) * usableWidth) * 100 + "%",
// set the margin-right equal to the parent margin-bottom
marginRight: marginRight
};
lineArray.push(obj);
});
lineArray[lineArray.length - 1].marginRight = "0%";
// alert(lineArray[lineArray.length - 1].marginRight);
masterArray.push(lineArray);
});
$(selector).each(function (i) {
$(this).find("img").each(function (x) {
$(this).parent().css({
"width": masterArray[i][x].width,
"margin-right": masterArray[i][x].marginRight
});
});
});
}
$(document).ready(function () {
picRow(".image-row");
});
$( window ).resize(function() {
picRow(".image-row");
});
-- CSS
html, body {
height: 100%;
}
.image-row {
width: 100%;
margin: 1% 0;
}
.image-row img {
width: 100%;
height: auto;
display: block;
font-size: 0;
float: left;
}
.image-row::after {
content: "";
display: table;
clear: both;
}
*{
box-sizing: border-box;
}
.wrapper {
position: relative;
padding: 0;
display: block;
font-size: 0;
float: left;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #fff;
}
.wrapper:hover .overlay {
opacity: 0.8;
}
.text {
color: #000;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
img {
z-index:1;
}
** Please replace above code then it will achieve your requirement easily.
You can try using bootstrap https://getbootstrap.com/docs/4.0/layout/grid/ to get it done
I am making a slider and am having a few issues.
1) On first slide the animation doesn't animate.
2) The spacing for the last box is off in the beggining but as the slider progresses it corrects.
3) Sometimes the animations have some stuttering.
I have put this in a codepen here:
http://codepen.io/mpaccione/pen/MyJNxM
Any advice is much appreciated. I am unsure why these issues are arising. I am using css transitions for the animation and javascript/jquery to change the css/dom/calcs.
CODE
<style type="text/css">
html,body {
margin: 0;
background-color: #888;
height: 100%;
width: 100%;
box-sizing: border-box;
}
#slider {
width: 100%;
height: 100%;
display: block;
position: relative;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}
#slider ul {
padding: 0;
margin: auto;
display: block;
top: 50%;
position: relative;
transform: translateY(-50%);
white-space: nowrap;
}
#slider li {
display: inline-block;
height: 150px;
width: 150px;
margin: 10px;
}
.sliderContainer {
width: 60%;
height: 200px;
overflow: hidden;
background-color: white;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: relative;
}
</style>
<div class="sliderContainer">
<div id="slider">
<ul>
<li style="background-color: red">a</li>
<li style="background-color: green">b</li>
<li style="background-color: blue">c</li>
<li style="background-color: orange">d</li>
<li style="background-color: purple">e</li>
<li style="background-color: yellow">f</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(document).on("ready", function(){
var slider = $("#slider"),
sliderWidth = slider.outerWidth(true),
img = slider.find("li"),
imgWidth = img.outerWidth(true),
imgCount = img.length,
imgSize = sliderWidth/imgCount,
imgHorMargin = parseFloat(img.css("margin-left")) + parseFloat(img.css("margin-right")),
imgVerMargin = parseFloat(img.css("margin-bottom")) + parseFloat(img.css("margin-top")),
imgSizeX = (imgSize-imgHorMargin),
imgSizeY = (imgSize-imgVerMargin);
slider.find("li").css({"width": imgSizeX, "height": imgSizeY});
(function slideActivate(){
setTimeout(function loop(){
slider.css("transition-duration", "0.5s");
slider.css("left",-imgSize);
setTimeout(function(){
console.log("timeout2");
firstImage = slider.find("li")[0];
firstImage.remove();
slider.css("transition-duration", "0s");
slider.css("left", "0px");
setTimeout(function(){
console.log("timeout3");
slider.find("ul").append(firstImage);
requestAnimationFrame(slideActivate);
}, 100);
}, 500);
}, 2000);
})();
});
</script>
Turns out that the margin issue was do to the browser rendering space as the elements were inline-block. Browsers add uneditable spacing.
The best solution I have found is to make the parent of the ul to have font-size:0.
The second issue was the first slide not animating which was because I did not have an initial css left value set to animate from.
so I have some images and I would like to show them as a slideshow in the background. However, I want the image to cross-fade between the current image and the next image. So far, I have only been able to switch between the images:
$(document).ready(function () {
var images = ["landing_background_1.jpg", "landing_background_2.jpg", "landing_background_3.jpg", "landing_background_4.jpg"];
var currentImage = 0;
function changeBackgroundImage() {
$("html").fadeIn().css({
"background-image": "url('img/backgrounds/" + images[++currentImage] + "')",
});
if (currentImage >= images.length - 1) {
//set it back to the begining
currentImage -= images.length;
}
}
setInterval(changeBackgroundImage, 1500);
});
Any help would be much appreciated! :)
What you have to do is layer two element on top of each other. Then have one fadeout and the other fadein.
Here is how I would go about doing it ...
css ...
#background-images {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
#bImg1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
background: url(starting-img1.jpg) no-repeat;
background-size: contain;
}
#bImg2 {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background: url(starting-img2.jpg) no-repeat;
background-size: contain;
}
.container {
width: 960px;
height: 900px;
background: rgba(255,255,255,.7);
margin: auto;
position: relative;
z-index: 10;
}
The html ...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<html>
<body>
<div id="background-images">
<div id="bImg1"></div>
<div id="bImg2"></div>
</div>
<div class="container">
Content Here
</div>
</body>
</html>
The script ...
var imageSet1 = ["image1.jpg", "image2.jpg", "image3.jpg"];
var currentImageSet1 = 0;
var imageSet2 = ["image4.jpg", "image5.jpg", "image6.jpg"];
var currentImageSet2 = 0;
function changeBackgroundImages() {
img1Fade();
setTimeout(img2Fade, 2000);
}
function img1Fade(){
$('#bImg1').fadeOut('slow', function(){$('#bImg1').css({background: 'url(' + imageSet1[++currentImageSet1] + ')'})});
$('#bImg2').fadeIn('slow');
if (currentImageSet1 >= imageSet1.length - 1) {
currentImageSet1 -= imageSet1.length;
};
}
function img2Fade(){
$('#bImg2').fadeOut('slow', function(){$('#bImg2').css({background: 'url(' + imageSet2[++currentImageSet2] + ')'})});
$('#bImg1').fadeIn('slow');
if (currentImageSet2 >= imageSet2.length - 1) {
currentImageSet2 -= imageSet2.length;
};
}
$(document).ready(function(){
setInterval(changeBackgroundImages, 5000);
});
You will need to mess with the timing to get it to look good. Make sure to set your urls to the images in the image array or when the sting in the css is built.
I've spent a lot of time to find the most clean and easy way.
This finally works:
var i=0;
var imghead=[
"url(http://yoururl.com/picture0.jpg)",
"url(http://yoururl.com/picture1.jpg)"
];//add as many images as you like
function slideimg() {
setTimeout(function () {
jQuery('#element').css('background-image', imghead[i]);
i++;
if(i==imghead.length) i=0;
slideimg();
}, 6000);
}
slideimg();
#element{
height: 100%;
overflow: hidden;
opacity: 1.0;
-webkit-transition: background-image 1.5s linear;
-moz-transition: background-image 1.5s linear;
-o-transition: background-image 1.5s linear;
-ms-transition: background-image 1.5s linear;
transition: background-image 1.5s linear;
}
Easier:
var current = 1;
function anim() {
if(current == 4) {current = 1; }
$('#bImg'+ current).fadeOut(3000);
++current;
$('#bImg'+ current).fadeIn(3000);
setTimeout(anim, 8000);
}
anim();
html:
<div class="inside" >
<div id="bImg2"></div>
<div id="bImg3"></div>
</div>
css:
.inside {
background:url(top_01.jpg) no-repeat center top ;
}
#bImg2 {
position: absolute;
top: 0px;
width: 100%;
background:url(top_02.jpg) no-repeat center top ;
display: none;
}
#bImg3 {
position: absolute;
top: 0px;
width: 100%;
background:url(top_03.jpg) no-repeat center top ;
display: none;
}