We Keep Coding

scaling background image with js animate - got shaking image

I have DIV container with background image in it.
When I animate it with JS animate scale - I got shaking effect. How to make it smooth?
$('body').on('click', '#container', function() {
$("#container").animate({
"background-size": 1000 + "px"
}, 4000);
});
#container {
width: 500px;
height: 300px;
margin-top: 100px;
margin-left: 100px;
background-color: #eeeeee;
background-image: url("https://real-e-expo.com/img/609/m5d2c42466d2e9.jpg");
background-repeat: no-repeat;
background-position: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>
Here is JSFiddle:
https://jsfiddle.net/rn6kwup0/

Something like this might work. It uses css3 transforms to scale things smoothly:
https://jsfiddle.net/21j3hbae/
.container {
width: 500px;
height: 300px;
margin-top: 100px;
margin-left: 100px;
background-color: #eeeeee;
}
.container .inner-image {
width: inherit;
height: inherit;
background-repeat: no-repeat;
background-position: center;
background-image: url("https://real-e-expo.com/img/609/m5d2c42466d2e9.jpg");
transform: scale(0.5);
transition: all 8s ease;
background-size: 100% auto;
}
.container.animate .inner-image {
transform: scale(2);
}

The shaking is a result of no hardware acceleration being used in repaint. Whenever animating, it is important to pick certain properties to animate to improve this performance. Animating transform is a better choice than background-size.
To achieve the change from smaller to larger I changed the jQuery animate() function to simply a css() change of transforming the scale. The value inside the scale() function is the new size. In this example 2 is equal to 200% of the original size.
$("#container").css({
"transform": "scale(2)"
});
The added transition property in the CSS controls the duration and any easing on the change. You can place this approach inside a div with overflow: hidden to achieve the background-image effect.
$('body').on('click', '#container', function() {
// use transform instead of animating background-size
$("#container").css({
"transform": "scale(2)"
});
});
#container {
width: 500px;
height: 300px;
margin-top: 100px;
margin-left: 100px;
background-color: #eeeeee;
background-image: url("https://real-e-expo.com/img/609/m5d2c42466d2e9.jpg");
background-repeat: no-repeat;
background-position: center;
/* control the transition speed here, the second value is duration */
transition: all 3s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

Set the background-size for initial state as well, add the easing for animation. This is what I achieved.
$('body').on('click', '#container', function() {
$("#container").animate({
"background-size": 100 + "%"
}, {duration: 9000,
easing: "linear"});
});
#container {
width: 500px;
height: 300px;
margin-top: 100px;
margin-left: 100px;
background-color: #eeeeee;
background-image: url("https://real-e-expo.com/img/609/m5d2c42466d2e9.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: 10%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

Split divs diagonally and responsively

I need to build the following screenshot, and I can't figure out how to do the angles responsively:
https://imgur.com/a/e9IJV
I tried using pseudo classes to add diagonal edges to a solid-color div.
But this design requires two images side-by-side so that won't work there. Also, the slants have to stay on the same angle through different sections with variable heights. I can't use clip-path because I need to support IE.
Here is my feeble attempt:
https://codepen.io/lsterling03/pen/zPEgaq
As you can see, I am having trouble! Is this design possible? Do you have any advice on how to approach this? Will it require javascript?
UPDATE
I have made a little progress. Here is an updated pen:
https://codepen.io/lsterling03/pen/GOOqmo
I can't get the slant right on the last section, which needs a variable height and width. I tried using javascript, but I don't have the right calculations:
$(".slant").css('width', $('.main').width() * 0.5 - 100);
$(".slant").css('border-top-width', $('.main').height());
I also haven't figured out how to do two images in a row yet.
Does anyone have suggestions to fix either of the above issues?

Here is something you can work with:
Bootply: https://www.bootply.com/4QuGRXY11d
.container{position:relative;width: 500px; overflow:hidden;}
.flex{display:flex;overflow:hidden;}
.cinq{overflow:hidden;width:50%;height:150px;background:blue;}
.cinq + .cinq{oveflow:hidden;right:-25%;width:75%;height:150px;position:absolute; transform: skewX(-20deg) translateX(-50px);background:red;}
.flex + .flex .cinq + .cinq{transform: skewX(20deg) translate(-50px)}
.cinq .img{height:100%;background-size:cover; background-image:url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg); position: absolute;
width: 100%;
top: 0;
left: -50px;transform: skewX(20deg);}
.flex + .flex .cinq + .cinq .img{transform: skewX(-20deg);}
<div class="container">
<div class="flex">
<div class="cinq">1</div>
<div class="cinq">
<div class="img"></div>
</div>
</div>
<div class="flex">
<div class="cinq">3</div>
<div class="cinq"><div class="img"></div></div>
</div>
</div>

