How to change the background image "on click" with jQuery? - javascript

I'm trying to make animation effect for background, it should listen an event that will change images on click.
For instance, I click Sajo Hapyo it should change the background image.
Main issue is that all images will be having different background-images and I'm really stuck with this.
I used backgroundColor: green in my JS for test, since wanted to check, whether it works or not.
At the final version, the background images will be added and it should change on click with nice jquery UI (effect).
Here is screenshot
Please help me out
Here is my code
HTML
<section id="main-showcase">
<div class="showcase-wrapper">
<div class="left-main col-lg-3 col-md-3">
<div class="shadow-effect"><p class="ottogi">OTTOGI</p></div>
<div class="shadow-effect"><p class="sajo">Sajo Hapyo</p></div>
<div class="shadow-effect"><p class="natura">Natura Bogata</p></div>
<div class="shadow-effect"><p class="maloo">ТОО Малу</p></div>
<div class="shadow-effect"><p class="dongush">Dongsuh</p></div>
<div class="shadow-effect"><p class="may">ООО Май</p></div>
</div>
<div class="right-main col-lg-9 col-md-9">
<div class="inner-container">
<h1>Ottogi</h1>
<h2>Южно - Корейские продукты питания высочайшего качества!</h2>
</div>
<div class="box-container">
<div class="main-wrap">
<div id="main-slider" class="first-slider">
[[getImageList?
&tvname=`goods`
&tpl=`goodsSlider.tpl`
]]
</div>
</div>
</div>
</div>
</div>
</section>
JS
$('button.sajo').click(function () {
$('.right-main').animate({
backgroundColor: 'green',
}, 1500);
});

Actually instead of using the jQuery.animate(). You can simply toggle a class on the same element. It is a good practice to avoid animate() and using css3 animations instead.
codepen
Check the codepen sample here. It will explain how to use it. Instead of using keyframes and all. You can simply obtain it using trnasition.
span {
background-color: red;
padding: 10px;
transition: all 1.5s ease;
color: white;
}
.change-color {
background-color: blue;
}

