We Keep Coding

Hover effect doesnot work with Transform: rotateY

Hello I have changed the flip card element from w3schools and added javascript that they will rotate 60px if they are in viewport with that user can understand that there is a textt behind card. It works well on scroll but now I release that hover effekt is not working.Can you please help me?
https://www.w3schools.com/howto/howto_css_flip_card.asp
https://jsfiddle.net/mqbkzLy2/
var x = 0;
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(window).scroll(function() {
if ($(".flip-card-inner").isInViewport() && x == 0) {
setTimeout(function() {
$(".flip-card-inner").css('transform', 'rotateY(80deg)');
}, 400);
setTimeout(function() {
$(".flip-card-inner").css('transform', 'rotateY(0)');
}, 800);
x++;
console.log(x);
console.log("in");
}
if (!$(".flip-card-inner").isInViewport() && x != 0) {
x = 0;
console.log('No success.');
console.log(x);
console.log("out");
}
});
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:120vh;background-color:yellow;"></div>
<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Windows_live_square.JPG" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>

that they will rotate 60px if they are in viewport with that user can understand that there is a textt behind card.
Don't use scroll event listener for this, use Intersection Observer (IO) for this.
IO was designed for such problems. With IO you can react whenever an HTML element intersects with another one (or with the viewport)
Check this page, it shows you how to animate an element once it comes into viewport (scroll all the way down). Of course, you can use any animation you want, this is then handled by CSS. This is just an really visible example.
Short recap on what you have to do to get IO to work:
First you have to create a new observer:
var options = {
rootMargin: '0px',
threshold: 1.0
}
var observer = new IntersectionObserver(callback, options);
Here we define that once your target Element is 100% visible in the viewport (threshold of 1) your callback Function is getting executed. Here you can define another percentage, 0.5 would mean that the function would be executed once your element is 50% visible.
Then you have to define which elements to watch
var target = document.querySelector('.flip-card');
observer.observe(target);
Last you need to specify what should happen once the element is visible in your viewport by defining the callback function:
var callback = function(entries, observer) {
entries.forEach(entry => {
// Each entry describes an intersection change for one observed
// here you animate another element and do whatever you like
});
};
If you need to support older browsers, use the official polyfill from w3c.
If you don't want to trigger the animation again when the elements are scrolled again into view a second time then you can also unobserve an element once it's animated.

jquery .hover() outFunction flashing bug

I am making a website with my friends for a class assignment but, for some reason, the outFunction part of my hover function is acting very strangely. When the mouse enters the element, this grey, div square fades in .fadeIn() in the background but then immediately fades out .fadeOut() even though that part is only supposed to come after the person is not hovering over the element anymore. And then, it starts to fade in again and then out, and so on.
$(document).ready(function() {
$("#hover").hide()
var topic_list = ["WHAT IS A HYDROMETEOROLOGICAL BIOHAZARD?", "NATURAL DISASTERS", "OUR IDEAS", "CREDITS AND REFERENCES"];
var topic_list_id = ["WHAT_IS_A_HYDROMETEOROLOGICAL_BIOHAZARD", "NATURAL_DISASTERS", "OUR_IDEAS", "CREDITS_AND_REFERENCES"];
for (var i in topic_list) {
var element = document.createElement("h6");
var node = document.createTextNode(topic_list[i]);
$(element).append(node);
$(header).append(element);
element.className = "topics";
element.id = topic_list_id[i];
}
$(".topics").hover(function() {
var x = $(this).position();
$("#hover").css({
"left": x.left,
"width": $(this).outerWidth(true),
"height": $(this).outerHeight(true)
});
$("#hover").fadeIn();
}, function() {
$("#hover").fadeOut();
});
});
#hover {
position: absolute;
background: grey;
opacity: 0.25;
left: 10px;
height: 100px;
width: 100px;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<div id="hover">
</div>
</header>
What's wrong, because I read up on the .hover() function of jQuery and I'm pretty sure that it isn't supposed to work like this.

