I am trying to unveil a responsive background image. Basically, I have a value on load. Let's say 50%. So I want half of my image to be sharp, and the other half to be blurred.
Never done this before so I had the idea to produce two images : one plain, one blurred.
HTML - Two empty divs. Those divs are in a container-fluid div, so their width change at every window resize, that's important.
<div class="col-lg-9 left-header">
<div class="overlay">
</div>
<div class="bg">
</div>
</div>
<div class="col-lg-3 right-header">
// some stuff
</div>
Now, everything else has to be js and css.
So I start to style my divs accordingly.
Blurred bg, notice absolute positionning :
.overlay {
background:url('../img/overlay.jpg');
height:580px;
width:100%;
background-position:right;
background-size:cover;
position:absolute;
right:0;
}
Non-blurred bg
.bg {
background:url('../img/bg.jpg');
background-size:cover;
background-position:right;
height:580px;
}
As you can see in the jsfiddle https://jsfiddle.net/yqdx9vgc/, there is a big problem especially at large widths. Indeed, I wanted to play with the width parameter of the .overlay. But then, the two background cover images aren't of the same proportions, so the effect is not working.
Ideally, in the end, I want to set the width with jquery. For instance, if my value is 50%, then I tell jquery to put .overlay at 50% width. But my solution isn't working, how could I keep the same dimensions for both background images with different div sizes ? While keeping the responsive effect
I achieved this effect with pure CSS, enjoy:
https://jsfiddle.net/fk9rbgv5/1/
Here is the code:
.unveil-container {
width:100%;
position:relative;
overflow:hidden;
background-size:100% 100%;
background-image:url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
padding:0;
/* This is for keeping proportion - remove if you do not want */
display: inline-block;
width:100%;
}
/* this whole before is for proportion */
.unveil-container::before {
content:'';
display: block;
margin-top: 50%;
}
.overlay {
background:url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
height:100%;
/* PLAY WITH WIDTH */
width:50%;
top:0;
background-position:100% 0;
background-size:200% 100%;
position:absolute;
left:50%;
-webkit-filter: blur(5px);
}
.bg {
position:absolute;
left:0;
top:0;
width: 50%;
background:url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
background-size:200% 100%;
background-position:0%;
height:100%;
}
<div class="col-lg-9 left-header unveil-container">
<div class="overlay"></div>
<div class="bg"></div>
</div>
<div class="col-lg-3 right-header">// some stuff</div>
You can set 2 elements, one inside the other, and then translate them in opposite directions using translate.
Animating them is easy with javascript.
With this layout, the elements are 100% width, and the background can be cover (or contains)
var target1, target2, step;
function move () {
target1.style.transform = "translateX(" + step + "%)";
target2.style.transform = "translateX(-" + step + "%)";
step -= 1;
if (step < 0) step = 100;
}
function start () {
target1 = document.getElementById('moving');
target2 = target1.children[0];
step = 50;
setInterval(move, 20);
}
.base {
width: 80%;
height: 300px;
position: relative;
overflow: hidden;
}
.image {
position: absolute;
width: 100%;
height: 100%;
top; 0px;
left: 0px;
background-image: url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
background-size: cover;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top; 0px;
left: 0px;
z-index: 2;
overflow: hidden;
transform: translateX(50%);
}
.overlayimage {
position: absolute;
width: 100%;
height: 100%;
top; 0px;
left: 0px;
background-image: url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
background-size: cover;
transform: translateX(-50%);
-webkit-filter: blur(5px);
-webkit-filter: invert();
}
<div class="base">
<div class="image"></div>
<div class="overlay" id="moving">
<div class="overlayimage">
</div>
</div>
</div>
<button onclick="start();">start</button>
I changed your filter to make it more visible ...
Related
I'm not a front end developer so sorry if my question look easy. I search the whole day figuring out how to create a z-index like effect but with a special condition. (Z-index don't work for what I want to accomplish and it's normal).
I would like to find a way to make the text disappear and appear when it cross a div. But the problem that I have with z-index is the following : the text of the first div do not disapear when it cross the red div.
https://jsfiddle.net/2bry9nuj/20/
<div id="firstDiv">
<h1 style="">text first div</h1>
</div>
<div id="secondDiv">
<h1>text second div</h1>>
</div>
#firstDiv
{
position: relative;
width: 100%;
height: 500px;
background-color:green;
z-index: 1;
}
#secondDiv
{
position: relative;
width: 100%;
height: 500px;
background-color: red;
}
h1
{
position:fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
If you don't understand the problem properly you can see a demo on the homepage of this website just scroll down and you will see. https://www.lucidmotors.com/
You are almost good, you simply need to clip the text to its section. You can use clip-path for this
#firstDiv {
position: relative;
width: 100%;
height: 500px;
background-color: green;
}
#secondDiv {
position: relative;
width: 100%;
height: 500px;
background-color: red;
}
h1 {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
#firstDiv,
#secondDiv {
clip-path:inset(0);
}
<div id="firstDiv">
<h1 style="">text first div</h1>
</div>
<div id="secondDiv">
<h1>text second div</h1>
</div>
position:fixed doesnt respect z-index cause of the CSS spec or whatever, so you need javascript for this. Please take a look at the following code
text = document.getElementsByTagName("h1");
window.addEventListener("scroll",scroll);
bounds = [];
for(i=0; i<text.length; i++){
bounds.push(text[i].getBoundingClientRect());
}
scroll();
function scroll(){
for(i=0; i<text.length; i++){
text[i].style.top = this.scrollY - bounds[i].top + "px";
}
}
body{
margin:0;
}
#firstDiv, #secondDiv{
height:100vh;
background:grey;
overflow:hidden;
position:relative;
}
#secondDiv{
background:tomato;
}
h1{
position:absolute;
text-align:center;
line-height:100vh;
width:100%;
}
<div id="firstDiv">
<h1>
test1
</h1>
</div>
<div id="secondDiv">
<h1>
test2
</h1>
</div>
cheers
I have an image which goes from one side off the screen to other. However, when I open the HTML on a different sized computer/laptop, it does not fit and looks out of place. How do I fix this?
CODE:
body {
text-align: center;
}
div.container {
text-align: left;
width: 710px;
margin: 0 auto;
border: 12px solid black;
border-radius: 10px;
}
div.content {
width: 700px;
min-height: 400px;
background-color: white;
padding: 5px;
}
#-webkit-keyframes mini {
from {
left: 410px;
}
}
.mini {
position: absolute;
top: 280px;
left: 950px;
width: 166px;
height: 70px;
z-index: 10000;
-webkit-animation: mini 3s;
animation: mini 8s;
}
<div class="container">
<div class="content">
<img src="Media/buscartoon.jpg" class="mini" />
</div>
</div>
maybe set initial left and top values
.imganim {
width:100px;
height:60px;
position:absolute;
-webkit-animation:myfirst 5s;
animation:myfirst 5s;
left: 0;
top: 0;
}
Your .content and .container have no position set, so I guess it's defaulting to the next parent element that does have these set.
Pop this on your .content div:
position: relative;
the image is still going to go over the limits because of left: 100% but adding a relative position to the container may well help you get to the next problem.
If you want the image to sit flush with the edge of the container rather than running over, you can also change your left: 100% to:
left: calc(100% - 100px)
...where 100px is the width of the element.
edit: jsfiddle example https://jsfiddle.net/w56r2xnr/
Try the following css classes that i have ammended. I have kept the top at 5px which makes room for the 5px padding within the content div. Also the 50% transformation formal includes the left 100% - (width of the image + right-padding).
You can now adjust the top to make it as you see fit.
CSS changes:
div.content {
width: 700px; min-height: 400px;
background-color: white; padding: 5px;
position: relative;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst
{
0% {left:0%; top:5px;}
50% {left: calc(100% - 105px);}
100% {left:0%; top:5px;}
}
/* Standard syntax */
#keyframes myfirst
{
0% { left:0%; top:5px;}
50% {left: calc(100% - 105px);}
100% {left:0%; top:5px;}
}
Sample: http://codepen.io/Nasir_T/pen/ZBpjpw
Hope this helps.
[Edit - Code changed in question]
I think in both scenarios you will need to set the content div with position:relative to keep the image contained within it as the image itself is position:absolute. Along with that you need to use percentage values for the left and top in order for the animation and the position to be in the right place regardless of the size of the screen.
For the updated code in question please check the following code sample:
http://codepen.io/Nasir_T/pen/ObRwmO
Just adjust the key frame left percentage according to your need.
I have a very simple loading icon, the div is full screen and the image is just a gif:
<div id="loading" class="a">
<img id="loading-gif" src="img/general/712.gif" width="50px" height="50px" class="b" />
</div>
Here are the styles:
.a {
display: none;
position: absolute;
z-index: 9999;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.3);
}
.b {
display: block;
position: absolute;
margin: 0 auto;
}
When I want to display it, I do so like this:
var hCenter = (Math.floor(window.innerWidth/2)) - 25;
var vTop = window.pageYOffset || document.documentElement.scrollTop;
var vCenter = (Math.floor(window.innerHeight/2)) - 25;
$("#loading-gif").css({top: vTop + vCenter, left: hCenter});
$("#loading").show();
And to hide:
$("#loading").hide();
This works fine in firefox but doesn't seem to work in Chrome or on my iPhone. I can't see an error anywhere - any idea why some browsers don't like it?
Thanks
You should do something like this:
.hidden {
display:none;
}
Then you can add and remove the class to show and hide it.
To hide:
$("#loading").addClass("hidden");
To show:
$("#loading").removeClass("hidden");
Try this one
JavaScript
$(window).load(function() {
$('#status').delay(100).fadeOut('slow');
$('#preloader').delay(200).fadeOut('slow');
$('body').delay(200).css({'overflow':'visible'});
});
CSS
/* cover complete screen */
#preloader {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background-color:#FFF;
z-index:9999; /* makes sure it stays on top */
-webkit-transition:none;
transition:none;}
/* preloader container at the middle */
#status {
width:200px;
height:200px;
position:absolute;
left:50%; /* centers the loading animation horizontally one the screen */
top:50%; /* centers the loading animation vertically one the screen */
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px; /* is width and height divided by two */
text-align:center;
}
HTML
<body>
<div id="preloader">
<div id="status">
<h4>Loading...</h4> <!-- include your loading img here -->
</div>
</div>
<h3>This is a body text</h3>
</body>
<body>
<div id="parent_scroll">
<div id="slider">
<div class="slides">Slide1</div>
<div class="slides">Slide2</div>
<div class="slides">Slide3</div>
</div>
</div>
</body>
<style>
#parent_scroll{
width: 800px;
height: 350px;
border: 1px solid grey;
margin-left: auto;
margin-right: auto;
overflow: hidden;
position: relative;
}
#slider{
width: 2430px;
border: 1px solid green;
height: 350px;
position: absolute;
}
.slides{
width: 800px;
height: 350px;
border: 1px dotted blue;
float: left;
background-color: grey;
font-size: 30px;
text-align: center;
}
I am trying to implement a slide show sort of a feature. But i am not sure what logic goes into the javascript over here, i know i need to use a setInterval() function. The only part is how i would work out the width of the element with the id:"slider". Pointers would be helpful
EDIT: trying to implement this without jQuery
I see in your CSS that your widths are static, but if you were to add slides you should
calculate the #slider width using the width of .slides times the amount of slides..
Then, save your .slides width (including margin) as your offset, and animate #slider's left position using the offset..
EDIT: Actually, there's another technique I've been fiddling with so you won't have to calculate the widths, and that's using display inline-block like this:
#slider { white-space:nowrap;}
.slides { display:inline-block;}
this will automatically have all your slides on the same line and then you can animate using margins.
Let me know if that clears it up for you.. do you need a code example?
EDIT: example (using css animations)
Javascript
var slider, slides, offset, amount, _timer, _curindex = 0;
function initSlider() {
slider = document.getElementById("slider");
slides = document.getElementsByClassName("slides");
offset = slides[0].offsetWidth+2;
amount = slides.length;
slider.style.width = offset*amount;
_timer = setInterval(moveSlide, 3000);
}
function moveSlide() {
_curindex = (_curindex == amount-1) ? 0 : _curindex+1;
slider.style.left = -_curindex*offset+"px";
}
initSlider();
FIDDLE
Like this? Pure HTML CSS:
<div id="parent_scroll">
<div id="slider">
<div class="slides"><img src="http://placehold.it/350x150/ff0000/000000" alt=""></div>
<div class="slides"><img src="http://placehold.it/350x150/00ff00/000000" alt=""></div>
<div class="slides"><img src="http://placehold.it/350x150/0000ff/000000" alt=""></div>
</div>
</div>
DIV#parent_scroll{
width: 350px;
height: 150px;
overflow: hidden;
}
DIV#slider{
position: relative;
width: 1050px;
animation: slideme 5s infinite;
-webkit-animation: slideme 5s infinite;
}
#keyframes slideme {
0% {left: 0;}
33% {left: -350px;}
67% {left: -700px;}
100% {left: 0;}
}
#-webkit-keyframes slideme {
0% {left: 0;}
33% {left: -350px;}
67% {left: -700px;}
100% {left: 0;}
}
DIV.slides{
float: left;
}
DIV#slider:before, DIV#slider:after{
display: table;
content: "";
}
DIV#slider:after{
clear: both;
}
DIV#slider{
zoom: 1
}
http://jsfiddle.net/yLTKe/3/
Add JS to make it dynamic
you should try this code
<div id="div1" class="slides" style="width:800px...">Slide1</div>`
and in js code
var slide1 = document.getElementById("div1");
//if you want to add width
slide1.style.width= parseInt(slide1.style.width) + 100 + "px";`
I am trying to make a light box style Jquery function. Unfortunately, the .container div that contains the image div (.lightboxbackground) I want to make pop out and enlarge has position:absolute and z-index: 10 so my pop up box and background fader only take up the width and height of that parent (.container) div eg:
Would anyone know a way around this so that my .lightboxbackground and .lightbox divs can cover the whole screen?
<div class='container'>
<div class='lightboxbackground'>
<div class='lightbox'>
<img src='image.jpg'/>
</div>
</div>
</div>
.container {
position: absolute;
z-index:10;
width: 200px;
height: 200px;
}
.lightboxbackground {
background-color:#000;
opacity: 0.9;
width: 100%;
height: 100%;
position:absolute;
z-index: 11;
}
.lightbox {
width: 500px;
height: 500px;
position:absolute;
z-index: 12;
}
if you want to cover the whole screen:
.lightboxbackground {
background-color:#000;
opacity: 0.9;
width: 100%;
height: 100%;
position:fixed;
left:0;
top:0;
z-index: 11; //I would advise to change this to z-index:1000 (Note: .lightbox must also adjust to this)
}
fid: http://jsfiddle.net/uH4MF/1/
.container is their "frame of reference", so to speak. 100% width and height of the descendants of .container means 200px for them.
Also, there is a way to attain 100% height. One of them is to to explicitly define height on html and body so you can have this reference.
And so:
Place .container as a child of body
<body>
<div class="container">...
Remove .container's width and height
Add the following style:
html, body, .container {height:100%};