And, here is another example that you can start to investigate some more: CodePen
body {
background-color: #00bcd4;
}
div { box-sizing:border-box; }
.row {
overflow: hidden;
position: relative;
width: 100%;
}
.image {
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) center center no-repeat #eee;
background-size: cover;
height: 400px;
width: 50%;
float: right;
}
.image2{
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) center center no-repeat #eee;
background-size: cover;
height: 400px;
width: 64.5%;
float: left;
-webkit-clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%);
}
.image3{
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) top left no-repeat #eee;
background-size: cover;
height: 400px;
width: 50%;
float: left;
-webkit-clip-path: polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
position: absolute;
right: 0;
}
.text {
background-color: #eee;
padding: 30px;
position: relative;
width: 50%;
float: left;
height: 400px;
}
.text > div {
position: relative;
z-index: 1;
}
.text2 {
height: 400px;
width: 50%;
float: left;
background: #fff;
padding: 30px
}
.corner:after {
transition: all .3s ease;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: absolute;
display: block;
content: "";
top: 0;
}
.corner-right:after {
border-left: 150px solid #eee;
border-top: 400px solid transparent;
border-right: 270px solid transparent;
}
.corner-left:after {
border-right: 150px solid #eee;
border-top: 400px solid transparent;
border-left: 270px solid transparent;
right: 50%;
}

Position div on top of image

Ok, so I want to position on top of another div which has a background image. The image-div has the following properties:
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image: url('../img/1.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
This looks like I want on all devices. But now I need to overlay the image-div with a clickable div that fits a certain part of the image. Getting the div to fit is easy, just set position to absolute and set top, left, width and height, but as soon as i display in another resolution/density the div is way off, no surprise there. So i tried with positioning by using % or vh and vw but nothing seems to work.
How would I go about positioning divs on top of the image regardless on what device, resolution and density I'm at?

It's a combination of background-position, background-size and an offset in percentages of the containing div.
Keep the background-position at a certain value so the spot on the image is always in screen.
Use background-size: cover; or background-size: contain; to keep the image (or it's container) responsive.
If you have two or more spots on the outer edges of the image I suggest using contain, but this will reduce the image size considerably on smaller screens while your inner div will stay reasonably large.
In other cases, use cover for resize purposes.
Here I created an example: (I used Jquery UI to make the image resizable)
$( function() {
$( "#resizable" ).resizable();
} );
.container {
background-image: url('https://images.unsplash.com/photo-1465218550585-6d069382d2a9?dpr=1&auto=format&fit=crop&w=1500&h=994&q=80&cs=tinysrgb&crop=');
background-size: cover;
background-position: 50% 50%;
height: 500px;
position: relative;
width: 800px;
}
.hit-me-container {
height: 16px;
left: 52%;
position: absolute;
top: 45%;
width: 16px;
}
.hit-me {
animation: pulse 1s ease infinite;
background-color: #fff;
border: 3px solid #777;
box-sizing: border-box;
border-radius: 50%;
cursor: pointer;
height: 100%;
width: 100%;
}
.hit-me-container:hover:after {
background-color: #333;
color: #fff;
content: 'Buy these glasses';
display: block;
font-family: sans-serif;
font-size: 12px;
left: 20px;
padding: 5px;
position: absolute;
width: 100px;
top: -4px;
}
#keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container" id="resizable">
<div class="hit-me-container">
<div class="hit-me"></div>
</div>
</div>
Or check this fiddle

You can use a div inside of the div with the background-image, but then position it within the div wherever you want using %s, not px or absolute values.
#bg{
position: relative;
width:100vw;
height:100vh;
background-image: url('/favicon.ico');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
z-index: 5
}
#overlay {
position: absolute;
height: 40%;
width: 30%;
z-index: 10;
top: 13%;
left: 34%
}
#overlay:hover {
background-color: rgba(50,50,200,0.5);
}
<div id="bg">
<div id="overlay"></div>
</div>

