I'm new to javascript and wanna create a HTML page and would like to make an image like floating on my page and it will interacting when user scrolling up and down of the website but I just couldn't figure it out. Anyone has idea how to deal with it?
<script>
$(window).scroll(function () {
//You've scrolled this much:
// $('p').text("You've scrolled " + $(window).scrollTop() + " pixels");
var doc = doc
var x = document.getElementsByClassName("ImageTesting");
//x.style.top = "$(window).scrollTop()";
x.css({'top': $(window).scrollTop() +'px'});
console.log($(window).scrollTop() + "px")
//console.log(x.style.top)
});
</script>
You can achieve the same behavior using css's sticky property
.ImageTesting {
position: -webkit-sticky; /* safary */
position: sticky;
top: 0;
}
You can do it with simple CSS properties first mentioned above The CSS Sticky property with image tag or just
<div class="bgFloat"></div>
<style>
.bgFloat {
background-image: url(image.jpg);
background-attachment: fixed;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
</style>
It will help you to fix the image position as background. Or if you want to continue with image tag then follow the 'position: sticky; top:0' or where ever you want to place your element.
Related
This site I am developing is using HTML5, CSS3, Bootstrap 4, and Jquery. I would like to have a scroll effect on a full-screen background-image that is at the very top of my page (100vh hero banner type thing). I am trying to gradually increase the contrast (css filter: contrast(some%)) of an image as the user scrolls down (its fine if the image is completely unrecognizable by the time it leaves viewport).
I have some Jquery that somewhat does the effect I am looking for, however I would like the effect to be more gradual.
The main issue I am having is that when the user scrolls back to the top of the page the contrast value gets set to 0% leaving a completely grayed out image. What I would like is for the contrast to gradually decrease back to normal (100%) as the user scrolls back up all the way to the top of the page.
I have set up a very simplified codepen. I couldn't get a css background-image url value to reference an external link from codepen, so I am targeting the effect on a full screen image ().
Thanks!
Link to the Pen: [codepen-link][1]
[1]: http://codepen.io/wdzajicek/pen/MVovZE
See code below in snippet
$(document).ready(function (){
$(window).scroll(function(){
var pixelstop = $(window).scrollTop();
$(".myimage ").css("filter", "contrast(" + pixelstop + "%)");
});
});
.header {
height: 100vh;
}
.myimage {
position:absolute;
top: 0;
left: 0;
min-width: 100%;
width; 100%;
z-index: -1;
}
.jumbotron {
position: relative;
background-color: unset;
margin-top: 150px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header text-center">
<img src="https://raw.githubusercontent.com/wdzajicek/portfolio/master/assets/img/header-bg.jpg" class="myimage" alt="">
</header>
There is the main problem in $(window).scrollTop(); it will return 0 value
that's why contrast value gets set to 0% leaving a completely grayed out image
var pixelstop = $(window).scrollTop();
replace the code with
var pixelstop = 100+100*$(window).scrollTop()/$(window).height();
don't just copy this code please understand thanks.
$(document).ready(function (){
$(window).scroll(function(){
var pixelstop = 100+100*$(window).scrollTop()/$(window).height();
console.log(pixelstop);
$(".myimage ").css("filter", "contrast(" + pixelstop + "%)");
});
});
.header {
height: 100vh;
}
.myimage {
position:absolute;
top: 0;
left: 0;
min-width: 100%;
width; 100%;
z-index: -1;
}
.jumbotron {
position: relative;
background-color: unset;
margin-top: 150px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<header class="header text-center">
<img src="https://raw.githubusercontent.com/wdzajicek/portfolio/master/assets/img/header-bg.jpg" class="myimage" alt="">
</header>
100 is default value of filter contrast not 0. that's why the background is grey out because it reaches zero.
I'm currently doing a javascript parallax page. I've managed to set the background image and 2 other pictures(#content,#content2).
When i scroll all the way down past my content and then to my content2, I want my webpage to end there. However I'm able to scroll down infinitely.
Can anyone please look at my code and tell me what i need to add or change so that my webpage ends and stops scrolling after content2.
Please note that my #image is my main background and the content and content2 are separate images that go over my background but i want my page and scrolling to stop at content2.
Code:
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#image {
position: relative;
z-index: -1
}
#content {
height:690px;
width: 100%;
margin-top:-10px;
background:url(http:/chicago_bulls_wallpaper_backgrounds.jpg);
position: relative;
z-index: 1;
background-repeat: no-repeat;
background-position: center center;
}
#content2 {
top:710px;
height:570px;
width: 100%;
margin-top:-10px;
background:url(All.jpg);
position: relative;
z-index: 1;
background-repeat: no-repeat;
background-position: center center
}
</style>
<script type="text/javascript">
var ypos, image;
function parallex() {
ypos = window.pageYOffset;
image = document.getElementById('image');
image.style.top = ypos * 1 + 'px';
}
window.addEventListener('scroll', parallex);
</script>
<img id="image" src="black-glass.png" height="710px" width="100%" />
<div id="content"></div>
<div id="content2"></div>
It's because your parallax factor is 1, meaning that the background is moving exactly with the screen. Thus, the browser thinks that it always has room and can always afford to scroll down, which is actually a pretty hilarious bug.
If you were intending true parallax scrolling, set your factor to less than 1, like this:
image.style.top = ypos * 0.95 + 'px';
If you simply didn't want your background to move at all with the rest of the page, set the body's background to this image (as you already do with the divs), and set the background-attachment property to fixed - no JavaScript required.
Is something like this what you are wanting? I am not having a problem with infinite scrolling.
http://codepen.io/vinsongrant/pen/advzww
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/d/da/The_City_London.jpg" height="710px" width="100%" />
<div id="content">
<h1>Here is content 1</h1>
</div>
<div id="content2">
<h1>Here is content 2</h1>
</div>
I've made a script that re-sizes my website with some ratio: 'rat'. I do a scale but that scale creates white margins so I transform the entire html page and I sent it to origin in the coordinates 0 , 0.
document.documentElement.style.transform = "scale(" + rat + ")";
document.documentElement.style.width = 100 / rat + "%";
document.documentElement.style.transformOrigin = '0 0';
The problem I have is that some background images with the following property do not transform:
background-attachment: fixed;
Everytime I transform my html page the background images with background-attachment: fixed; don't transform.
You can check what I'm talking about in my portfolio here:
http://testedesignfranjas.tumblr.com/
Open the site in chrome and in FIREFOX and see the differences.
The issue is in Firefox.
*sorry for my bad english
I have a partial answer. Firefox doesn't always treat nested, fixed elements correctly when using a transform. Instead of using background-attachment, make the div with the image position:fixed. The second div is relative or static, so it will overlay the first div.
<body onload="scaleAll(0.8)">
<div id="img1">I have a background image, am scaled and am fixed.</div>
<div id="outer">
I have content and am scaled.
</div>
</body>
I have moved the image outside the div and set img1 to position:fixed. Do the scaling individually, once for img1 and once for the outer div that has the content.
<script>
function scale(rat, container) {
var element = document.getElementById(container);
element.style.transform = 'scale(' + rat + ')';
element.style.transformOrigin = '0 0';
}
function scaleAll(rat) {
scale(rat, "outer");
scale(rat, "img1");
}
</script>
The style uses position:fixed for the img1 and relative for the outer.
<style>
div#outer {
position: relative;
height: 900px;
width: 900px;
}
#img1 {
position: fixed;
background: url("image.png") no-repeat;
width: 796px;
height: 397px;
}
</style>
JSFiddle Example
Use jQuery to remove the "fixed" attribute when you scale document
$("img").each(function() {
$(this).css("background-attachment","");
});
I have a small problem. I can do a fadout fadin on an entire page by clicking html links. But I want to change the images that correspond with my links in array.
Below my code to fadeIn and fadeOut between pages html:
Script
$(window).load(function(){
$("#overlay").fadeOut(1500);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#overlay").fadeIn(1000, function() {
window.location = linkLocation;
return false;
});
});
});
Css
#overlay {
position: fixed;
top: 0; left: 0;
background: #fcc916 url(img/logo/blablabla.png) no-repeat center center;
/*background: #ffffff;*/
width: 100%;
height: 100%;
z-index: 314159;
}
html
<div id="overlay"></div>
I know I have to do a array with images and retrieve them in getElementByld but I do not know how ...
Thanks for your precious help and sorry for my english
Try ...
$("#overlay")
.attr("style", "background: #fcc916 url(img/logo/" + fromarray[i] + ".png) no-repeat center center");
... this will change the background image via jQuery. the .png portion could be coming from the array, as well.
I have a page with a header at the top, a sidebar on the left, and a main content area on the right. A simplified version can be seen at http://jsbin.com/iqibew/3.
The sidebar has the styling position: fixed so that it does not scroll with the rest of the page. This works but I also need the sidebar itself to scroll if it's content is too long to fit.
This is only possible if I can set the correct height for the sidebar. But I can't find any way to set this height. 100% is close but it's too tall because the sidebar starts below the header.
Is there no way to address this. I'm open to either a CSS or JavaScript/jQuery solution.
I suppose I'll post this, since it seems to work:
div#header-div {
height: 90px;
background-color: lime;
margin: 0;
}
div#fixed-div {
position: fixed;
left: 0;
top: 0; /* <<< No offset */
bottom: 0; /* <<< Pull to the bottom for height */
margin: 120px 0 0; /* <<< Give it the 120px top */
width: 260px;
background-color: silver;
overflow-y: scroll;
}
http://jsbin.com/iqibew/13/
if you want your div to be sized as you like , i have an option for you
//Add this to <head> section , i thought you haven't one in the sample
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" >
</script>
<script type="text/javascript" >
$(document).ready(function() {
function _resizeTDiv()
{
var p = $("#header-div");
var position = p.position();
var realheight = p.position().top+p.height();
$("#fixed-div").height( $(document).height()-realheight -5); //+-5 Error? , not needed
}
_resizeTDiv();
//Resize our div on window resize?
$(window).resize(function() {
_resizeTDiv();
});
});
</script>