I've coded a show/hide for a list of items as seen here https://jsfiddle.net/qbxtkyzu/. I'm trying to animate (slide In and Out) the same items instead of just having them pop in and out.
<div id="main">
<div>
Base Text /
</div>
<div id="1" class="trip">Item1</div>
<div id="2" class="trip">Item2</div>
</div>
and the javascript:
var $elem = $('#main .trip'), l = $elem.length, i = 0;
function go() {
$elem.eq(i % l).delay(5000).show(30, function() {
$elem.eq(i % l).delay(5000).fadeOut(30, go);
i++;
})
}
go();
and the css:
.trip { display: none}
The first parameter both show and fadeOut functions get is the time (in milliseconds) to run the animation.
In you case - you have 30, which are 30 milliseconds - pretty fast.
If you change that to (lets say) 1000, you will see the animation:
var $elem = $('#main .trip'), l = $elem.length, i = 0;
function go() {
$elem.eq(i % l).delay(2000).show(1000, function() {
$elem.eq(i % l).delay(2000).fadeOut(1000, go);
i++;
})
}
go();
.trip { display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div>
Born To /
</div>
<div id="1" class="trip">Item1</div>
<div id="2" class="trip">Item2</div>
</div>
I'd just use CSS transitions for this. So
.trip{
transition: opacity 1s;
opacity: 0;
}
.trip.show{
opacity: 1;
}
Then just add the class "show" to the elements rather than animating them in JS.
If you're looking for it to slide in from the left, you could probably do something like this:
.wrapper {
position: relative;
}
.trip {
transition: left 2s;
position:absolute;
left: -100%;
}
.trip.visible {
left: 0;
}
https://jsfiddle.net/xs7b6hxe/
Related
I am looking to have divs fade in/out when you scroll up/down on my Wordpress site. Variations of this have been found online but not quite what I am looking for.
The code I have managed so far
css
.fade-in-section {
opacity: 0;
transform: translateY(20vh);
visibility: hidden;
transition: opacity 0.6s ease-out, transform 1.2s ease-out;
will-change: opacity, visibility;
}
.fade-in-section.is-visible {
opacity: 1;
transform: none;
visibility: visible;
}
java (although not Wordpress written):
function FadeInSection(props) {
const [isVisible, setVisible] = React.useState(true);
const domRef = React.useRef();
React.useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible(entry.isIntersecting));
});
observer.observe(domRef.current);
return () => observer.unobserve(domRef.current);
}, []);
return (
<div
className={`fade-in-section ${isVisible ? 'is-visible' : ''}`}
ref={domRef}
>
{props.children}
</div>
);
}
( sandbox code and original author here: https://codesandbox.io/s/beautiful-wiles-k23w5?from-embed )
This works perfectly scrolling down, but I would like the same animation/transitioning scrolling up (only 2/3 divs would be visible in the middle of the screen)
Looking for the right approach, help looking for resources to accomplish this.
Try using my solution. Give fade class to elements you want wo fade in/out and apply this:
$(document).ready(function() {
$(window).scroll(function() {
var windowBottom = $(this).scrollTop() + $(this).innerHeight();
$(".fade").each(function() {
/* Check the location of each desired element */
var objectBottom = $(this).offset().top + $(this).outerHeight();
/* If the element is completely within bounds of the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
if ($(this).css("opacity")==0) {
$(this).fadeTo(500,1);
}
}else{
if ($(this).css("opacity")==1) {
$(this).fadeTo(500,0);
}
}
});
});
});
.fade {
margin: 50px;
padding: 50px;
background-color: red;
opacity: 0;
width: 150px;
height: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fade"></div>
<div class="fade"></div>
<div class="fade"></div>
<div class="fade"></div>
<div class="fade"></div>
<div class="fade"></div>
<div class="fade"></div>
jQuery(window).scroll(function () {
var y = jQuery(this).scrollTop();
if (y > 500) {
jQuery('.a2a_floating_style.a2a_vertical_style').show();
} else {
jQuery('.a2a_floating_style.a2a_vertical_style').fadeOut();
}
});
Okay okay, so before marking this post as repeated. Let me explain to you:
I made a slideshow in javascript(Vue) and it works by changing its src in an object every time I press a button(next)
It works and all but the problem is that it doesn't get animated no matter what I do, I made a transition on them, set timeout function on it...etc and nothing even the smallest worked.
I could have made another idea which works by the position absolute but I don't want to do that because it will take a loot of time and it will be extremely buggy as position absolute ruins it. So any help on this please?
<template>
<main>
<div id="slideshow">
<figure id="pics">
<img id="slidepic" v-bind:src="pictures[count].src">
<figcaption>{{pictures[count].alt}}</figcaption>
</figure>
</div>
<p>{{count+1}}/{{pictures.length}}</p>
<div id="controls">
<div #click="move(-1)">Previous</div>
<div #click="move(1)">Next</div>
</div>
</main>
Javascript:
methods: {
move: function(num) {
let slideimg = document.querySelector("#slidepic");
slideimg.classList.add("fadeOut");
this.count += num;
if (this.count < 0) {
this.count = this.pictures.length - 1;
} else if (this.count >= this.pictures.length) {
this.count = 0;
}
setTimeout(function() {
slideimg.src = this.pictures[1].src;
}, 1000);
}
}
CSS:
#pics {
opacity: 0.5s;
transition: 0.5s;
}
#pics.fadeOut {
opacity: 1;
}
I didn't include the object(that is in data object, something in Vue) because it would be useless in this situation.
First off all it's transition: <property-name> 0.5s linear; and not transition: 0.5s;. See the transition documentation.
There is no animation for changing the src of an image (see list of animatable css properties).
To do something like this, you can stack all your images into one element and then use css animations and the transform property to create a carousel
var next = document.getElementById('next');
var prev = document.getElementById('prev');
var slideshow = document.getElementById('slideshow');
next.onclick = function() {
var lastChild = slideshow.children[slideshow.children.length - 1];
var firstChild = slideshow.children[0];
var activeEle = document.querySelector('.item.active');
var nextEle = document.querySelector('.item.next');
var prevEle = document.querySelector('.item.prev');
activeEle.classList.remove('active');
activeEle.classList.add('prev');
nextEle.classList.add('active');
nextEle.classList.remove('next');
prevEle.classList.remove('prev');
if (nextEle.nextElementSibling) {
nextEle.nextElementSibling.classList.add('next');
} else {
firstChild.classList.add('next');
}
};
prev.onclick = function() {
var lastChild = slideshow.children[slideshow.children.length - 1];
var activeEle = document.querySelector('.item.active');
var nextEle = document.querySelector('.item.next');
var prevEle = document.querySelector('.item.prev');
// Move the .active class to the previous element
activeEle.classList.remove('active');
activeEle.classList.add('next');
prevEle.classList.add('active');
prevEle.classList.remove('prev');
nextEle.classList.remove('next');
if (prevEle.nextElementSibling) {
prevEle.nextElementSibling.classList.add('prev');
} else {
lastChild.classList.add('prev');
}
};
#slideshow {
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
}
.item {
width: 100%;
height: 100%;
color: white;
background-color: blue;
position: absolute;
/*display: none;*/
top: 0;
left: 0;
z-index: -100;
transition: translateX(-100%);
transition: transform .5s ease-in-out;
opacity: 0;
}
.active {
opacity: 1;
display: block;
z-index: 1;
transform: translateX(0);
}
.next {
transform: translateX(200%);
z-index: 1;
}
.prev {
transform: translateX(-100%);
opacity: 1;
z-index: 1;
}
<div id="slideshow">
<div class="item active">1</div>
<div class="item next">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item prev">7</div>
</div>
<button type="button" id="prev">Prev</button><button type="button" id="next">Next</button>
As you mention you want to build a slideshow on Vue JS, and because jQuery on top of Vue is not recommended, I suggest that you try Vueper Slides, available on NPM. Unless it is for a learning purpose.
I have created two solutions.
First of all. You've a typo.
#pics {
opacity: 0.5s; // <--- remove "s"
transition: 0.5s; // <--- and forgot the property-name (all, opacity ...)
}
#pics.fadeOut {
opacity: 1;
}
I commented all lines I've changed.
Solution
<template>
<main>
<div id="slideshow">
<!--
I recommend to you ref inestad of querySelector.
https://vuejs.org/v2/api/#ref
I've used the v-bind shorthand.
-->
<figure id="pics1" ref="pics1">
<img id="slidepic" :src="pictures[count].src">
<figcaption>{{pictures[count].alt}}</figcaption>
</figure>
<!--
VueJS build-in transition element.
You have to add a key attribute to detect that the content has changed.
I recommend to use this instead of your solution.
It's easier to implement, no class add/remove struggle, its a part of vue, you can add hooks etc.
https://vuejs.org/v2/guide/transitions.html
-->
<transition tag="figure" name="fade" ref="pics2">
<figure id="pics2" :key="`figure-${count}`">
<img :src="pictures[count].src">
<figcaption>{{pictures[count].alt}}</figcaption>
</figure>
</transition>
</div>
<p>{{count+1}}/{{pictures.length}}</p>
<div id="controls">
<div #click="move(-1)">Previous</div>
<div #click="move(1)">Next</div>
</div>
</main>
</template>
<script>
export default {
name: 'teams',
data() {
return {
count: 0,
pictures: [
{
src: 'https://picsum.photos/200/300',
alt: 'test'
},
{
src: 'https://picsum.photos/200/400',
alt: 'test2'
}
]
};
},
methods: {
// instead of move: function(num) {} you can also write move() {}
move(num) {
this.count += num;
if (this.count < 0) {
this.count = this.pictures.length - 1;
} else if (this.count >= this.pictures.length) {
this.count = 0;
}
}
},
// Watch "count" changes and add or remove classes
// you can also add this to your "move" method
watch: {
count() {
// access the reference
const element = this.$refs.pics1;
element.classList.add('fadeOut');
element.classList.remove('fadeIn');
setTimeout(() => {
element.classList.remove('fadeOut');
element.classList.add('fadeIn');
}, 500); // same duration as css transition
}
}
};
</script>
<style scoped lang="scss">
#pics1 {
opacity: 1;
transition: opacity 0.5s;
}
#pics1.fadeIn {
opacity: 1;
}
#pics1.fadeOut {
opacity: 0;
}
// All classes for <transition>
// There are all automatically used by vue
.fade-enter-active {
transition: opacity 0.5s;
}
.fade-leave {
display: none;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
I have two different contents, I want to show the contents as marquee in single line and the contents should display one after another with some delay time duration.
<marquee direction="left">
<label>Label 1 content here</label>
<label>Label 2 content here</label>
</marquee>
Here is my solution, without <marquee> tag, which is deprecated now:
//list of slides to be shown
const content = [
'first slide',
'second slide',
'third slide'
];
let key = 0;
const marquee = $('.marquee');
marquee.on('animationstart', () => {
key = 0;
marquee.text(content[key]);
});
marquee.on('animationiteration', () => {
key++;
if(typeof content[key] === 'undefined') key = 0;
marquee.text(content[key]);
});
marquee.removeClass('paused');
.marquee-container {
width: 100vw;
overflow: hidden;
white-space: nowrap;
}
.marquee {
padding-left: 100vw;
display: inline-block;
animation: marquee 5s linear infinite;
animation-play-state: running;
}
.marquee.paused, .marquee-container:hover .marquee {
animation-play-state: paused;
}
#keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="marquee-container">
<div class="marquee paused"></div>
</div>
Instead of using <marquee> and <label> tags (which you shouldn't use in this context), please try using JavaScript this way:
$(function () {
$(".slider .slide").hide();
$(".slider .slide:first").fadeIn().delay(10000).fadeOut(function () {
$(this).next().fadeIn();
});
setInterval(function () {
$(".slider .slide:first").fadeIn().delay(10000).fadeOut(function () {
$(this).next().fadeIn();
});
}, 20000);
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="slider">
<div class="slide"><marquee>Label 1 content here</marquee></div>
<div class="slide"><marquee>Label 2 content here</marquee></div>
</div>
The above is a bare minimal demonstration of what you might like. Let me know if you need more improvement on this. ☺
You may use this way, without marquee, basing on jquery queue and adding a css class to your elements:
$(function () {
var current_button = 0;
$('div.slider .slide:first')
.show(100)
.addClass('active');
setInterval(function() {
if(current_button===$('.slide').length) {
$('div.slider .slide:first')
.show(100)
.addClass('active');
current_button=0;
} else {
$('div.slider .slide')
.hide(100)
.removeClass('active');
$('div.slider .slide:eq(' + current_button + ')')
.show(100)
.addClass('active');
current_button++;
}
},3500)
});
.slide {
float: left;
transform: translateX(400%);
transition: all 7s;
}
.active {
transform: translateX(-350%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slider">
<div class="slide">Label 1 content here</div>
<div class="slide">Label 2 content here</div>
</div>
EDIT: I think there is a better way, but I try a solution in the code above.
Hope it helps
have 3 images using JavaScript am making them to slide from left to right for the body background of html but the images are just appearing is there any thing i have to do so that they smoothly slide.
FYI: I have added a div to Preview.
Hear is the
JSFiddle
var bgArr = [
"http://foxarc.com/en/cfxs/images/masks.jpg",
"http://foxarc.com/en/cfxs/images/brushes.jpg",
"http://foxarc.com/en/cfxs/images/text.jpg"
];
var i = 0;
// Start the slide show
setInterval(function() {
$("#demo").css("background-image", "url(" + bgArr[i] + ")");
(i < bgArr.length - 1) ? i++ : i = 0
}, 2000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div
id="demo"
style="text-align:center;
width:90%;
height:310px;
overflow:hidden;
border-style:dashed;
border-width:1px;">
<p style="margin-top:83px;"></p>
</div>
I think the best solution is to create 2 divs inside of body
<div class="background-1"></div>
<div class="background-2"></div>
and put them under it
body {
position: relative;
background: transparent;
overflow-x: hidden;
}
.background-1, .background-2 {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
Then create a custom slider
$(document).ready(function(){
var bgArr = ["http://foxarc.com/en/cfxs/images/masks.jpg",
"http://foxarc.com/en/cfxs/images/brushes.jpg",
"http://foxarc.com/en/cfxs/images/text.jpg"];
var i = 0;
var $bg1 = $('.background-1').css('background-image', 'url('+bgArr[0]+')')
.css('left', '0%');
var $bg2 = $('.background-2').css('background-image', 'url('+bgArr[1]+')')
.css('left', '-100%');
var bgSlide = function($bg) {
$bg.animate({ left: '+=100%' }, 600, function(){
if(parseInt($bg.css('left')) > 0) {
$bg.css('left', '-100%');
(i < bgArr.length-1) ? i++ : i=0;
$bg.css("background-image", "url("+bgArr[i]+")");
}
} );
}
setInterval(function() {
bgSlide($bg1);
bgSlide($bg2);
}, 2000);
});
Example: jsfiddle
See this example https://jsfiddle.net/kevalbhatt18/0Lr9uvt0/1/ with animate()
without animate() : https://jsfiddle.net/kevalbhatt18/0Lr9uvt0/2/
What is .animate()
See this example https://jsfiddle.net/kevalbhatt18/0Lr9uvt0/5/ in this example i use jquery ui for left right effect
$('.test').css({
'background-image': "url('" + bgArr[i] + "')"
});
(i < bgArr.length - 1) ? i++ : i = 0
}, 2000);
And apply css
.test{
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
}
I am having four classes inside each class a image is called
<div id="ban01" class="banner ban01">
</div>
<div id="ban02" class="banner ban02">
</div>
<div id="ban03" class="banner ban03">
</div>
<div id="ban04" class="banner ban04">
</div>
and my css class contains
.ban01 { background-image:url(../images/banner/01.jpg); }
.ban02 { background-image:url(../images/banner/02.jpg); }
.ban03 { background-image:url(../images/banner/03.jpg); }
.ban04 { background-image:url(../images/banner/04.jpg); }
and my Jquery is
$(document).ready(function () {
var totDivs = $(".banner ban03").length;
var currDiv = 0;
var myInterval = setInterval(function () {
if (currDiv > totDivs) {
clearInterval(myInterval);
return
}
$(".banner ban03").eq(currDiv).find('class').trigger("click");
currDiv++;
}, 2000);
});
how to call these classes in regular intervals sorry if i repeated the question again
html
<div id="ban01" class="banner ban01">
</div>
<div id="ban02" class="banner ban02">
</div>
<div id="ban03" class="banner ban03">
</div>
<div id="ban04" class="banner ban04">
</div>
style
.banner { height: 50px }
.ban01 { background: green }
.ban02 { background: blue }
.ban03 { background: red }
.ban04 { background: orange }
javascript
$(document).ready(function () {
var totDivs = $(".banner").length;
var currDiv = 0;
var myInterval = setInterval(change, 2000);
function change(){
$(".banner").hide().eq(currDiv).show();
currDiv = (currDiv + 1) % totDivs;
}
change();
});
http://jsfiddle.net/b2Btj/1/
Did you look on this answer... :-)
jquery-timed-change-of-item-class
Try this while I'm doing your coding. :-D
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.a, .b, .c, .d, .e {
height: 120px;
width: 200px;
}
.a {
background-color: red;
}
.b {
background-color: green;
}
.c {
background-color: blue;
}
.d {
background-color: black;
}
.e {
background-color: yellow;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<h1>Testing</h1>
<div id="test" class="a">How Are You Buddy?</div>
<script type="text/javascript">
$( document ).ready(function() {
var array = ['a','b','c','d','e'];//Here is your classes
var len = array.length;
var i=0;
function changeDivClass(d) {
$("#test").removeClass();
$("#test").addClass(array[d]);
}
setInterval(function() {
if(len>=i){
return changeDivClass(i++);
}else{
i=0;
$("#test").removeClass();
$("#test").addClass('a');
}
}, 5000);
});
</script>
</body>
</html>
#Maikay yes I want to rotate the images
Why use JavaScript to rotate image ?
This is possible with only css. Use the property : animation.
.imageRotate {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-animation:spin 4s linear 1; // '1' for a single animation, if you need an infinite animation replace '1' by 'infinite'
-moz-animation:spin 4s linear 1;
animation:spin 4s linear 1;
}
#-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
100% { -webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}
<div id="ban01">
<img class="imageRotate" src="http://socialtalent.co/wp-content/uploads/blog-content/so-logo.png">
</div>
not sure what exactly the click trigger on the banner element will do, but maybe this helps:
$(document).ready(function () {
var totDivs = $(".banner").length;
var currDiv = 0;
var myInterval = setInterval(function() {
if (currDiv > totDivs) {
clearInterval(myInterval);
return;
}
$(".banner").eq(currDiv).trigger("click");
currDiv++;
}, 2000);
});
what you could do is that you could run a for loop if you know the counts of the "div"
for(var count=0;count<3;count++)
{
var totDivs = $(".banner ban0"+count).length;
var currDiv = 0;
var myInterval = setInterval(function () {
if (currDiv > totDivs) {
clearInterval(myInterval);
return
}
$(".banner ban0"+count).eq(currDiv).find('class').trigger("click");
currDiv++;
}, 2000);
}
May this could solve your issue .