I'm teaching myself how to create a parallax hover image using 5 layers, which is working perfectly, and I am able to resize the layers alright, but I'm having trouble with the positioning.
When resized to 150vw/vh the layers spill over the bottom and right side. I've tried a few things but not sure if I'm putting the css properties in the right place. 100vh/vw positions in the center but is too small for my header.
Should I be positioning in #scene or .img? And whats best practice for this kind of thing?
Heres what I have so far anyway:
<div class="section--parallax">
<div id="scene">
<div data-depth="0.2">
<img src="resources/img/layer1.png">
</div>
<div data-depth="0.6">
<img src="resources/img/layer2.png">
</div>
<div data-depth="0.3">
<img src="resources/img/layer3.png">
</div>
<div data-depth="0.6">
<img src="resources/img/layer4.png">
</div>
<div data-depth="0.2">
<img src="resources/img/layer5.png">
</div>
</div>
</div>
CSS
header {
background-size: cover;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
#scene {
}
.section--parallax img {
width: 150vw;
height: 150vh;
}
JS
var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);
Related
I am trying to create a website inspired by the page: https://www.firewatchgame.com/ the issue is that when I make the screen smaller, it happens what happens here
document.querySelectorAll(".scene").forEach((elem) => {
const modifier = elem.getAttribute("data-modifier");
basicScroll
.create({
elem: elem,
from: 0,
to: 519,
direct: true,
props: {
"--translateY": {
from: "0",
to: `${10 * modifier}px`,
},
},
})
.start();
});
body {
height: 2000px;
background: black;
}
.scene {
position: absolute;
width: 100%;
transform: translateY(var(--translateY));
will-change: transform;
}
<div id="parallax">
<img class="scene" data-modifier="30" src="https://s.electerious.com/parallaxscene/p0.png">
<img class="scene" data-modifier="18" src="https://s.electerious.com/parallaxscene/p1.png">
<img class="scene" data-modifier="12" src="https://s.electerious.com/parallaxscene/p2.png">
<img class="scene" data-modifier="8" src="https://s.electerious.com/parallaxscene/p3.png">
<img class="scene" data-modifier="6" src="https://s.electerious.com/parallaxscene/p4.png">
<img class="scene" data-modifier="0" src="https://s.electerious.com/parallaxscene/p6.png">
</div>
<div id="test">
<font color="red">This is some text!asdfasd</font>
</div>
<script src="https://s.electerious.com/basicScroll/dist/basicScroll.min.js"></script>
https://jsfiddle.net/ufcqw2xh/
That it opens a section between the parallax layers and the next section, and the parallax layers are looked at.
my question is: how could I fix it or also how could I make the screen smaller, the parallax layers do what fire watch does that the image is shortened horizontally only. thank you very much for your answers.
The requirement is to keep the vertical size of the image, altering its width as necessary. There is also a problem with a 'gap' showing on certain viewport sizes between the scene and the background (a lower scene shows through as a sort of yellow).
If we change the width: 100% setting of the scenes to min-width: 100% the height remains constant and the width gets shortened as the viewport changes. The 'gap' problem disappears.
This is not an absolutely complete answer because the shortening is from the right (which actually suits the given scene because the wolf is towards the left) but for a more general solution you'd probably want to investigate further, perhaps using object-fit in some way.
Note also that the documentation says that calculate should be run on any resizing. This didn't seem to effect this change, but might be important for other changes.
document.querySelectorAll(".scene").forEach((elem) => {
const modifier = elem.getAttribute("data-modifier");
basicScroll
.create({
elem: elem,
from: 0,
to: 519,
direct: true,
props: {
"--translateY": {
from: "0",
to: `${10 * modifier}px`,
},
},
})
.start();
});
body {
height: 2000px;
background: black;
}
.scene {
position: absolute;
min-width: 100%;
transform: translateY(var(--translateY));
will-change: transform;
}
<div id="parallax">
<img class="scene" data-modifier="30" src="https://s.electerious.com/parallaxscene/p0.png">
<img class="scene" data-modifier="18" src="https://s.electerious.com/parallaxscene/p1.png">
<img class="scene" data-modifier="12" src="https://s.electerious.com/parallaxscene/p2.png">
<img class="scene" data-modifier="8" src="https://s.electerious.com/parallaxscene/p3.png">
<img class="scene" data-modifier="6" src="https://s.electerious.com/parallaxscene/p4.png">
<img class="scene" data-modifier="0" src="https://s.electerious.com/parallaxscene/p6.png">
</div>
<div id="test">
<font color="red">This is some text!asdfasd</font>
</div>
<script src="https://s.electerious.com/basicScroll/dist/basicScroll.min.js"></script>
I have two columns in a row with bootstrap 4. I want to use the whole screen to show the image. This is my code:
<div class="container-fluid" style="padding-left:0px;">
<div class="row">
<div class="col-md-6 ">
<img class="img-fluid" src="jumbo_background.jpg" />
</div>
<div class="col-md-6">
<div class="contact-wrapper">
<p>Test</p>
</div>
</div>
</div>
</div>
Everything is working good and responsive but this is the result I get from this code:
The preferred result I want is this:
The picture I use the dimension are 6000 X 4000
The solutions I have tried:
html, body {
height: 100%;
}
I have inspected the browser with the Google dev tool and I can see the the body is 100% but still not the result I want.
I have used h-100 from bootstrap and still get the same result.
I have used height: 100vh; but on smaller devices it's not responsive
I have checked this link:
Height not 100% on Container Fluid even though html and body are
Still don't get the result I want.
How can I give the image a full height in bootstrap 4?
UPDATE:
After nikolay solution on resolution: 1156 x 1013
You seem to want to use the image as a background. So my suggestion would be to do just that, as the cross-browser support is better (I'm not saying it can't be done with <img> alone, only that it's easier with background-image). Do note I'm leaving the <img> tag in for two reasons:
SEO indexing (if you need it)
sizing the column properly on mobile devices.
However, the <img> is not rendered. You're always looking at the background image of the <div>.
Here's a solution which grabs the src attribute of the first <img> element in each .column-image and uses it as <div>s backgroundImage. For it to work, make sure the <div> has the image-column class:
$(function() {
$('.image-column').each(function() {
const src = $('img', this).eq(0).attr('src');
if (src) {
$(this).css({ backgroundImage: `url(${src})` })
}
})
});
.image-column {
min-height: 100vh;
background: transparent no-repeat center /cover;
}
.image-column .img-responsive {
visibility: hidden;
}
#media(max-width: 767px) {
.image-column {
min-height: 0;
}
.image-column .img-responsive {
width: 100%;
height: auto;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 image-column">
<img src="https://i.picsum.photos/id/237/600/400.jpg" class="img-responsive">
</div>
<div class="col-md-6">
<div class="contact-wrapper">
<p>Test</p>
</div>
</div>
</div>
</div>
Note: even though it's used as both src of the <img> and background-image of the <div>, the resource (image) is only loaded once.
Here's a solution:
html, body,
.container-fluid .row,
.container-fluid .row .col-md-6,
.container-fluid .row .col-md-6 img {
height: 100vh !important;
}
Add example for the responsive mobile view as you made above, so I can write a solution.
I'm trying to put an image inside my circle chart, but what I'm trying is not working. I have tried to put an "img src" inside the div html5, but that doesn't work.
If someone can help me, that would be nice.
var htmlDoughnut = document.getElementById("html").getContext("2d");
var htmlData = [
{
value: 90,
color:"#74cfae"
},
{
value : 10,
color : "#f2f2f2"
}
];
var myHTMLdoughnut = new Chart(htmlDoughnut).Doughnut(htmlData, {
percentageInnerCutout : 80
});
<div id="skills">
<div class="container">
<div class="row center-block">
<h3 class="text-center">Dev Skills</h3>
<div class= html5>
<div class="col-xs-6 col-sm-3 col-sm-offset-1">
<canvas id="html" height="150" width="150" ></canvas>
<p>HTML5</p>
<br>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js'></script>
If you take a look at the Chart.js documentation for doughnut charts, you'll notice there's nothing in there about background images. Background color is the best you get. That's likely because drawing actual photos on a canvas can be a pretty complicated task that is often not especially performant, so they don't include it out of the box.
So that being the case, whether you can still pull this off depends on exactly what you had in mind.
If you want to have different images for each different value on the doughnut, that's not going to happen, at least not while using Chart.js. (You could probably do that if you did the whole chart is pure CSS, though.)
If you just want a single image in the middle of the doughnut, though, what you could do is add an img tag or use a CSS background-image for some element and position that image/element on top of your chart. Since the canvas has to be given a static size anyway, this may work out alright for you; you may just need to experiment a bit to get the position and size just right.
In the snippet below, I've added a wrapper around the canvas and put the background image on a pseudo element of that wrapper (since you can't have pseudo content on the canvas itself). I've positioned the pseudo element to go in the middle of the doughnut.
var htmlDoughnut = document.getElementById("html").getContext("2d");
var htmlData = [
{
value: 90,
color:"#74cfae"
},
{
value : 10,
color : "#f2f2f2"
}
];
var myHTMLdoughnut = new Chart(htmlDoughnut).Doughnut(htmlData, {
percentageInnerCutout : 80
});
#canvas-wrapper {
position: relative;
}
#canvas-wrapper::after {
content: '';
display: block;
position: absolute;
top: 19px;
left: 19px;
width: 112px;
height: 112px;
border-radius: 50%;
background-image: url('https://picsum.photos/id/1042/300/450');
background-size: 140px auto;
background-position: center center;
background-repeat: no-repeat;
}
<div id="skills">
<div class="container">
<div class="row center-block">
<h3 class="text-center">Dev Skills</h3>
<div class= html5>
<div class="col-xs-6 col-sm-3 col-sm-offset-1">
<div id="canvas-wrapper">
<canvas id="html" height="150" width="150" ></canvas>
</div>
<p>HTML5</p>
<br>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js'></script>
I am trying to have my background cover the page to create the parallax effect. Its the only thing missing as of now. Each "slide" div should cover the page. Here is the jsfiddle displaying the problem.
For my slides i am using the css styles:
.slide { background-attachment:fixed; width:100%; height:100%;
position: relative; padding:30px;}
and the html
<div class='slide' id='slide1' data-slide='1' data-stellar-background-ratio='0.5'>
<div class='container'>
<div class='row'>
<div class='col-md-6 slide-1-logo'>
<img src="img/MCP-LOGO-64x55.png" class='mainimg'>
</div>
<div class='col-md-6'><h1> Welcome!</h1></div>
</div>
</div>
<a class='button' data-slide='2' title=''></a>
</div>
You're .main class should have
height: 100%.
for the content to stretch fully.
A div in which I would be sliding in images , I want the images to appear in only a certain area of the div, say a triangle shaped area. The rest of the div should just show whatever is underneath the div.
CSS:
#overlay {
width: 700px ;
height: 300px ;
position: absolute;
top: 50px;
left: 50px;
z-index: 100;
background: url("img/overlay.png");
background-repeat: no-repeat;
}
HTML:
<div class="boxcat" id="websitesbox">
<div id="overlay"></div>
<div id="websitesSlider">
<img src="img/seanswers.PNG" alt="Seanswers screenshot">
<img src="img/stories.png" alt="Seanswers screenshot">
<img src="img/PerfectUpload_1.png" alt="Seanswers screenshot">
</div>
</div>
Here I would be sliding in the images into overlay, BUT I don't want the images to show up completely , instead just a part of the overlay div should be covered in the image.
Not sure If I am making any sense. If I am is this possible ?
Thanks
You want to use mask-image however it isn't widely supported by the browsers.
Here you can read about the spec: http://www.w3.org/TR/css-masking/
And here you can see the support: http://caniuse.com/#search=mask
you can next websitesSlider into overlay:
<div class="boxcat" id="websitesbox">
<div id="overlay">
<div id="websitesSlider">
<img src="img/seanswers.PNG" alt="Seanswers screenshot">
<img src="img/stories.png" alt="Seanswers screenshot">
<img src="img/PerfectUpload_1.png" alt="Seanswers screenshot">
</div>
</div>
</div>