How to animate through stacked images Javascript - javascript

I have a series of images that are "stacked" inside of div. I want to transition (crossfade) between these images (not using jQuery), with CSS transitions. What I do not know how to do is endlessly transition between the images. The images are added dynamically through a JSON feed, and they will continue to be added so the number of images in the divs is not set.
I was thinking an approach using the z-index to bring images on top of each other (and then animate the opacity and other properties) but if I want to animate through 4 photos, I am not sure how to keep track of z-index and the opacity settings, to know which is showing. Here is what I came up with so far, but I would be interested in how people cycle through a potentially unknown number of images and keep track of what is "shown". Basically, I have a simple CSS Transition set on the images right now and am animating by adding and removing classes and I want to be able to create a cycle that goes through the images, changing the z-index and some property, and then later send it to the back of the group.
HTML
//Example div (on my page there are many of these)
<div class="imageHolder">
<div class="imageContent">
<img class="homeImages" src="media/test.png">
<img class="homeImages" src="media/test1.png">
<img class="homeImages" src="media/test2.png">
</div>
</div>
CSS
div.imageHolder {
float: left;
position: relative;
width: 32.9%;
padding-bottom: 18.6%;
margin-right: .1em;
}
div.imageContent {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
div img {
width: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1
}
div img.newImage {
z-index: 2;
opacity: 0;
}
div img.live {
z-index: 3;
opacity: 1;
transition: opacity 1s ease-in;
}
Javascript
function select() {
var x = Math.floor(Math.random() * divs.length);
if(divs[x].children.length > 1) {
var live = document.querySelector('div img.live');
var old = document.querySelector('div img.newImage');
live.className = 'newImage';
old.className += ' live';
}
}

You need js, at least to keep track of which is the current image and add a class that triggers the css transition.
If I understand correctly, you've almost got it. Try this
function select() {
var x = Math.floor(Math.random() * divs.length),
current = document.querySelector('.imageContent img.live'),
newOne = document.querySelectorAll('.imageContent img')[x];
current.className = ''; // clear the .live class
newOne.className = 'live';
// this triggers the css transition
setTimeout(select, 1000); // after the css transition ends, do this again
}
And change the css to
div img {
width: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* moved .newImage styles here as a default */
z-index: 2;
opacity: 0;
}

Related

Uneven intervals with setInterval function due to other code running between intervals;

I am trying to have a div do a simple slide into a parent div in a React project using pure JS and am having problems with the smoothness of the slide. When I console log, I can see that when the code (slideIn) runs, between setInterval calls, React runs other code which take up more time than the specified intervals. Therefore, the intervals are not even, which seems to be causing the jerkiness in the slide.
I have tried requestAnimationFrame also, but the result is the same.
The challenge seems to be to make the slideIn continuous without having react run other code while running it, but how does one do that?
<div className="outer-box">
<div className="sliding-box"></div>
</div>
.outer-box {
width: 300px;
height: 200px;
position: relative;
}
.sliding-box {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
slideIn() {
const moveElemment = document.getElementById('sliding-box');
const pos = -100;
if (moveElemment) {
const id = setInterval(frame, 10);
function frame() {
if (pos == 0) {
clearInterval(id);
} else {
pos++;
moveElemment.setAttribute('style', `left: ${pos}%`);
}
}
}
}
Perphas you could take advantage of CSS transitions to achieve smoother animation that is decoupled from the JS thread, to resolve your problem? For example, you could update your CSS with a transition rule and additional selector as follows:
.sliding-box {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: -100px; // Initial position of sliding-box
transition: left 1s linear; //Specify the animation behaviour
}
.sliding-box.in {
left: 0px; // Position of sliding-box after animation
}
with simplified JS to trigger the transition animation as follows:
slideIn() {
const moveElemment = document.getElementById('sliding-box');
if (moveElemment) {
// When this selector is added, it triggers the animation
// transition from left:-100px to left:0px over a 1 second
// interval
moveElemment.classList.add('in');
}
}

How to click on link from array with effect?

I'm trying about effect like "news", where the text will every 5 second fadeOut and next text will show on previous position. But, i have link in arrays and i cant click on it and select it too. Like the text wouldnt be text and be image or slider.
Here is my code:
$(document).ready(function() {
var pages = ["<li class='active'><a id='click' href='http://www.seznam.cz'>link1</a></li>", "<li class='active'><a href='#'>link2</a></li>", "<li class='active'><a href='#'>link3</a></li>"]
var index = 0;
setInterval(function() {
$("#ul_news").html(pages[index]);
index++;
if (index >= pages.length){
index = 0;
}
$(".active").delay(4000).fadeOut(1000);
}, 5000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ul_news">
</ul>
Here it's working, but it doesnt work on my website: My Website
Can you tell me what is different between this code and code on my website?
It's not working because there's a div overlapping it. (<div class="Menu">)
Change the height of .Menu to the proper height instead of 768px.
.Menu {
height: 80px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 18;
}
In your website <div class="menu"> is overlapping the links , set the height of .Menu to auto
.Menu {
height: auto;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 18;
}

How to make fixed navbar transparent based on page scroll?

I want mynavbar to be transparent when the page is scrolled to the top, however when the user scrolls I would like it to be made opaque. I tried this with javascript, but something still isn't working.
http://jsfiddle.net/6A6qy/
function myFunction() {
if ($(window).scrollTop() < 50) {
document.getElementById("masthead").style.opacity = "0.5";
}
}
#masthead {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 50px;
background-color: #00a087;
opacity: 1;
}
#container {
background-color: blue;
height: 1000px;
display: block;
margin-top: -50px;
}
<body onload="myFunction()">
<nav id="masthead">
<!-- Fixed navigation bar content -->
</nav>
<div id="container"></div>
</body>
How about this:
JS:
// listen for scroll
$(window).scroll( function() {
// apply css classes based on the situation
if ($(".masthead").offset().top > 100) {
$(".masthead").addClass("navbar-scrolled");
} else {
$(".masthead").removeClass("navbar-scrolled");
}
}
CSS:
.navbar-scrolled {
/* some css for navbar when scrolled */
}
JSFiddle example:
http://jsfiddle.net/8ruwnaam/
And then of course you could add some optimization to not apply the classes all the time if they are already there. But it works quite fine without such things as well.
Additional things:
The first version of this answer and your question use IDs for styling, which is not really a good idea according to a lot of people. Styling IDs goes against the DRY principles, and causes all these funny little problems when you forget to think about CSS specificity. IDs are quite alright for a lot of things when it comes to the logic in the JS or something, but try to use classes for styling.
You should create an .opaque css class and attach it based on actively scrolling or if scrollTop is < 50:
.opaque {
opacity: 0.5;
}
Then attach that class on('scroll') or at scrollTop (this is using the debounce plugin):
function myFunction() {
var $masthead = $('#masthead')
, $window = $(window);
// currently scrolling
$window.scroll($.debounce( 250, true, function(){
$masthead.addClass('opaque');
}));
// done scrolling
$window.scroll($.debounce( 250, function(){
// if at the top, add or keep opaque class
if($(this).scrollTop() < 50) {
if(!$masthead.hasClass('opaque')) {
$masthead.addClass('opaque');
}
} else {
$masthead.removeClass('opaque');
}
}));
}
You need to set it to be transparent by default (as it will be on the top) like that
#masthead {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 50px;
background-color: #00a087;
opacity: 0.5; /*edited the opacity to be 50% by default*/
}
then use this script to achieve your needs:
$(document).ready(function () {
$(window).scroll(function(){
var ScrollTop = parseInt($(window).scrollTop());
if (ScrollTop < 100) {
document.getElementById("masthead").style.opacity = "0.5";
} else {
document.getElementById("masthead").style.opacity = "1";
}
});
});

Styles apply just to first two slides

I 'm trying to do kind of slideshow on the background using two img tags. I have a couple of random images, so I have a javascript function to get a random name. But the main problem is: when I zoom or resize window first two slides crop well and display without any problem, but after that every slide is changing if I try to resize the window or zoom in-out.
Here you can see that bug: cullycross.github.io(nevermind about big images, im gonna resize them)
Here is my code:
function randomBackground () {
var active = $('#background .active');
var next = ($('#background .active').next().length > 0) ? $('#background .active').next() : $('#background img:first');
next.attr('src', getRandomName());
var imgHeight = next.height();
var windowHeight = $(window).height();
var diff = imgHeight - windowHeight;
if(diff > 0) {
next.css('top', -diff*0.6);
}
next.css('z-index', 2);
active.fadeOut(1500, function() {
active.css('z-index', 1).show().removeClass('active');
next.css('z-index', 3).addClass('active');
})
}
window.onload = function() {
$('#background .active').attr('src', getRandomName());
$('#background').fadeIn(1500);
setInterval(randomBackground, 5000)
}
Here is css:
#background {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
overflow: hidden;
}
#background img {
position: absolute;
z-index: 1;
float: left;
bottom: 0px;
left: 0px;
top: 0px;
height: auto;
width: 100%;
}
#background img.active {
z-index: 3;
}
Here is part of html:
<div id="background">
<img id="current-image" class="active" />
<img id="next-image" />
</div>
It seem to affect only the images loaded after first run.
Try adding images directly into html, using a
<ul><li><img ...></li></ul>
structure, and get the image from there.
You should decrease the fadeout delay. The problem is caused from the browser since the delay is big it can't handle both fadeout and zoom in/out
active.fadeOut(300, function() {
active.css('z-index', 1).show().removeClass('active');
next.css('z-index', 3).addClass('active');
})
And try to use light size pictures, with the same aspect ratio
I didn't found an answer, but I found a library, that makes possible that thing, that I want. Thx to https://github.com/srobbin/jquery-backstretch

