Hi guys I was trying to swap the background of two images down the footer section of my website using skrollr.js (https://github.com/Prinzhorn/skrollr). For some reason it won't scroll at all. I am trying to create a parallax site that has fixed position on the part below.
See image: http://prntscr.com/6yrckx
Here's the Markup of that part:
<div id="starynight"
data-bottom-top="opacity: 1; background: !url(images/sunny.jpg); background-size: cover;"
data--40-top="opacity: 0.5; background: !url(images/night.jpg); background-size: cover;"
data--50-top="opacity: 0; background: !url(images/night.jpg); background-size: cover;"
data--60-top="opacity: 0.5; background: !url(images/night.jpg); background-size: cover;"
data--70-top="opacity: 1; background: !url(images/night.jpg); background-size: cover;"
>
</div>
While here's the CSS:
#starynight{
background: url('../images/sunny.jpg') no-repeat center;
width: 100%;
height: 307px;
background-size: cover;
}
#road{
background: url('../images/road.jpg') no-repeat center;
width: 100%;
height: 145px;
background-size:cover;
}
#car{
background: url('../images/car.png') no-repeat center;
width: 325px;
height: 125px;
display: block;
position: absolute;
z-index: 9999;
left: 950px;
top: 2100px;
}
My issue here is that when I scroll this part of my website it should swap the images of the sunny.jpg and night.jpg while the car is moving from right to left and also this background image must be fixed in position. For some reason my codes won't just work. Any idea what went wrong?
See my website here: http://goo.gl/aNOCiJ
Animating backgrounds is not like animating positions or "number" data. You can't just transform one background into another by fading them (actually Firefox somehow can animate the transition, but lets not depend on that).
A solution to your problem is having 2 diferent divs for, 1 for your night scene, and other for your sunny sky just in the same position, one over the other and with the sunny one with a higher z-index.
Then what you need to animate on scroll is the opacity of the sunny sky, what makes the night scene appear.
Also I found that your level of scroll isn't enough to fade the opacity of the sunny sky completly, it ends in 0.603448.
Hope it helps, please tell me if this worked.
As stated already, background images can't be animated, only background colors. So you'll have to lay both images on top of each other and fade the top layer in like this -
*Untested
#starynight-wrap {
position: relative;
width: 100%; height: 307px;
}
#starynight-day {
position: relative;
width: 100%; height: 100%;
background: url('images/sunny.jpg');
background-size: cover;
}
#starynight-night {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: url('images/night.jpg');
background-size: cover;
}
<div id="starynight-wrap">
<div id="starynight-day"></div>
<div id="starynight-night"
data-bottom-top="opacity: 0"
data--50-top="opacity: 0;"
data--60-top="opacity: 0.5;"
data--70-top="opacity: 1;"
>
</div>
</div>
Related
I have a div with a background image. The div itself contains nothing except this code:
<div class="container" style="background-image: url(URL);"></div>
and the CSS code:
.container {
width: 100%;
overflow: hidden;
margin-bottom: 0px;
background-position-x: 50%;
background-position-y: 50%;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: local;
background-size: cover;
display: block;
position: relative;
background-color: #FFFFFF;
padding-top: 50%;
}
When trying to detect the height with:
var container_height = $('.container').height();
it returns 0 even though in reality it's approximately 200px in height.
I am assuming this is because the container has no content, only a background image with top padding. How do I fix it so I an get the actual height?
var container_height = $('.container').outerHeight();
Consider using outerHeight() instead :)
So I have a database with x and y quadrants and I have a 350x350px map. I have positioned the map as such:
background-image: url(/storage/maps/surface.png);
background-repeat: no-repeat;
height: 350px;
background-position: center center;
margin: 0px auto;
background-size: cover;
The width seems to be 429px, not sure why. Im sure it has to do with the cover.
On top of this image I have a marker:
font-size: 32px;
color: #f9e4b4;
z-index: 5;
position: absolute;
top: 78px;
left: 349px;
The top represents the Y position and the X position represents the left.
These values (top and left) come from the database and are set in React JS.
This, as it stands creates three divs:
<div class="location-map mb-3">
<div style="background-image: url("/storage/maps/surface.png"); background-repeat: no-repeat; height: 350px; background-position: center center; margin: 0px auto; background-size: cover;">
<i class="fas fa-map-marker-alt player-icon" style="top: 78px; left: 349px;"></i>
</div>
</div>
The issue I am having is:
As you an see, I am trying to position this marker at a pixel perfect position on the map.
now as you see the location states 349, 78 and while this might be right css wise, the marker should be at the edge of the map (on the right) if it was truly 349px's to the left.
So my question is, is the image too small? did I position the image properly? Why is the marker where it is and not where I want it to be?
There are two main items to solve:
The size of the map element should be an exact 350px square
Using top and left should place the base of the pin at the exact coordinates.
Let's start with the map. If you know the exact image dimensions of your image this should suffice:
.map {
background: url(http://placehold.it/350x350);
height: 350px;
width: 350px;
}
<div class="map">
</div>
Now lets create the element we want to position using top and left to the exact pixel, allowing any decoration to fall where it may by using a pseudo element:
.map {
background: url(http://placehold.it/350x350);
height: 350px;
position: relative;
width: 350px;
}
.map-x-pin {
background-color: black; /* So we can see where the pixel is */
height: 1px;
position: absolute;
width: 1px;
}
.map-x-pin::after {
background-color: red; /* Decorative, this could be an image too */
bottom: 100%;
content: '';
display: block;
left: -10px; /* Half of the width, give or take a pixel */
position: absolute;
height: 40px;
width: 20px;
}
<div class="map">
<div class="map-x-pin" style="top: 78px; left: 349px;"></div>
</div>
Some of my content seems to be pushed below a jQuery plugin I am using called ParticleGround, found here: ParticleGround GitHub
I have this code here:
<script type="text/javascript">
window.onload = function(){
$('#Home').particleground({
dotColor: '#95a5a6',
lineColor: '#95a5a6'
});
}
</script>
<div class="Home" id="Home">
<div class="text-vcenter">
<p class="home">Test</p>
<p style="color:white; font-family:BebasNeueLight; font-size: 2em;">Cool stuff here</p>
<p style="color:white;">Info</p>
<p style="color:white;">Texas, USA</p>
<br />
<a class="btn btn-info outline smoothScroll" href="#Services">More Info</a>
</div>
</div>
Of course all my plugins are properly initialized so that is not the issue.
As you can see in the code above, I have the background as the #Home id which is initialized in the particleground script to use the effect. Now, this all started happening when I changed this line of code:
<div class="centered">
to...
<div class="text-vcenter">
Here is the CSS to:
#Home:
#Home {
background: #16a085 no-repeat center center fixed;
display: table;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-right: 25px;
padding-left: 25px;
}
.centered:
.centered {
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
text-align: center;
}
.text-vcenter:
.text-vcenter {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Any ideas on how to fix my content being pushed below the particleground? I'm certain it's an easy fix but I'm coming up blank, it's late at night for me.
UPDATE:
It seems to have actually just pushed it down below the 100% view for the particleground and moved it over to the right, where it should be in the center on top of the particleground div.
Well, the canvas has a display: block on it, so it's pushing the content down. You could set the canvas to be absolutely positioned:
canvas{
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
This way it will be 100% width and height of the #Home div, but since it's absolutely positioned, it would be in the background.
Here's the fiddle: http://jsfiddle.net/4h0ghb67/
I'm trying to centre an image, i've attached a jsfiddle to show the outcome of what I want, the only difference would be that the image is placed into the html and not the css code.
http://jsfiddle.net/6y2qjxm0/3/
Here's the css I'm using in the fiddle and i've already taken the image url out.
width:100%;
height:100%;
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
and finally here's the html:
<div class="full-screen">
<img src="http://placehold.it/350x150">
</div>
Failing this, does anyone know a better way of doing this?
It must be centred and it must be 100% width and 100% height.
Thanks
UPDATE: The image must stay in proportion like the fiddle.
UPDATED This solution is independent of the image dimensions, apart from that it needs its with to be greater than its height. It uses CSS positioning to set the image within .full-screen to be of full height, keep proportions and with a 50% negative horizontal offset (centered).
HTML:
<div class="full-screen">
<img src="http://placehold.it/350x150" />
</div>
CSS:
body, html {
margin: 0;
height: 100%;
overflow-x: hidden;
}
.full-screen {
position: relative;
height: 100%;
}
.full-screen img {
position: absolute;
left: 0;
height: 100%;
left: -50%;
}
Updated fiddle: http://jsfiddle.net/5e6btwa2/1/
background-size: cover; is your best bet, with support from ie9+. Getting an img to cover the page without distorting only works if you know its size or are willing to use javascript.
Why do you need to use an img? Is it because you want the src to be added dynamically? in that case you should use an inline style.
<div style="background-image:{{dynamicImage}}"></div>
Try use attribute align with value middle in your img tag
<img src="smth.gif" align="middle">
If you want the same behavior as you had with the image as a background, you could do it like this (depends on the CSS3 transform method):
http://jsfiddle.net/6y2qjxm0/6/
HTML
<div class="full-screen">
<img src="http://placehold.it/350x150">
</div>
CSS
* {
margin:0;
padding:0;
position: relative;
}
html {
width: 100%;
height: 100%;
background-size: cover;
position: relative;
overflow-y: scroll;
}
body {
width: 100%;
height: 100%;
margin-left:auto;
margin-right:auto;
background: inherit;
/* overflow: hidden; enable to disable scrolling */
}
.full-screen {
width:100%;
height:100%;
overflow: hidden;
}
.full-screen img {
min-width: 100%;
min-height: 100%;
left: 50%;
transform: translate(-50%,0);
}
Try this, it works in IE8+ and pretty much every other browser:
HTML
<div class="full-screen">
<img src="http://placehold.it/350x150" />
</div>
CSS
.full-screen {
position: fixed;
top: -50%; /* this will center the image vertically */
left: -50%; /* this will center the image horizontally*/
width: 200%;
height: 200%;
}
.full-screen img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
Demo
For other ways have a look at this article on CSS tricks by Chris Coyier. The CSS above is used in Technique #2 in his examples.
I'm looking for a way to darken all of the area within a container except for a transparent child div. This div is draggable, so the dimmed area would have to move with it. Does anyone know of a way to achieve this using jQuery/CSS? Here is a picture of the effect I am trying to achieve:
EDIT: SOLVED
See #Robby Cornelissen's answer
Could do something like this fiddle. It relies on an absolutely positioned viewport element with a fixed background. If you click the viewport element, you'll see that it moves while the background stays fixed.
HTML
<div class="back">
<div class="overlay">
<div class="front">
</div>
</div>
</div>
CSS
.back, .front {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Swallow_flying_drinking.jpg/1024px-Swallow_flying_drinking.jpg");
background-attachment: fixed;
background-position: 0,0;
}
.back {
width: 1024px;
height: 623px;
}
.front {
position: absolute;
left: 200px;
top: 50px;
width: 300px;
height: 150px;
z-index: 100;
}
.overlay {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}