<style type="text/css">
#div_1
{
position:relative;
top:0;
left:0;
width:100%;
height:200px;
background-image: url('../img/1.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
#div_2
{
position:absolute;
width:50%;
height:60%;
margin:0px auto;
}
</style>
<div id="div_1">
<div id="div_2">
testing...
</div>
</div>

jQuery popup / overlay effect

im really hoping someone can help me out with this project requirement as im new to JS or rather not advanced with it and i only have today to crack this one and no idea how.
Below is an image iwth how the effect needs to be, starts off from top to bottom, your see how it expands but curved at top and bottom until fully open.
Anyone have any ideas on how i can do this is JS / jQuery (non plugin based) i would be forever greateful if someone could help me on this.
Thanks a bunch

You can do that without Javascript / jQuery using just CSS3 border-radius. However, if you need to fire this up through your existing JS code, then simply wrap the style in a class, and apply that class on some event in your JS code.
Remember that in order to have that elliptical effect you have in your question, the block has to be rectangular and not square, otherwise you will end up in a circle.
A simple example snippet:
div {
margin: 16px;
height: 10px; width: 240px;
background-color: red;
border-radius: 50%;
opacity: 0;
transition: all 2s ease-in;
}
a:focus ~ div {
height: 120px; width: 240px;
border-radius: 0px;
opacity: 1;
}
Click
<div></div>
Snippet using jQuery to fire the effect:
$("#btn").on("click", function() {
$("#d1").addClass("effect");
});
div {
margin: 16px;
height: 10px; width: 240px;
background-color: red;
border-radius: 50%;
opacity: 0;
transition: all 2s ease-in;
}
div.effect {
height: 120px; width: 240px;
border-radius: 0px;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="btn" href="#">Click</a>
<div id="d1"></div>

You can try this.
Demo on dabblet
body {
background-color: black;
margin: 0 auto;
overflow: hidden;
}
#overlay {
border-top-left-radius: 1000px 100px;
border-top-right-radius: 1000px 100px;
border-bottom-left-radius: 1000px 100px;
border-bottom-right-radius: 1000px 100px;
width: 100%;
height: 100px;
background-color: white;
margin: 0;
position: absolute;
top: calc(50% - 50px);
-webkit-animation: anim 4s infinite;
animation: anim 4s infinite;
height: 800px;
top: calc(50% - 400px);
}
#-webkit-keyframes anim {
0% {
height: 1px;
top: calc(50% - 0.5px);
}
100% {
height: 800px;
top: calc(50% - 400px);
}
}
#-moz-keyframes anim {
0% {
height: 1px;
top: calc(50% - 0.5px);
}
100% {
height: 800px;
top: calc(50% - 400px);
}
}
<div id="overlay"></div>

Showing two gifs using CSS

I was trying to show a gif on my page and succeeded in showing it.
But now i want to show two gifs next to each other.
I was wondering is it possible to do so.
CSS
#loader {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 ) url('../Images/loading.gif') 50% 50% no-repeat;
}
HTML
<div id="loader"></div>
Jquery
$(window).load(function () {
$('#loader').fadeOut(500);
});
Now can i add one more gif in background using url???
I tried following but it does not seem to work
#loader {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 ) url('../Images/loading.gif') , url('../Images/ajax-loader.gif') 50% 50% ;
}

Check the fiddle
HERE
Code
div#loader {
background-image: url('http://www.misd.gov.sc/misdsd/Assets/programmer.gif'), url('http://www.misd.gov.sc/misdsd/Assets/programmer.gif');
background-repeat: repeat-y;
background-position: top left, top right;
width: 385px;
height: 100px;
border: 1px solid #000000;
}

You can have an element like this:
<div id="loader">
<span id='loadtxt'></span>
</div>
then two css classes like this:
#loader {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: url('http://i837.photobucket.com/albums/zz296/sayalie30/loading.gif') 50% 50% no-repeat;
}
#loadtxt {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: url('http://lotyd.xtgem.com/images/bg-loading.gif') 50% 70% no-repeat;
}
you can adjust it as per your need.

CSS3 does support multiple backgrounds (http://www.css3.info/preview/multiple-backgrounds/)
check out the examples below