Your hover div has an index greater than your h6 or topics. Which is why when your hover div appears on the top, you're not hovering the .topic anymore because it's under the hover div. You need to set the z-index for hover div to something below the index of the .topics, in this case -1.
The .topics also use margin which isn't counted as hover. You could use padding instead.
I prepared 2 snippets;
$(document).ready(function() {
$("#hover").hide()
var topic_list = ["WHAT IS A HYDROMETEOROLOGICAL BIOHAZARD?", "NATURAL DISASTERS", "OUR IDEAS", "CREDITS AND REFERENCES"];
var topic_list_id = ["WHAT_IS_A_HYDROMETEOROLOGICAL_BIOHAZARD", "NATURAL_DISASTERS", "OUR_IDEAS", "CREDITS_AND_REFERENCES"];
for (var i in topic_list) {
var element = document.createElement("h6");
var node = document.createTextNode(topic_list[i]);
$(element).append(node);
$(header).append(element);
element.className = "topics";
element.id = topic_list_id[i];
}
$(".topics").hover(function() {
var x = $(this).position();
$("#hover").css({
"top": x.top,
"bottom": x.bottom,
"left": x.left,
"width": $(this).outerWidth(true),
"height": $(this).outerHeight(true)
});
$("#hover").fadeIn();
}, function() {
$("#hover").fadeOut();
});
});
#hover {
position: absolute;
background: grey;
opacity: 0.25;
left: 10px;
height: 100px;
width: 100px;
z-index: -1;
}
h6 {
padding: 20px 0px 20px 0px;
margin-block-start: 0px;
margin-block-end: 0px;
margin:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<div id="hover">
</div>
</header>
Alternatively, you could just use CSS if you really just want to highlight the element. Modify the element's css transition property for the fade effect.
$(document).ready(function() {
$("#hover").hide()
var topic_list = ["WHAT IS A HYDROMETEOROLOGICAL BIOHAZARD?", "NATURAL DISASTERS", "OUR IDEAS", "CREDITS AND REFERENCES"];
var topic_list_id = ["WHAT_IS_A_HYDROMETEOROLOGICAL_BIOHAZARD", "NATURAL_DISASTERS", "OUR_IDEAS", "CREDITS_AND_REFERENCES"];
for (var i in topic_list) {
var element = document.createElement("h6");
var node = document.createTextNode(topic_list[i]);
$(element).append(node);
$(header).append(element);
element.className = "topics";
element.id = topic_list_id[i];
}
});
h6:hover {
background-color: rgba(0, 0, 0, 0.2);
}
h6 {
transition: 0.4s;
margin: 0px;
padding: 20px 0px 20px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<div id="hover">
</div>
</header>

Why not use a pure css solution? or do you have to use javascript?
Pure CSS solution
#hover:hover {
background: grey;
}
#hover {
position: absolute;
left: 10px;
height: 50px;
z-index: 2;
transition: background 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id = "header">
<div id = "hover">
<h6>WHAT IS A HYDROMETEOROLOGICAL BIOHAZARD?"</h6>
</div>
</header>

You can do it using css and applying styles of topics class
$(document).ready(function() {
var topic_list = ["WHAT IS A HYDROMETEOROLOGICAL BIOHAZARD?", "NATURAL DISASTERS", "OUR IDEAS", "CREDITS AND REFERENCES"];
var topic_list_id = ["WHAT_IS_A_HYDROMETEOROLOGICAL_BIOHAZARD", "NATURAL_DISASTERS", "OUR_IDEAS", "CREDITS_AND_REFERENCES"];
for (var i in topic_list) {
var element = document.createElement("h6");
var node = document.createTextNode(topic_list[i]);
$(element).append(node);
$(header).append(element);
element.className = "topics";
element.id = topic_list_id[i];
}
});
.topics {
padding: 20px;
}
.topics:hover {
background: grey;
opacity: 0.25;
transition: 0.4s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<div id="hover">
</div>
</header>

change only the background-image smooth without text in front of it

I have a website, where I want to change between images in the background very smoothly. This is my actual javaScript-code for it:
var bg=[
'images/best.jpg',
'images/61182.jpg',
'images/bg.jpg'
];
$('._container-1').css('background-image','url('+bg[2]+')');
window.setInterval(
function(){
img=bg.shift();bg.push(img);
document.getElementsByClassName('_container-1')[0].style.backgroundImage='url('+img+')';
},
10000
);
Now, I want to change the images very slowly. I have tried a lot with jQuery-fadeIn/fadeOut-methods like this:
window.setInterval(
function(){
img=bg.shift();
bg.push(img);
$('._container-1').fadeOut(600, function() {
$('._container-1').css('background-image','url('+img+')');
$('._container-1').fadeIn(600);
});
},
17000
);
The problem is, that there are buttons and text in the container and they changes with the images. I want that the text and buttons are in the front all the time, only the background should fadeIn/fadeOut. My english is not perfect, I hope you understand my problem.
Can somebody help me please?
nina_berlini

I have uses 2 elements as background to achieve the effect. Also check demo on https://jsfiddle.net/n380u3cy/1/
HTML:
<div class="container">
<div class="background"></div>
<div class="background"></div>
<button>
Test button
</button>
</div>
CSS:
.container { position: relative; line-height: 100px; }
.container > .background,
.container > .background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: contain; z-index: 0; }
.container > *:not(.background) { position: relative; z-index: 1; }
Javascript:
var bg=[
'images/best.jpg',
'images/61182.jpg',
'images/bg.jpg'
];
var Transition = 1000;
$('.background').css('background-image','url('+bg[bg.length - 1]+')');
window.setInterval(
function() {
img=bg.shift();
bg.push(img);
var $Backgrounds = $('.background');
$Backgrounds.eq(1).hide(0).css({
'background-image': 'url('+img+')'
}).fadeIn(Transition * .9);
$Backgrounds.eq(0).show(0).fadeOut(Transition, function(){
$(this).show(0).css({
'background-image': 'url('+img+')'
});
$Backgrounds.eq(1).hide(0);
});
}, 2000
);

Make a wrapper and include both the background div and button div inside it with position absolute and the following CSS styles. This way you can control and animate the background separately from the buttons.
var bg = [
'https://placehold.it/1001x201',
'https://placehold.it/1002x202',
'https://placehold.it/1003x203'
];
$('._container-1').css('background-image', 'url(' + bg[2] + ')');
window.setInterval(
function() {
img = bg.shift();
bg.push(img);
document.getElementsByClassName('_container-1')[0].style.backgroundImage = 'url(' + img + ')';
},
10000
);
window.setInterval(
function() {
img = bg.shift();
bg.push(img);
$('._container-1').fadeOut(600, function() {
$('._container-1').css('background-image', 'url(' + img + ')');
$('._container-1').fadeIn(600);
});
},
17000
);
.wrapper {
position: relative;
width: 100%;
height: 200px;
}
._container-1 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-size: cover;
background-position: top center;
}
.buttons {
position: absolute;
width: 100%;
text-align: center;
bottom: 0;
left: 0;
}
button {
background: red;
padding: 5px 10px;
border: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="_container-1"></div>
<div class="buttons">
<button type="button">
Button 1
</button>
<button type="button">
Button 2
</button>
</div>
</div>

thank you for your great solution. I am not well familiar with jQuery and have a question about your code:
$Backgrounds.eq(1).hide(0).css({
'background-image': 'url('+img+')'
}).fadeIn(Transition * .9);
means it that the second "background-div" first hides, then get a new background-image and after that it ist fadeIn? And means hide(0) that it immediately hides?
nina_berlini

Slide Background Image

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;
}