First of all, I cannot see in the HTML the button where you apply the click event listener. However, I assume this button is located somewhere in your HTML code and what you want to do is change the background image on the main slider by clicking on it. To do so you simply have to do the following:
$('button.sajo').click(function () {
$('.right-main').animate({opacity: 0}, 'slow', function() {
$(this)
.css({'background-image': 'url(your_url)'}) //Change url to your image url
.animate({opacity: 1});
}
});
Note that since you do not specify the exact animation you want, I just provided an example with a fade in animation where opacity goes from 0 to 1. You can change this animation to a different one by changing the content of .animate() and leaving the .css() like i wrote there. Hope this helps!

You can use like that
var imageUrl = your image url
$('button.sajo').click(function () {
$('.right-main').css('background-image', 'url(' + imageUrl + ')');
});

.bgcolor{
animation: colorchange 50s; /* animation-name followed by duration in seconds */
/* you could also use milliseconds (ms) or something like 2.5s */
-webkit-animation: colorchange 50s; /* Chrome and Safari */
}
#keyframes colorchange
{
100% {background: green;}
}
#-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
100% {background: green;}
}`
Then add this class to the element you want to change the background of:
$('button.sajo').click(function () {
$('.right-main').addClass('bgcolor');
});

Related

Scroll effect to change opacity of each new div element

I am new to website design and have a question I'd like to ask. I have tried to use velocity.js to achieve this with failure. I am sure there is a rather simple css solution for what i want. I just want the previous div to "fade" and the new div that's scrolled to, to fade in with greater opacity. Open to any jQuery examples as well.
Here is my code for the section in question:
html:
<section id="services">
<h2 class="pb-5">Services We Offer</h2>
<div id="service1">
<h2>Service 1</h2>
</div>
<div id="service2">
<h2>Service 2</h2>
</div>
<div id="service3">
<h2>Service 3</h2>
</div>
</section>
css:
#services{
}
#service1{
height: 100vh;
background-color: rgb(44, 49, 90);
}
#service2{
height: 100vh;
background-color: #267481;
}
#service3{
height: 100vh;
background-color: #373f24;
}
I am sure there is a rather simple css solution for what i want
Unfortunately, that is not the case. CSS can perform animations, but if scrolling is involved in any way, JS is required.
You could use something like animate.css to control your CSS animations and then use wow.js to make them load on scroll.
As before stated by other answers and comments you cannot manipulate the scroll event in css alone but here is a simple jquery example that may help you. You can add and remove classes on scroll and you can add an animation to the css to control the opacity of your div.
$(window).on("scroll", function(){
var scrollTop = $(this).scrollTop();
$('.scrollDiv').each(function(){
var el = $(this);
var offsetTop = el.offset().top;
if(scrollTop > offsetTop){
el.addClass("scrolled");
}else{
el.removeClass("scrolled");
}
});
});
.scrollDiv{
height:100vh;
transition:opacity 500ms ease-in-out;
opacity:0.2;
}
.scrollDiv.scrolled{
opacity:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollDiv" style="background:green;"></div>
<div class="scrollDiv" style="background:red;"></div>
<div class="scrollDiv" style="background:blue;"></div>
<div class="scrollDiv" style="background:yellow;"></div>

On hover add / remove class - not always working

I'm implementing some animation by adding and removing classes to an element on mouseover and mouseout. I'm using this method as I found using CSS alone was not reliable; the animation would not complete if the mouse exited the element before the animation finished.
So I have the following code:
<div class="one flip-container">
<div class="flipper">
<div class="front">
<!-- front content -->
</div>
<div class="back">
<!-- back content -->
</div>
</div>
</div>
<script>
jQuery(".flip-container").hover(function () {
jQuery(this).addClass("hover");
},function () {
jQuery(this).delay(2000).queue(function(){
jQuery(this).removeClass("hover");
});
});
</script>
<style>
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
</style>
This works but sometimes the class 'hover' is not removed, it stays, leaving the element in its animated state. Any idea how to make this more reliable?
Try using mouseenter and then set a timeout function to remove the class that way you wont be adding and removing classes except once each time the mouse enters the area. Also you may want to check to see if the area already has the class to avoid the function from being executed too many times like so:
jQuery(".flip-container").mouseenter(function () {
var el = jQuery(this);
if(!el.hasClass("hover")){
el.addClass("hover");
setTimeout(function(){
el.removeClass("hover");
}, 2000);
}
});
Here is a working fiddle Fiddle Demo

How to smoothly transition and change background color while scrolling using CSS?

I wanted to smoothly transition and change background color while scrolling, preferably using just CSS, and came across the following as a good example: https://minimill.co/
How can I achieve the smooth transition in changing the background color? And also when a button is clicked on the navigation bar, navigate to that particular section of the page? I attempted to check the source code but wasn't any help. The whole source code is in 1 line.
Thank you and will be sure to vote up and accept answer.
WITHOUT EXTRA PLUGINS
If you want to use only JavaScript then you can go about this solution.
In the code below I have 3 divs and each one has the attribute data-color which contains the color that we want to have on the background when the user is over that div. I made it so the color changes not just when the div is on top of the page but when we are after the 2/3 of the previus div.
When the user scrolls, the function below document.onscroll = function() { is called. This function loops through all the divs (credits: https://stackoverflow.com/a/11291363/7053344) and if (if (scrollTop > curDiv.offsetTop - heightBefore){) the scroll top is bigger than the top of a div (curDiv.offsetTop) minus the 1/3 of the hight of the previous div (heightBefore), then the background is changed according to the div's data-color attribute. The smooth transition for the change of the background color is achieved by this line: transition: background 1.5s; on the CSS.
Also included below are the jumps that you wanted. From the first div there is a link that sends you to the second div etc. You can modify them to fit your navigation bar. In order to understand jumps better you can look here.
JSFiddle: https://jsfiddle.net/0pe5n97z/2/
var test = document.getElementById("test");
document.onscroll = function() {
scrollTop = document.documentElement.scrollTop;
test.innerHTML = scrollTop;
allDivs = document.getElementsByTagName('div');
for( i=0; i< allDivs.length; i++ )
{
curDiv = allDivs[i];
// The code below makes the background color change when the
// scroll top passes the 2/3 of the previous div.
heightBefore = 0;
if (i > 0){
heightBefore = allDivs[i-1].offsetHeight / 3;
}
if (scrollTop > curDiv.offsetTop - heightBefore){
color = curDiv.getAttribute("data-color");
document.body.style.background = color;
}
}
};
body {
background: green;
transition: background 1.5s;
}
<body>
<div style="position:fixed" id="test"></div>
<center>
<div id="div1" data-color="green">
<p>Title goes Here</p>
<a name="green">
<p>Green area</p>
Go To Red area
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="div2" data-color="red">
<a name="red">
<p>Red area</p>
Go To Blue area
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="div3" data-color="blue">
<a name="blue">
<p>Blue area</p>
Return To Green area
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</center>
</body>
UPDATE
In order to make it work on different browsers too, you must add these lines in the CSS:
-webkit-transition: background 1.5s;
-moz-transition: background 1.5s;
-ms-transition: background 1.5s;
-o-transition: background 1.5s;
transition: background 1.5s;
and then change the scrollTop initialization in javascript from this:
scrollTop = document.documentElement.scrollTop;
to this:
scrollTop = window.pageYOffset;
You can test it in this updated JSFiddle.
Sources for this update:
css3 background-size transition animation in Webkit doesn't work... Bug? Or wrong syntax?
document.documentElement.scrollTop return value differs in Chrome
WITH EXTRA PLUGINS
As for your question:
smoothly transition and change background color while scrolling
as I wrote in the comment these sources are very helpful:
https://codepen.io/Funsella/pen/yLfAG
http://codepen.io/Funsella/pen/dpRPYZ
The examples in these links use javascript, jquery and other plugins, which I think are neccesary.
As for your question:
when a button is clicked on the navigation bar, navigate to that particular section of the page
this link explains it very well:
http://www.myhtmltutorials.com/jump.html
Below there is a small example of what you want, that was created by using and combining content from the links above:
$( window ).ready(function() {
var wHeight = $(window).height();
$('.slide')
.height(wHeight)
.scrollie({
scrollOffset : -50,
scrollingInView : function(elem) {
var bgColor = elem.data('background');
$('body').css('background-color', bgColor);
}
});
});
* { box-sizing: border-box }
body {
font-family: 'Coming Soon', cursive;
transition: background 1s ease;
background: #3498db;
}
p {
color: #ecf0f1;
font-size: 2em;
text-align: center;
}
a {
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2542/jquery.scrollie.min_1.js"></script>
<div class="main-wrapper">
<div class="slide slide-one" data-background="#3498db">
<p>Title</p>
<center>Go To Green.</center>
</div>
<div class="slide slide-two" data-background="#27ae60">
<a name="green">
<p>Green area</p>
<center>Go To Red.</center>
</a>
</div>
<div class="slide slide-three" data-background="#e74c3c">
<a name="red">
<p>Red area</p>
<center>Page over. Hope that was helpful :)</center>
</a>
</div>
</div>
Other approaches:
jquery change background color user scroll
http://jsfiddle.net/cgspicer/V4qh9/
How To Change A Page’s Background As The User Scrolls
Try this css:
-webkit-transition: background-color 1000ms linear;
see my fiddle i did quickly:
https://jsfiddle.net/kreza/4jfy1rhg/2/

How to create sliding images on hover with Bootstrap 3?

I want the images to slide when I move my cursor over the image. Let's say I will have 3 pictures.
The images will slide only if I am on the DIV.
I am pretty sure that this could be achieved with carousel but I am not sure if it is the best way.
My code
<div class="container products">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<!-- Reveal Up Full -->
<div class="image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/1" class="img-responsive"/>
<span class="title">Caption <br / ><br / > with some more info</span>
</div>
</div>
<div class="col-md-4">
<!-- Reveal Up Full -->
<div class="image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/2" class="img-responsive"/>
<span class="title">Caption <br / ><br / > with some more info</span>
</div>
</div>
<div class="col-md-4">
<!-- Reveal Up Full -->
<div class="image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/3" class="img-responsive"/>
<span class="title">Caption <br / ><br / > with some more info</span>
</div>
</div>
</div>
</div>
</div>
</div>
Demo : http://codepen.io/anon/pen/xbbNPM
Also I want the div to be clickable when my mouse is over.
I am pretty sure that this could be achieved with carousel but I am
not sure if it is the best way.
Why not? Because of you already use Bootstrap you should use its features in the first place.
also read http://getbootstrap.com/javascript/#carousel and find out that you can use multiple carousels on the same page:
Carousels require the use of an id on the outermost container (the
.carousel) for carousel controls to function properly. When adding
multiple carousels, or when changing a carousel's id, be sure to
update the relevant controls.
Cause you want to slide the carousal on mouseover(hover) you do not need any control, each of your carousels can code like that shown below:
<div class="col-md-4">
<!-- Reveal Up Full -->
<div id="carouse1" class="carousel slide" data-ride="carousel" data-interval="false">
<div class=" carousel-inner" role="listbox">
<div class="item active image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/1">
<div class="carousel-caption">>Caption <br / ><br / > with some more info</div>
</div>
<div class="item image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/2">
<div class="carousel-caption">>Caption <br / ><br / > with some more info</div>
</div>
<div class="item image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/3">
<div class="carousel-caption">>Caption <br / ><br / > with some more info</div>
</div>
</div>
</div>
</div>
Notice that i'm not sure why you wrap your 3 md-4 columns in a md-12 column, you do not need a img-responsive class for your carousel's images.
After creating your HTML you should create a JavaScript trigger for the mouseover (i use mouse enter here):
<script>
$('.carousel').on('mouseenter',function(){ $( this ).carousel('next');})
</script>
Also I want the div to be clickable when my mouse is over.
As you can see in the above i have wrapped the images in a a tag. The only possible issue left will be that the .carousel-caption is not clickable and overlay the images. Use the following CSS code to make the .carousel-caption clickable:
<style>
.carousel-caption {
pointer-events: none;
}
</style>
Demo: http://www.bootply.com/bmLVbymbhj
update
The caption doesn't slide up anymore. Actually code has changed dramatically. I think I > need to integrate it to your code.
Yes, you should integrate the revealUpFull class. Let me know if you found any troubles by doing this, or formulate a new question on SO.
You should use something like that shown below:
.carousel-caption {
width: 100%;
height: 100%;
position: absolute;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
text-align: center;
padding: 5px 0 4px;
font-size: 14px;
color: white;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
/* make image clickable */
pointer-events: none;
/* override bootstrap */
left: 0;
right: 0;
}
/* REVEAL UP FULL */
div.image.revealUpFull .carousel-caption {
height: 100%;
width: 100%;
bottom: -150px;
}
div.image.revealUpFull:hover img {
top: 0;
}
div.image.revealUpFull:hover .carousel-caption {
bottom: 0;
}
.carousel-caption {
pointer-events: none;
}
The left and right arrows which helps to slide are removed. This is what I want but
their blocks remains. So there is a space on the left and right.
I expect that the above issue is not related to the removed arrows but will be due to the size of the images. You are using image with a 360px width. As mentioned before the carousal's images are responsive by default. The CSS code sets a max-width:100% for these images, which means that they should not display larger than their original size. You can solve this by using larger images or give the image a with of 100% (mostly scaling up images will have quality issues). You can use the code that shown beneath:
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
max-width: none;
width: 100%;
}
What I want is when my mouse is over the DIV, 3 pictures will slide automatically with
infinite loop. Between each of them there will be 2 secs
In fact you should be able to use the following:
$('.carousel').on('mouseenter',function(){ $( this ).carousel('cycle',{interval:2000});});
$('.carousel').on('mouseleave',function(){ $( this ).carousel('pauze')});});
But the carsousel already pause on mouseenter. I will post a solution for that later on.
The carousel api has a pause option (hover by default), you can set this option to an empty string to prevent the carousel stop cycling on hover.
You should remove the carousel data-attribute in your HTML to enable explicit JavaScript initialization:
The data-ride="carousel" attribute is used to mark a carousel as animating starting at page >load. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript >initialization of the same carousel.
After that you can use:
$('.carousel').on('mouseenter',function(){ $( this ).carousel({interval:2000,pause:''}); });
$('.carousel').on('mouseleave',function(){ $( this ).carousel('pause'); });
When putting above three point together you will get something look like that show in the following demo: http://www.bootply.com/acGNORR3it
It looks like we don't need carousel for this simple feature. Javascript way will be easiest and fastest.
<script language="JavaScript">
var i = 0; var path = new Array();
// LIST OF IMAGES
path[0] = "http://lorempixel.com/750/375/sports/1/";
path[1] = "http://lorempixel.com/750/375/sports/2/";
path[2] = "http://lorempixel.com/750/375/sports/3/";
function swapImage() { document.slide.src = path[i];
if(i < path.length - 1) i++;
else i = 0; setTimeout("swapImage()",3000);
} window.onload=swapImage;
</script>
<img height="200" name="slide" src="" width="400" />
Demo: http://codepen.io/anon/pen/emmqYJ
Let me know if any easier solution exists.

jQuery hover animation efficiency

I've got my hover working - but i'm interested in trying to make it more efficient as it does seems to 'lag' when it's finding the .overlay div. I also had the issue where I was animating all .overlay divs on a page, which I consider to be quite a noob mistake.
Anyway, let's learn how to make the below better!
jQuery:
// get aside feature
var aside_feature = $('aside .feature');
// on hover, fade it in
$( aside_feature ).hover(function() {
// get the overlay div
var feature_overlay = $(this).find('.overlay');
$(feature_overlay).stop().fadeIn();
// on hover out, fade it out
}, function() {
$(this).find('.overlay').stop().fadeOut();
});
Markup:
<aside>
<div class="feature">
<div class="overlay">
button
</div><!-- overlay -->
<div class="text">
<p>text</p>
</div><!-- .text-->
<div class="image">
<figure>
<img src="" alt="">
</figure>
</div><!-- .image -->
</div><!-- .feature -->
</aside><!-- aside -->
Fiddle: http://jsfiddle.net/9xRML/5/
Edit - Final Code
Thanks #Shomz, and #Afro.
Final code choices were to use tranisitons, and coupled with modernizr detection for transitions, I changed my hidden overlay div to opacity: 0; *display:none; and javascript as a fallback:
CSS
.overlay {
*display: none;
opacity: 0;
transition: 0.4s all linear;
}
.overlay:hover {
opacity: 1;
}
jQuery
$(function () {
/*=====================================
= Feature overlay =
=====================================*/
if (!Modernizr.csstransitions) {
// get aside feature
var aside_feature = $('aside .feature');
// on hover, fade it in
$( aside_feature ).hover(function() {
$(this).find('.overlay').stop(true, true).fadeIn();
// on hover out, fade it out
}, function() {
$(this).find('.overlay').stop(true, true).fadeOut();
});
}
});
With risking of having my answer out of scope here, if you want to really get performance, you should switch to CSS animations. It's totally possible with your example by setting the default opacity of the overlay to 0 (instead of display: none;) and making it show up on .feature:hover. The trick is to add the transition property like this:
// applies a 4ms transition to any possible property with no easing
transition: all .4s linear;
See the whole example here: http://jsfiddle.net/9xRML/6/
See a nice article about the performance difference (CSS vs. JS) here: http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/ (there are many more, of course)
I think I have solved your issue using the same HTML but changing the following:
JQuery
$('aside .feature').hover(function() {
$(this).find('.overlay').stop(true, true).fadeIn();
}, function() {
$(this).find('.overlay').stop(true, true).fadeOut();
});
CSS
.feature {
background: #ccc;
}
.overlay {
display: none;
}
This means the overlay will only display on hover.
Details on .stop() can be found here.
.stop(true, true)
We can create a nice fade effect without the common problem of multiple queued animations by adding .stop(true, true) to the chain.
DEMO

Categories