I am trying to make a parallax back round like this one link.
So far I've made this but I can't get the layers to scroll, here is the link to my code link.
I am also having bugs like the drop down menu (the lightning icon) is behind the back round and the header isn't fixed when scrolling.
Can anyone please send a a tutorial on how to do this specific parallax back round or fix my code, thank you.
Here is the parallax code:
Html:
<img class="scene" data-modifier="30" src="https://s.electerious.com/parallaxscene/p0.png" alt="Image error.">
<img class="scene" data-modifier="18" src="https://s.electerious.com/parallaxscene/p1.png" alt="Image error.">
<img class="scene" data-modifier="12" src="https://s.electerious.com/parallaxscene/p2.png" alt="Image error.">
<img class="scene" data-modifier="8" src="https://s.electerious.com/parallaxscene/p3.png" alt="Image error.">
<img class="scene" data-modifier="6" src="https://s.electerious.com/parallaxscene/p4.png" alt="Image error.">
<img class="scene" data-modifier="0" src="https://s.electerious.com/parallaxscene/p6.png" alt="Image error.">
CSS:
body {
height: 2000px;
background: black;
}
.scene {
position: absolute;
width: 100%;
transform: translateY(var(--translateY));
will-change: transform;
}
Javascript:
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()
})
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 am relative new to web development so while developing a project site responsive design I ran into a problem that when ever hamburger menu is pressed even though lines for expending exists in external css file but it is not detected but new inine styles are created by javascript and then it works as expected.
HTML:
<nav class="mobileNav" id="mobileMenu">
<a class="mol-6" onclick="show();" href="index.html">
<figure>
<img class="icon" src="images/nav/home.png" alt="">
<figcaption>Home</figcaption>
</figure>
</a>
<a class="mol-6" onclick="show();" href="astronomy.html">
<figure>
<img class="icon" src="images/nav/astro.png" alt="">
<figcaption>Astronomy</figcaption>
</figure>
</a>
<a class="mol-6" onclick="show();" href="telescope.html">
<figure>
<img class="icon" src="images/nav/tele.png" alt="">
<figcaption>Telescopes</figcaption>
</figure>
</a>
<a class="mol-6" onclick="show();" href="about.html">
<figure>
<img class="icon" src="images/nav/about.png" alt="">
<figcaption>About</figcaption>
</figure>
</a>
</nav>
CSS:
#mobileMenu {
font-family: light, sans-serif;
max-height: 0px;
z-index: 99;
transform: translateY(-100%);
overflow: hidden;
padding: 0px;
transition: transform 0.5s;
}
Javascript:
function show() {
if (document.getElementById("mobileMenu").style.maxHeight == "0px") {
setTimeout(function(){
document.getElementById("mobileMenu").style.maxHeight = "100%";
document.getElementById("mobileMenu").style.position = "fixed";
document.getElementById("mobileMenu").style.padding = "1%";
}, 1)
document.getElementById("mobileMenu").style.transform = "translateY(0px)";
} else {
setTimeout(function(){
document.getElementById("mobileMenu").style.maxHeight = "0px";
document.getElementById("mobileMenu").style.padding = "0px";
document.getElementById("mobileMenu").style.position = "relative";
}, 500)
document.getElementById("mobileMenu").style.transform = "translateY(-100%)";
}}
Working Example:
Astromuneeb (Require Portrait Orientation)
Any help will be appreciated.
There are better approaches of what you are trying to accomplish. For instance, you could use css classes for styling and use javascript only for switching classes.
I agree with Eugene, but .mobileNav class seems to be overriding your portrait media query.
I added important to your .mobileNav portrait media query but even that won't override it, guess its something to do with hierarchy. It's weird you get display:none; as an inline style on your nav when opening and closing currently, that will not help.
Definitely just set a .open class as Eugene suggested. And use css transforms to do the animation. And just simply add/remove class on the nav.
And when using media queries in css for mobile etc prob best to use screen size etc, and start mobile first...
.mobileNav { display: block; }
#media (min-width: 992px) {
.mobileNav { display: none; }
}
I made some code where the user can upload some images from a zip. On the next page I need to show all the images seperatly in a 85*85 px frame.
The problem is that it may take some time for all the images to load. So I want to show a loading gif while the user waits for the image to load.
I've set the src of the images to be the loading gifs, while I created some checkboxes with the real source as id
echo "<td><img src=\"beelden/ajax-loader-black-16.png\" id=\"img".$image."\" style=\" width: 85px; height: 85px; border: 1px solid gray; background-color: #fff; padding: 10px;\">";
echo "<input type=\"checkbox\" id=\"img[".$image."]\" name=\"check_image[]\" value=\"".$filename."\" /></td>";
<input type="hidden" name="aantal" id="aantal" value="<?=$image?>" >
Then I created some javascript to check if the image is loaded, and when it is, it is supposed to replace the source of the image.
<script>
var aantal = document.getElementById("aantal").value;
for(var i = 0; i < aantal; i++){
var source = document.getElementById("img["+i+"]").value;
var img = new Image();
img.onload = function(){
$("#img"+i).attr('src', source);
}();
img.src = source;
}
</script>
But this does not work the way I expected, I think it fires for all of the images as soon as the first one is loaded. Any ideas what I am doing wrong or how to fix this?
You can set the background of an image to the loading gif. It is a simple css trick. You wouldn't need then to make a js script.
.loading {
background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat;
}
<img class="loading" src="http://placehold.it/106&text=1" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=2" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=3" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=4" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=5" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=6" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=7" width="106px" height="106px" />
Update :
In case you have transparent images then the story becames a bit more complicated but, still can be done with css and some div elements.
.image-wrapper {
overflow: hidden;
width: 106px;
height: 106px;
display: inline-block;
}
.image-wrapper img {
float: left;
display: block;
opacity: 0.2; /* simulating a semitransparent image */
}
.image-wrapper:after, .loading {
content: ' ';
background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat ;
background-size : auto 100%;
width: 106px;
height: 106px;
float: left;
display: block;
}
<div class="image-wrapper">
<!-- simulates a hard loading image -->
<img src="http://placehold.it/not-existing" alt="" />
</div>
<div class="image-wrapper">
<img src="http://placehold.it/106x106&text=2" alt="" />
</div>
<div class="image-wrapper">
<img src="http://placehold.it/106x106&text=3" alt="" />
</div>
<div class="image-wrapper">
<img src="http://placehold.it/106x106&text=4" alt="" />
</div>
<div class="image-wrapper">
<img src="http://placehold.it/106x106&text=5" alt="" />
</div>
<div class="image-wrapper">
<img src="http://placehold.it/106x106&text=6" alt="" />
</div>
<div class="image-wrapper">
<img src="http://placehold.it/106x106&text=7" alt="" />
</div>
Unfortunately the browser adds a broken icon or a ? while loading, this is why the image contains an empty alt;
Update 2 :
The second variant relies very much on the image size, if you have difrent sizes than the loading gif won't be pushed away properly, as an alternative would be to use the first variant and a little js script that will remove the background as soon as the image is loaded:
$('img').load(function(){
$(this).css('background','none');
});
.loading {
background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="loading" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=2" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=3" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=4" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=5" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=6" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=7" width="106px" height="106px" />
Angular 8 Solution with Hostlistener and Hostbinding.
1. Create a simple attribute directive
import { Directive, HostListener, Input, HostBinding } from '#angular/core';
#Directive({selector: '[imageLoader]'})
export class ImageLoaderDirective
{
#Input('src') imageSrc;
#HostListener('load')
loadImage()
{
this.srcAttr=this.imageSrc;
}
#HostBinding('attr.src') srcAttr="../../assets/pics/Loader.svg"
constructor() { }
}
Basically we set the initial image source to the loader image. Once the image loads(load event triggered), we listen to it and set the image source to the actual image.
2. Now use the just need to use the created attributes on your images.
<img imageLoader src='image.jpg'>
Using svg requires no styling changes, gif may require css changes.
You can visit the website for working implementation.
I'm trying to figure out how to get the following to work:
When initially loaded, content on the right for the initial image is displayed (and should be coloured).
On hover over the images, the images will change to colour and the content for that image will appear on the right hand side.
On Click the content will stay in the right hand side and the image will stay coloured as it is the selected content.
I understand you could just make the images simply have a rollover feature using CSS for the coloured images to appear, however I am unaware how to make the image stay coloured when clicked and how to make the content in the right appear, which I assume would be possible to do using Jquery or Javascript.
What it looks like:
http://i.stack.imgur.com/73oFL.png
<ul id="testb">
<li id="companies">
<img src="images/linkedin.gif" width="120" height="95" alt="" />
<img src="images/specsavers.gif" width="100" height="95" alt="" />
<img src="images/avc.gif" width="110" height="95" alt="" />
</li>
<li id="testcont">content here</li></ul>
#testb{
width:950px;
margin:0 auto;
list-style:none;
padding:0;
}
#companies{
width:440px;
float:left;
list-style:none;
padding:85px 0 45px 0;
margin:0;
height:130px;
display:block;
}
#testcont{
float:left;
width:395px;
height:170px;
padding:45px 0 45px 70px;
margin:0;
background: url(images/testglow.gif) no-repeat;
}
If you could help out it would be really appreciated.
Thanks
Even tho NewToJS is absolutely right, sometimes a little free source code might help you get started:
var contentValues = ["slide 1 content", "slide 2 content", "slide 3 content"];
var contentColors = ["#333333", "#777777", "#000000"];
$(function() {
$("#companies img").on("mouseover", function()
{
console.log($(this).data("slide"));
$("#testcont").html(contentValues[$(this).data("slide")]);
$("#testcont").css("background-color",contentColors[$(this).data("slide")]);
});
$("#companies img").on("click", function()
{
console.log($(this).data("slide"));
$("#companies img").css("background-color", "transparent")
$(this).css("background-color", contentColors[$(this).data("slide")]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="testb">
<li id="companies">
<img data-slide="0" src="images/linkedin.gif" width="120" height="95" alt="" />
<img data-slide="1" src="images/specsavers.gif" width="100" height="95" alt="" />
<img data-slide="2" src="images/avc.gif" width="110" height="95" alt="" />
</li>
<li id="testcont">content here</li>
</ul>
i am attempting to display images when the corresponding thumbnail is hover over using only css and am having trouble with the logic and don't know if it is even possible. i can do it in javascript if absolutely necessary.
Here is my latest attempt.
<div id='img-container' class='grd12'>
<img id='img1' class='slide-images' src='images/10086115704_15ab56a165_o.jpg' alt='1'>
<img id='img2' class='slide-images' src='images/9917938624_0a8778f8b1_o.jpg' alt='2'>
<img id='img3' class='slide-images' src='images/PIA18847.jpg' alt='3'>
<img id='img4' class='slide-images' src='images/sun-large.jpg' alt='4'>
</div>
<!-- <div class='grd3 thumbnail'>-->
<img id='thumb1' class='grd3 thumbnail' src='images/10086115704_e36e457d2b_q.jpg' alt='##'>
<!-- </div>-->
<!-- <div class='grd3 thumbnail'>-->
<img id='thumb2' class='grd3 thumbnail' src='images/9917938624_1ed12deaa2_q.jpg' alt='##'>
<!-- </div>
<div class='grd3 thumbnail'>-->
<img id='thumb3' class='grd3 thumbnail' src='images/PIA18847.jpg' alt='##'>
<!--</div>
<div class='grd3 thumbnail'>-->
<img id='thumb4' class='grd3 thumbnail' src='images/sun-large.jpg' alt='##'>
<!--</div>-->
And the CSS
#img-container{
position:relative;
top:0px;
left:0px;
height:950px;
}
.slide-images{
position:absolute;
top:0px;
left:0px;
}
.thumbnail > img{
margin-left:auto;
margin-right:auto;
display: inherit;
}
img#thumb4:hover ~ #img4>#image4{
display:none;
}
I believe this is possible using CSS alone, however it is not very scaleable and it might end up being easier and more appropriate to use Javascript for this. For example:
img#thumb1:hover ~ #img4>#image4{
display:none;
}
Your selector here is incorrect. The general sibling selector selects only elements after the first match. In this case, your image thumb is after your image, but this selector is looking for an image after an image thumb. This is the opposite of what you have. There is no 'sibling before' selector in CSS.
An easier solution, rather than fiddling around with CSS selectors, would just be to bind each thumbnail to a click event that changes the source of a single image tag each time (or alternatively, scrolls across/fades, whatever animation you're looking for). This way, you save on markup, don't need to worry about positioning as much, and can dynamically generate the image display.
For example, to get the ID of an image, you could bind a click event to each thumbnail and then grab the ID of the image which could stored in a data attribute:
$('.thumbnail').on('hover', function() {
var activeImg = $(this).data('imgid');
// From here, set the main image to have the associated image source
}
This is very possible to achieve with just CSS. The layout of your HTML is what needs to change. In this example:
Each thumbnail and full-size image is placed inside a div container
The full-size image is hidden with opacity: 0;
When the div container is hovered, the full-size image is given opacity: 1 and will fade-in thanks to the transition
z-index: 1 keeps the full-size images above the thumbnails
Full Example
.item {
float: left;
position: relative;
}
img {
display: block;
cursor: pointer;
margin: 5px;
}
.fullsize {
position: absolute;
opacity: 0;
transition: opacity 0.6s;
z-index: 1;
top: 0;
left: 0;
pointer-events: none;
}
.item:hover .fullsize {
opacity: 1;
}
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>