Applying background color based on scrolling content

Here is my JsFiddle
I want to apply background-color change property to circle when the window slides. Like in the beginning only first circle will have background-color. and when the images slides to second screen the second circle will have only color.
Can anybody guide me how to achieve that.
JQuery:
$(document).ready(function () {
setInterval(function () {
var A = $('.gallery').scrollLeft();
if (A < 993) {
$('.gallery').animate({
scrollLeft: '+=331px'
}, 300);
}
if (A >= 993) {
$('.gallery').delay(400).animate({
scrollLeft: 0
}, 300);
}
}, 3000);
});

Here's a simple solution of your problem: http://jsfiddle.net/pjvCw/44/ but....
The way you're doing galleries is quite wrong.
You have a really sensitive CSS full of margin bugs (see in CSS code),
you calculate all by hand, which will just complicate your life one day if you'll get to add images, change widths etc...
Your buttons are positioned really wrongly, and again you don't even need to manually add them in your HTML. Let jQuery do all the job for you:
Calculate margins, widths,
Get the number of slides
generate buttons,
Make your buttons clickable
Pause gallery on mouseenter (loop again on mouseleave)
LIVE DEMO
This is the way you should go with your slider:
HTML:
<div class="galleryContainer"> <!-- Note this main 'wrapper' -->
<div class="gallery">
<div class="row">
<!-- ..your images.. -->
</div>
<div class="row">
<!-- ..your images.. -->
</div>
</div>
<div class="content-nav-control"></div> <!-- Let jQ create the buttons -->
</div>
Note the general gallery wrapper, it allows you with this CSS to make your buttons parent not move with the gallery.
CSS:
In your code, using display:inline-block; adds 4px margin to your elements, ruining your math. So you just need to apply font-size:0; to remove that inconvenience.
As soon I did that the math was working and the right width was than 340px, having 5px border for your images and 20px margin.
.galleryContainer{
/* you need that one
// to prevent the navigation move */
position:relative; /* cause .content-nav-control is absolute */
background-color: #abcdef;
width:340px; /* (instead of 350) now the math will work */
height: 265px;
}
.gallery{
position:relative;
overflow: hidden; /* "overflow" is enough */
width:340px; /* (instead of 350) now the math will work */
height: 265px;
}
.gallery .row {
white-space: nowrap;
font-size:0; /* prevent inline-block 4px margin issue */
}
.gallery img {
display: inline-block;
margin-left: 20px;
margin-top: 20px;
}
.normalimage {
height: 80px;
width: 50px;
border: 5px solid black;
}
.wideimage {
height: 80px;
width: 130px;
border: 5px solid black;
}
img:last-of-type {
margin-right:20px;
}
.content-nav-control {
position: absolute;
width:100%; /* cause it's absolute */
bottom:10px;
text-align:center; /* cause of inline-block buttons inside*/
font-size:0; /* same trick as above */
}
.content-nav-control > span {
cursor:pointer;
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
border:1px solid #000;
box-shadow: inset 0 0 6px 2px rgba(0,0,0,.75);
margin: 0 2px; /* BOTH MARGINS LEFT AND RIGHT */
}
.content-nav-control > span.active{
background:blue;
}
And finally:
$(function () { // DOM ready shorty
var $gal = $('.gallery'),
$nav = $('.content-nav-control'),
galSW = $gal[0].scrollWidth, // scrollable width
imgM = parseInt($gal.find('img').css('marginLeft'), 10), // 20px
galW = $gal.width() - imgM, // - one Margin
n = Math.round(galSW/galW), // n of slides
c = 0, // counter
galIntv; // the interval
for(var i=0; i<n; i++){
$nav.append('<span />'); // Create circles
}
var $btn = $nav.find('span');
$btn.eq(c).addClass('active');
function anim(){
$btn.removeClass('active').eq(c).addClass('active');
$gal.stop().animate({scrollLeft: galW*c }, 400);
}
function loop(){
galIntv = setInterval(function(){
c = ++c%n;
anim();
}, 3000);
}
loop(); // first start kick
// MAKE BUTTONS CLICKABLE
$nav.on('click', 'span', function(){
c = $(this).index();
anim();
});
// PAUSE ON GALLERY MOUSEENTER
$gal.parent('.galleryContainer').hover(function( e ){
return e.type=='mouseenter' ? clearInterval(galIntv) : loop() ;
});
});
"- With this solution, What can I do now and in the future? -"
Nothing! just freely add images into your HTML and play, and never again have to take a look at your backyard :)