Changing the mask height depending on a responsive image

Having a problem in trying to copy the height of a responsive image to my mask on first load and on every time the window is resized. I've tried a few js scripts, but still I cant make it happen.
It is really a responsive image slider with a div(mask) exactly over it whatever the viewport screen size is.
this is my jQuery script:
function maskInit(){
var offsetDots = $("#slide").offset().top + $("#slide").height() + "px";
$("#mask").height() = offsetDots;
}
$(document).ready(function() {
maskInit();
});
$(window).resize(function(){
maskInit();
});
and my CSS:
#slide{
height: 10vw; /* to simulate a responsive image */
width: 100%;
margin: 0;
padding: 0;
background: red;
z-index: 0;
}
#mask{
position: absolute;
z-index: 1;
top: 0;
right: 0;
left: 0;
background: gray;
opacity: 0.8;
}
I've setup a jsFiddle here to simulate my problem
There is something wrong with your script.
You are NOT setting the mask height with this:
$("#mask").height() = offsetDots;
Check jQuery .height()
Instead use it this way:
$("#mask").height(offsetDots);
or you can set via css:
$("#mask").css({"height":offsetDots});
Here's your updated jsFIDDLE demo
.height() is a function so you can not do $("#mask").height() = offsetDots; use $("#mask").height(offsetDots); or by .css({"height":offsetDots}) to set height.

Categories