Try this: http://jsfiddle.net/yerdW/1/
I added a line that gets the scrollLeft and divides it by your width (331px) to get the position and use that to select the 'active' circle:
$(".circle").removeClass("coloured");
position = Math.ceil($(".gallery").scrollLeft()/331 + 2);
if(position > $(".circle").length){
position = 1; // yes...
}
$(".content-nav-control div:nth-child("+position+")").addClass("coloured");
Red background for active circle:
.coloured {
background : red;
}
Note that you should initialise with the first circle already having the .coloured class applied.

Here you go: http://jsfiddle.net/pjvCw/41/
i added new class
.selected
{
background-color: red;
}
and modified some js code

Here is your jsfiddle edited http://jsfiddle.net/pjvCw/45/
var scrolled = 0;
var circles = $(".circle");
var colorCircle = function(index) {
for(var i=0; i<circles.length; i++) {
if(i == index) {
circles.eq(i).css("background-color", "rgba(255, 0, 0, 1)");
} else {
circles.eq(i).css("background-color", "rgba(255, 0, 0, 0)");
}
}
}
$(document).ready(function () {
setInterval(function () {
var A = $('.gallery').scrollLeft();
if (A < 993) {
$('.gallery').animate({
scrollLeft: '+=331px'
}, 300);
colorCircle(++scrolled);
}
if (A >= 993) {
$('.gallery').delay(400).animate({
scrollLeft: 0
}, 300);
colorCircle(scrolled = 0);
}
}, 3000);
colorCircle(0);
});
I added a transition to the .circle class, so it looks a little bit better:
.circle {
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
border:1px solid #000;
box-shadow: inset 0 0 6px 2px rgba(0,0,0,.75);
margin-right: 5px;
transition: background-color 700ms;
-webkit-transition: background-color 700ms;
}